Google Tag Manager

Google Tag Manager is a popular tool for managing tags used for tracking and analytics on websites. By using the Split JavaScript SDK, Split can be integrated with Google Tag Manager with minimal effort.

Sending Split to Google Tag Manager's data layer

The best approach to obtaining a reference to the Split client within Google Tag Manager is to utilize the data layer, as this keeps us from cluttering the global variable namespace. To achieve this, we will add a line to the Split SDK initialization code on the HTML page to push the Split client to the data layer. The code below will set the data layer variable split_client to the Split client instance.

<script>
  // ...
  var factory = splitio({
    // Split SDK initialization config goes here
  });
  var client = factory.client();
  // ...

  // Push the Split client to the data layer
  dataLayer.push({ split_client: client });
</script>

Assigning the Split Client to a variable within Google Tag Manager

Next, we will define a new Variable within Google Tag Manager named Split Client set to the data layer variable split_client. This will enable us to reference the Split client within our tags in Google Tag Manager.

Referencing the Split client in Tags within Google Tag Manager

Finally, we will create a new Custom HTML tag which includes our JavaScript code that references the Split Client. For this example, we will perform a simple Track call which logs an event to Split. We are setting the local variable client to the Google Tag Manager Variable {{Split Client}} we defined in the previous step so we can easily access our Split client within the tag.

<script>
  var client = {{Split Client}};

  // ...
</script>

As we add other tags to Google Tag Manager, we will always want to repeat this pattern of first setting the local variable client to the Google Tag Manager Variable {{Split Client}}.

Advanced Topics

Initializing the Split SDK within Google Tag Manager

For most users, initializing the Split SDK on the HTML page and then pushing the client to the data layer is the best approach as it allows the Split client to be accessible within both environments and avoids race conditions. For installations that do not need to access the Split client within the code on the HTML page or do not mind how Google Tag Manager loads in scripts asynchronously, another viable option is to initialize the Split client within Google Tag Manager.

You can initialize the Split SDK by inserting the following code into a Custom HTML tag which fires on All Pages.

<script>
  // ...
  var factory = splitio({
    // Split SDK initialization config goes here
  });
  var client = factory.client();
  // ...

  // Push the Split client to the data layer
  dataLayer.push({ split_client: client });
</script>

Then, you can add your variables and tags as suggested in the previous sections.