Skip to main content

Does anyone have any experience using Amplitude Experiment and Google Tag Manager together?

 

Our goal is to have Amplitude Experiment set-up like a typical client side tool since it would be difficult to integrate our servers-side code due to some vendor issues. (long-term addressable, but not in the near term)

 

So the basic thought is

1> Fire Amplitude Analytics in GTM with the  “Amplitude Analytics Browser SDK” GTM community template.

 

2> Fire a script tag to initialize the Expierment.

 <script src=“https://unpkg.com/@amplitude/experiment-js-client@1.9.0/dist/experiment.umd.js”></script>

 

3> Create a Google Tag Manager Variable which is a custom javascript variable and captures which the experiments and variations the visitor is in.

 

4> Use those values in the GTM variables to execute or not, the code in our experiments.

 

This is not pretty.  But I haven’t come across much content on Amplitude Experiment, since it is a newer product and not for the lower tier plans.

 

any feedback would be appreciated.

Hi @Michael McNicholas 
I'm trying the exact same.
We use the Amplitude Analytics Browser SDK” GTM community template, and now want to also use Experiment via a Custom HTML. I have tried with this code, that are loaded after Amplitude Browser SDK. 
(Got some help from ChatGPT...)

<script src="https://unpkg.com/@amplitude/experiment-js-client@1.9.0/dist/experiment.umd.js"></script>
<script>
// Initialize the experiment client with your deployment key
var experiment = Experiment.Experiment.initializeWithAmplitudeAnalytics('YOUR_DEPLOYMENT_KEY');

// Start the SDK and wait for it to be ready
experiment.start().then(function() {
// Once the SDK is ready, check the feature flag variant
var variant = experiment.variant('YOUR_FLAG_KEY');
if (variant.value === 'on') {
// Code to execute if the flag is on
} else {
// Code to execute if the flag is off
}
});
</script>

I have now tried this. The script is loaded but i get a 401, and the consol says “Missing Api-Key in Authorization header”. 
I have double checked the deployment API-key, and the flag_key.

Would be interesting to also hear from others what the best practice is for GTM implementation.


What ended up working for me… is to chain the GTM calls - i.e. “Fire a tag after this one fires” 

So the Amplitude Analytics Browser SD fires in one tag,

then the Experiment ones fires in a second tag (calling https://unpkg.com/@amplitude/experiment-js-client@1.9.0/dist/experiment.umd.js

 

Then I initalize the initialize the experiment object (since I know the previous tag has fired) 

experiment = Experiment.Experiment.initializeWithAmplitudeAnalytics('YOUR_DEPLOYMENT_KEY');

in a third tag

 

then I run the code for a specific experiment, get variations, etc in the fourth tag. And I am sure each part of the experiment code only runs when the part before it has been called. 

 

…Otherwise, there might be a race condition where the second and later lines in the tag are running before the first part is complete.  Hope this helps. 

 


Here’s a custom HTML tag that works well. Use the “Initialization - All Pages” trigger for it. Then you can use the code in the comment at the top in other custom HTML tags to retrieve variants.

<script>
/**
* Amplitude Experiment Google Tag Manager: Custom HTML Script
* -----------------------------------------------------------
*
* This script loads and starts the Experiment SDK, then sets window variables
* after the script has loaded:
*
* - `window.experiment`: The Experiment SDK instance. May be undefined.
*
* - `window.experimentReady`: A promise which resolves with the experiment
* SDK instance when the Experiment SDK has completed starting and is
* ready to be used.
*
* To use the Experiment SDK outside the tag, wait for the ready promise to
* resolve and use the SDK directly to access variants for the user:
*
* ```
* window.experimentReady.then(function (experiment) {
* var variant = experiment.variant("my-experiment");
* if (variant.value === "treatment") {
* // Treatment
* } else {
* // Control
* }
* })
* ```
*
* Note: this script assumes you have are using the Amplitude Analytics SDK
* to send events.
*/

// TODO: Set your Amplitude Experiment deployment key.
var deploymentKey = "DEPLOYMENT_KEY_HERE";

// TODO (optional): Configure the Experiment SDK.
var config = {};

// SDK version
var version = "1.9.1"

window.experimentReady = new Promise(function(resolve) {
function loadAsync(src, callback) {
var script = document.createElement('script');
script.src = src;
if (script.readyState) { // IE, incl. IE9
script.onreadystatechange = function() {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function() { // Other browsers
callback();
};
}
document.getElementsByTagName('head')h0].appendChild(script);
}

function experimentSDK() {
return "https://unpkg.com/@amplitude/experiment-js-client@" + version + "/dist/experiment.umd.js"
};

loadAsync(experimentSDK(), function () {
window.experiment = Experiment.Experiment.initializeWithAmplitudeAnalytics(deploymentKey, config);
window.experiment.start().then(function () {
window.experiment.variant("FLAG_KEY_HERE"); // If you have an immediate variant to retrieve
resolve(window.experiment);
});
});
});
</script>

 


Reply