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.
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.
Best answer by channing
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 versionvar version = "1.9.1"
window.experimentReady = new Promise(function(resolve) {functionloadAsync(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')[0].appendChild(script);
}
functionexperimentSDK() {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>
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 keyvar 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 variantvar 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.
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 versionvar version = "1.9.1"
window.experimentReady = new Promise(function(resolve) {functionloadAsync(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')[0].appendChild(script);
}
functionexperimentSDK() {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>
If you don't have an Amplitude account, you can create an Amplitude Starter account for free and enjoy direct access to the Community via SSO. Create an Amplitude account. You can also create a Guest account below!
If you're a current customer, select the domain you use to sign in with Amplitude.
If you don't have an Amplitude account, you can create an Amplitude Starter account for free and enjoy direct access to the Community via SSO. Create an Amplitude account. Want to sign up as a guest? Create a Community account.
If you're a current customer, select the domain you use to sign in with Amplitude.
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.
