Install Google Optimize on Your Website

-

This step is essential, but the way you do it depends on how you currently have your Google Analytics tracking set up. I will introduce two common approaches respectively. You can choose either one of them although I encourage you to try.

1. Install Optimize with optimize.js

If you have manually entered your Google Analytics tracking code into your header (or another part of your site), which is exactly the same as discussed at section 2.1 of my another article, Install Google Analytics on your Website, all you need to do is copy and paste a new line of code into it as instructed: 

1. Go to the container page of your Optimize account.  

2. Add the following code to the top of the “<head>” tag on ALL the blog page you wish to optimize and click save button.

3. For more details about how to Install Optimize with optimize.js, refer to https://support.google.com/optimize/answer/9692472?hl=en&ref_topic=6197443. 

2. Install Optimize with Google Tag Manager (GTM)

If you prefer to use Google Tag Manager approach, you can do as the following instructions for configuring the Optimize tag.
1. Collect the following necessary information:
    A. Your Analytics tracking ID.
    B. Your Optimize container ID.
    C. Confirm that your Tag Manager and Analytics tracker settings use the shared Google Analytics Settings variable, i.e., have Google Analytics installed via Google Tag Manager

2. Copy your Optimize container ID somewhere for future use

    You can find it at Container setup > Container information in Optimize.

3. Configure Optimize in Tag Manager

    A. Sign in to Google Tag Manager and select an account.

    B. Click on “New Tag”. Or click Tags > New.

    C. Click Tag Configuration > Google Optimize


    D. Enter your Optimize container ID that you have copied somewhere at step 2.
    E. At this point,
  • if you have installed Google Analytics with Google Tag Manager in the past, 
you should have your Google Analytics Tracking code variable set up (see step B of part 2 at subsection 2.2 in my post, Install Google Analytics on your Website). Select it in the Google Analytics settings;

  • if not, 

click on “Select Settings Variable” > New Variable and add your Tracking ID (UA-XXXXXXXXX-1) that you can find in Google Analytics > Admin > Property > Property Settings > Tracking ID, which is exactly the same as process at the installation of Google Analytics via GTM. 

    F. Click Save and save the tag without triggers.

    G. Give the tag a name or use the default one.

    H. Then, you would have two tags: Analytics and Optimize:

4. Trigger Google Optimize from the Universal Analytics Tag
    A. Open the Analytics pageview tag for the Analytics property linked to your Optimize container. (Click GA: Universal Analytics tag shown in the previous figure.)
    B. Click Tag Configuration > Advanced Settings > Tag Sequencing.

    C. Check the box to fire a tag before this tag fires. Under the Setup Tag heading, click the menu and select the desired Optimize tag.
Note: You want to fire the Google Optimize Tag before Google Analytics because Google Analytics need Optimize to run before they can track the result of your tests. Typically, it means that Google Analytics relies on the output of Google Optimize. This box basically makes a JavaScript Callback function.
    D. Under the Setup Tag heading, click the menu and select the desired Optimize tag. 
    E. Configure the Optimize tag to fire once per page, then save it.
        a) Click the right icon to go to the configuration page of the Optimize tag you selected in step D.
 
        b) Click Tag Configuration and then the edit button.
        c) Click Advanced Settings. Make sure once per page option is selected under tag firing options. Click save then. Save tag without Trigger selected.
    F. Click the configured Optimize tag.
    G. Then, you will be redirected to GA: Universal Analytics tag configuration page. 
    H. Save it.
5. Preview Your Tag Implementation
6. Publish Your GTM Container
7. Congratulations, you have now Installed Google Optimize using Google Tag Manager (GTM).
8. For more details about how to Install Optimize with Google Tag Manager, refer to https://support.google.com/optimize/answer/6314801?hl=en&ref_topic=6197443.

For more details about how to install Optimize and about advanced installation options, refer to https://support.google.com/optimize/answer/7513085 and https://support.google.com/optimize/answer/6262084?hl=en. 

3. Install the Anti-flicker Snippet

This is an optional step, but can greatly improve user experience as you run your tests in some cases. Page flickering sometimes happens when a visitor enters your experiment and the original page quickly flickers before the variant appears. For example, if your homepage header is currently blue, and you want to test a green variation, it might look like this when the page loads for a visitor:
Note: Do not install the anti-flicker snippet with a tag manager.
The anti-flicker snippet should only be installed inline – directly on the page – and never with a tag management system (TMS) or another asynchronous script. If you can't install the anti-flicker snippet inline you should skip it altogether.
To install the anti-flicker snippet:
1. Copy the full code below and add it to every page with Optimize as early in the <HEAD> as possible, but after any dataLayer declaration, if used.
2. Ensure that the global site tag (gtag.js) or Tag Manager container immediately follows the anti-flicker snippet.
<!-- Anti-flicker snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'CONTAINER_ID':true});</script>
Note: Replace CONTAINER_ID with your Optimize container ID. If you're using Google Tag Manager to deploy Optimize, replace CONTAINER_ID with your Tag Manager container ID.
You must initialize the dataLayer above the anti-flicker snippet or the performance of your site will be negatively impacted. Don't override the data layer later in the page.
  • Install the anti-flicker snippet after section 1 (Install Optimize with optimize.js), you will finally have: 
  • Install the anti-flicker snippet after section 2 (Install Optimize with Google Tag Manager (GTM)), you will finally have:
3. More details on installing Anti-flicker Snippet: https://support.google.com/optimize/answer/7100284?hl=en.















Comments

Post a Comment

Popular posts from this blog

Install Google Tag Manager on Your Website

-
Image
This approach is preferred if you want to apply more complex and customized tracking or you are new to use Optimize. I also recommend you to try this approach. 1. Set up Google Tag Manager If you don’t have a Google Tag Manager account:           a) Go to https://marketingplatform.google.com/about/tag-manager/.            b) Click on Start for Free.           c) Add your company’s name and country.           d) Set up the container’s name as your website’s name, select “Web” and click on Create.           e) Review the Terms of Service and click Yes.           f) You will be prompted with the web container installation code snippet If you do have a Google Tag Manager account:           a) Go to https://marketingplatform.google.com/about/tag-manager/.  ...
Read more

A/B Test with Google Optimize

-
Image
 In this article, I will show you to launch an A/B test experiment via Google Optimize.  1. Overview 1.1 Tools and Materials Blog article on Blogger.com Google Analytics (GA) Google Optimize (GO) Google Tag Manager (GTM) 1.2 Workflow 1.3 Hypothesis In the implementation, I built a blog on Blogger.com which is a blog-publishing service that allows multi-user blogs with time-stamped entries and I want to improve the search volume of it on the Internet. Before creating your first  experiment  you need to identify a problem, then create a hypothesis about what you can change to improve it.  To do so, I need to clarify a feature that can be added to my site to improve exposure on the search engine. In this example, I hypothesize that adding alternative text for figure element can improve the rank of the blog in the search list . Next, I will show how to design an A/B test by google optimize to test this hypothesis. 2. Blogger Article Preparation Blogger is ...
Read more