• Expand/CollapseMenu
Help

Optimizely Asynchronous Tag: Basic Configuration

Tealium's best practice is to load all tags Asynchronously. This post will outline how to follow the Tealium best practices when implementing Optimizely. For an understanding of the trade-offs between Asynchronous and Synchronous loading of testing tools see this POST. For options to implement Optimizely synchronously see this POST.

There are two methods of implementing Optimizely Asynchronous. The content of your site and your testing requirements will determine which approach to use. It is recommended that you try the two methods in the order they appear in this post.

NOTE: Both methods assume the utag.js file is coded asynchronously on the page.

 

Method 1 (RECOMMENDED): Bundle Optimizely Async Tag and load on all pages

This method is recommended because the tag will not block anything else from loading in the page.

Step 1: Enable the Bundling feature for Tags that will load on all pages.

    1. Click on "Save/Publish" in the top-right corner.
      config publish setting.png
    2. Click on "Configure Publish Setting". Then scroll down to "Performance Optimization" settings.
    3. Turn ON the "Bundle Tags Loading On All Pages" toggle. This will bundle the Tag with utag.js, thus reducing the number of network calls made by the browser.

bundle async tag.png

STEP 2: Add and set up the Optimizely Async  Tag

This Tag is available in Tealium's Tag Marketplace, which is home to a large selection of vendor Tags. Click here to learn how to add a Tag to your Tealium iQ profile. 

Async Tag settings.png

 

Here are the steps to set it up:

  1. Enter your Project Id. This is the number at the end of the script tag Optimizely sends you.
    Example: <script src="//cdn.optimizely.com/js/123456789.js"></script>
  2. Drop down the 'Advanced Settings' list and set "Wait Flag = No".

    wait flag NO.png

  3. Proceed to Load Rules and check the default "Load on All Pages" rule.

    Async-Load Rules.png

  4. Proceed to Data Mappings and map the destinations you wish to send data to. Click here to learn how to map a data source to a Tag destination.
    NOTE: If you plan to track E-Commerce data with the Async Tag, we recommend that you use the E-Commerce Extension to automatically map that data.

    async mapping.png

 

Destination Name Destination Variable Description E-Commerce Extension Mapping (RECOMMENDED)
Project ID projectId Project identifier provided by Optimizely N/A
Order ID orderId Unique identifier assigned to the order "_corder" variable maps to this destination
Revenue in Cents revenue Subtotal amount (in cents) of the order "_csubtotal" variable maps to this destination
Event Name eventName Name/Type of conversion event
Default event is "purchase"		 N/A

STEP 3: Save/Publish your profile.

IMPORTANT: For the Async Tag to fire as soon as possible, make sure the utag.js file is coded as high in the page as possible. Tealium recommends placing the utag.js at the top of the HTML <body> tag. Tealium will load the Optimizely JavaScript file and take care of the rest.

 

Method 2: Run Optimizely as blocking Tag

Optimizely typically prefers to be synchronous on the page so it can run "sooner" and determine the test before other stuff (like your Analytics tool) runs. However, the only way to have Optimizely run soon enough and still be asynchronous is by serving its .js library from an alternate location. In doing so, the Optimizely Async Tag becomes a blocking Tag and any subsequent asynchronous scripts (e.g. utag.10.js) will not load until the blocking Tag is complete.

NOTE: Make sure to upgrade the utag.js version if you are not already using the latest (see utag.js Release Notes).

  1. Repeat step #2 above to add and set up the Optimizely Async Tag.
  2. Drop down the Advanced Settings and enter the location of the .js library in the Custom Script Source field.
  3. Save/Publish your profile.

custom script source.png

 

That's it! A few simple differences, but this will dramatically change the way the Optimizely file is loaded and how other tags are loaded after Optimizely.

Version history
Last update:
‎07-08-2016 02:58 PM
Updated by:

Copyright All Rights Reserved © 2008-2023

Public