I've implemented a small experiment on an AMP site following this tutorial: https://developers.google.com/optimize/devguides/amp-experiments
Here's what I've done:
1. amp-analytics and amp-experiment components
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
2. Code for the experiment
<amp-experiment>
<script type="application/json">
{
"AMP_Product_Page": {
"sticky": true,
"variants": {
"Original": 50,
"Variant_1": 50
}
}
}
</script>
</amp-experiment>
3. Code for analytics
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-105350-7"
},
"requests": {
"experiment": "${pageview}&xid=${xid}&xvar=${xvar}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "experiment",
"vars": {
"xid": "fB2hAs9HS2WgWqe332c6Ow",
"xvar": "VARIANT(AMP_Product_Page)"
}
}
}
}
</script>
</amp-analytics>
4. Created an experiment in Google Optimize
I created an experiment in Google Optimize and used the ID in the code above. I can also see the experiment in Google Analytics, it has 0 sessions, though.
I've also added some basic CSS rules and they are working fine.
The code above is live and I can see the experiment running on the site, also the <body> tag has an attribute amp-x-amp_product_page="Variant_1".
Google Analytics requests
I have a Google Analytics integration deployed using GTM AMP container and it's working fine.
Now, when I look at the requests made by Google Analytics, here's what I see:
- Pageview request (OK)
- Second pageview request with experiment data (status 302)
That second request seems not to make it to GA.
I tried sending experiment data with an event, but it seems like xid and xvar are not allowed variables for an event in amp-analytics.
Variants should be numbered instead of named in . So in your case they should be "0" and "1" instead of "Original" and "Variant_1".