Question

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

  • 22 January 2024
  • 2 replies
  • 112 views
M

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.

2 replies

Rune Andersen
Rank
Badge +1

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.

M

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. 

 

Reply


Terms & ConditionsCookie settings