How to integrate Google Optimize in Webflow through GTM

If you have a website, surely you spend a lot of time thinking of ways to improve and update it. Nowadays offering the best digital service is no longer optional but essential.

Google Optimize is a tool that will help you update and improve your interface and user experience. It allows you to measure the impact of the changes you implement on your site in order to determine those that work best.

In this tutorial we will integrate Google Optimize into Webflow through Google Tag Manager. This guide is written step by step: following it would be very easy even if you haven't integrated any tool into Webflow before.

Requirements

Before we begin, it is necessary to have an account in the following services. They all have a free tier which we can work with.

  • Google Analytics
  • Google Optimize
  • Google Tag Manager
  • Webflow

Else, you will also need to have integrated the following tools:

  • Google Analytics with Google Tag Manager

Step 01 - Copy your Container ID in Google Optimize

When you enter in your Google Optimize dashboard, after creating your account and your container, you will need to know your container ID.

Follow these steps to find your container ID

  • In your Google Optimize dashboard, you will see a box with your container, click on it.
  • Once inside of your container, click on settings. You will find the settings button on the upper right corner.
  • Once inside of your settings, you will be able to see the details of your container. You will see your containers name and its ID. This ID is a numbers and letters code.
  • Select the ID and copy it.

Step 02 - Create a new Tag in Google Tag Manager

Once in your Google Tag Manager account, you will see the menu on the right side of the page. Through this menu you will be able to access to different configurations and management of Tags, Triggers, Variables, Folders and Templates.

Follow these steps to create a new tag

  • Click on the Tags option in the menu.
  • Once in Tags click on New.
  • Click on Tag Configuration
  • From the displayed menu, choose the Google Optimize option.
  • Now you can change the Tag name in the box you will see on the upper left side of the page. You can call it Google Optimize.
  • You will see a box to paste your Google Optimize ID. Paste it.
  • Under the ID box you will see another box to select the appropiate variable. Select the Google Analytics variable you already created. If you have not yet create your Google Analytics variable, check this other article.
  • Click on the save button.

Step 03 - Select Google Optimize Tag before Google Analytics'

From your Google Tag Manager account, you will need to configure the tags in order for the Google Optimize tag to fire before Google Analytics'.

Follow these steps to change the tag preference sequence

  • In your Google Tag Manager account, select the Tags options in the left menu.
  • Click on your Google Analytics Tag and then click on Advanced Settings.
  • Under Tag Sequencing, click on the "Fire a tag before Google Analytics Universal Analytics [or the name you gave to it] fires" box
  • Once selected the previous option, you can choose the Tag that will fire before Google Analytics Universal Analytics [oo the name you gave to it]. Select Google Optimize.
  • Click on Save button.

Step 04 - Publish your Tag Manager container to turn on the changes

From your Google Tag Manager dashboard click on the submit button. You will find this button on the upper right corner of the page.

Follow these steps to publish your container

  • From the displayed page you will see after clicking the submit button you will be able to edit the name and description from your version.
  • Click on the publish button.

🚨 Fix the page flicker

While implementing Google Optimize, it is likely for the page to flicker. To fix this, you can hide temporally the page. This way, Google Optimize will have enough time to charge the container.

Follow these steps to hide the page including snippet anti flicker in the page code.

  • Copy the following code in all the pages in which you included Optimize as high as posible in the <HEAD> tag. The anti flicker code -if you have installed dataLayer- must be included after the dataLayer code.
  • You also want to place the gobal site code and the Tag Manager code right after the anti flicker snippet.


Thank you!

‍

‍