Google Tag Manager (GTM) manages tags that are used for tracking and analytics on websites. GTM can be leveraged as a way to integrate the Split Browser SDK in a site and reference it from other custom tags.
Automatic tracking for events defined on GTM and gtag.js
When you use Google Tag Manager for tracking and analytics, which is powered by Google Universal Analytics (GA) library, you can configure the Split SDK's Google Analytics (GA) integration to automatically track these events (or a desired subset) into Split to feed our stats engine.
To integrate Split's Google Analytics to Split integration, configure the integration when you instantiate the SDK and a GA plugin, which is required for your selected trackers. This allows you to pick up events that are generated and processed by GA (with multiple customization options) and send the events to Split.
When you use Google Tag Manager or Global Site Tag (gtag.js) to set up your Universal Analytics configuration, trackers are created with dynamic names.
To do this, you need to require the splitTracker
plugin for the desired trackers. However, because their names are unknown when writing the code, doing it manually by placing the command ga('<trackerName>.require', 'splitTracker')
won't work. Instead, include the autorequire
script created for this integration after your GTM
/gtag.js
tag, which integrates with the ga
command queue and handles the corresponding require
commands for the Split plugin automatically.
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>
<!-- You can include it from our CDN -->
<script src="//cdn.split.io/sdk/ga-to-split-autorequire.js"></script>
<!-- Alternatively, you can copy the content of that file inside a script tag and it would be equivalent -->
<!-- <script>
// Paste here the content of https://cdn.split.io/sdk/ga-to-split-autorequire.js
</script> -->
<!-- Global site tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-1');
</script>
<!-- You can include it from our CDN -->
<script src="//cdn.split.io/sdk/ga-to-split-autorequire.js"></script>
<!-- Alternatively, you can copy the content of that file inside a script tag and it would be equivalent -->
<!-- <script>
// Paste here the content of https://cdn.split.io/sdk/ga-to-split-autorequire.js
</script> -->
Injecting the Split SDKs through a GTM tag
You can leverage GTM as a way to integrate the Split Browser SDK in a site and reference it from other custom tags. By using the Split JavaScript SDK (the one used on this example) or the Browser SDK, Split can be integrated with Google Tag Manager with minimal effort. This methodology works with both UA and GA4.
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, 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 sets 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
After you utilize the data layer, we define a new variable within Google Tag Manager called Split client set to the data layer variable split_client
. This enables us to reference the Split client within our tags in Google Tag Manager.
Referencing the Split client in tags within Google Tag Manager
Once you define the new variable, we create a new custom HTML tag which includes our JavaScript code that references the Split client. For this example, we 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 access our Split client within the tag.
<script>
var client = {{Split Client}};
// ...
</script>
As we add other tags to Google Tag Manager, we always want to repeat this pattern of first setting the local variable client
to the Google Tag Manager variable {{Split Client}}
.
Advanced topics
This section describes advanced use cases and features.
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 don't 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>
You can now add your variables and tags as suggested in the previous sections.
Caution
Be aware that this tag must fire before any other tags which reference the Split client or you can run into race conditions where the Split client variable is undefined. To learn about how to address this, refer to Google's documentation on Tag Sequencing in Google Tag Manager.
Comments
0 comments
Please sign in to leave a comment.