How to Send amp-experiment Data to Amplitude

Learn how to send <amp-experiment> variants data to Amplitude for experiment results analysis.

When using AMP, product analytics work becomes more difficult. One of the difficulties is performing experiments and analyze them with Google Optimize.

On the other hand, AMP has a native <amp-experiment> component. Using it, you can easily set experiments. For example:

<amp-experiment> <script type="application/json"> { "recommendedLinksExperiment": { "variants": { "shorterList": 25.0, "longerList": 25.0, "control": 50.0 } } } </script> </amp-experiment>
Code language: HTML, XML (xml)

This code defines an experiment named recommendedLinksExperiment, with 3 variants. The numbers set how many users in percent will be served each variant. The code adds a <body> attribute with the experiment and variant data, which you can target with CSS. For example:

body[amp-x-recommendedLinksExperiment=”control”] .selector { property: value; }
Code language: CSS (css)

Instead of sending the experiment data to Google Optimize for analysis, you can send it to Amplitude for more flexibility. You do this using the <amp-analytics> component and the AMP VARIANTS Platform Variable. You can send the data both as a user and event property.

<amp-analytics type="amplitude"> <script type="application/json">{ "vars": { "apiKey": "" }, "triggers": { "pageView": { "on": "visible", "request": "event", "extraUrlParams": { "event": { "event_type": "Page View", "event_properties": { "Page Title": "${title}", "Experiment Variants": "VARIANTS" }, "user_properties": { "Experiment Variants": "VARIANTS" } } } } } } </script> </amp-analytics>
Code language: HTML, XML (xml)

Conclusion

While setting up experiments on AMP pages with Google Optimize is cumbersome and limiting, you can easily send experiments data to Amplitude instead, for a more flexible and detailed analysis.

Leave a comment

Your email address will not be published. Required fields are marked *