Using amp-analytics tag with adobeanalytics_nativeConfig template

The adobeanalytics_nativeConfig tag is easier to implement, as it will use the same tagging methodology you use on your normal web pages. To accomplish this, add the following to your amp-analytics tag:

This approach sends data to a utility web page via special query string parameters added to the iframeMessage request parameter. In this case, notice that we have added the ampdocUrl AMP variable, and the documentReferrer to the query string parameters pageURL, and refer respectively to the iframeMessage request above. These extra query string parameters can be named whatever you like, as long as your stats.html page (shown below) is configured to collect the appropriate data from them.

The adobeanalytics_nativeConfig template also adds query string parameters based on the variables listed in the extraUrlParams section of the amp-analytics tag. In this case, you can see we have specified the pageName and v1 parameters, which will be used by our stats.html page.

Be aware that you can only use a single amp-analytics template at a time and can not use the “adobeanalytics” template as well as the adobeanalytics_nativeConfig template on the same AMP. If you attempt to do so, you might see an error in the browser console, and you will erroneously inflate your visitor count.

As shown above, you can use or link to your existing VisitorAPI.js and AppMeasurement.js (as in our example), or whatever your existing implementation uses, then add the correct configuration parameters. To capture the correct values into the correct variables, you can use the provided s.Util.getQueryParam function to grab the value(s) that you passed in from the iframeMessage URL and set the appropriate variables, just as you would on a typical page. If you use tag management software like Adobe’s Dynamic Tag Manager, the query string parameters should be straightforward to capture. In this case, s.pageName is set to the value we passed in the query string parameter pageName. Here, the page name would be set to Adobe Analytics Example 2.

Important: Due to restrictions on iframes in the AMP framework, your stats.html page must be hosted on a separate subdomain from the domain the AMP itself is hosted on. The AMP framework does not allow for iframes from the same subdomain that the AMP page itself exists on. For example, if your AMP is hosted on amp.codeingrepo.com, be sure to host your stats.html page on a separate subdomain such as ampmetrics.codingrepo.com or something similar. Because the utility page is hosted on your original site, no additional work is needed to support your existing privacy policy across all AMPs. This means that if an end user opts out of tracking on your primary site, they are also opted out of tracking on all your AMPs, with no additional steps required. Using this utility page also means that AMP can support Adobe’s Marketing Cloud ID service so that you can integrate the measurement captured on your AMPs with the rest of the Marketing Cloud (for targeted advertising using Adobe Audience Manager for example).

To reiterate, if your organization is not yet using the Marketing Cloud ID service (or has tag management software like Adobe’s Dynamic Tag Manager), you can tag the stats.html page however you want. Use your existing implementation as a reference point. The only difference from your standard implementation is that you will get the applicable data points from the amp-analytics iframeMessage URL (or document.URL from within the stats.html page ) for each of the variables you want to set. Also, if you want to use any of the AMP specific variables (as mentioned above) like the AMP referrer or AMP page URL, please include them in the iframeMessage object as shown in our example above.

As flexible as this solution is, there are caveats. Due to inherent restrictions in the amp-analytics iframeMessage, it can only be loaded on a page load once. This means you will not be able to do link tracking or video tracking with the adobeanalytics_nativeConfig template. Moreover, some DOM values that are typically captured automatically by our AppMeasurement code, such as referrer (which impacts the Search Engine Keyword reports, Referrer, and Referrer Type reports, or may include a marketing campaign tracking code) will have to be passed manually to the iframeMessage using whatever AMP variables are available. For this reason, Adobe recommends setting a custom variable with the value AMP if you put AMP data into an existing report suite, so that you can segment out AMP traffic when viewing the aforementioned reports. That said, standard technology reports, such as browser, device, screen size or resolution, should work automatically.

Finally, because the iframe loads as a separate page and fully executes the JavaScript on that page, the AMP is not as lightweight as the AMP standard intended. To be clear, this does not affect page load time (the iframe loads after the page is done loading), but the CPU and network will be doing slightly more than they otherwise would, which might impact scrolling smoothness. In practice, we have not seen a large impact, but we are working with Google to minimize the user experience impact of this approach.

Leave a Reply

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

CAPTCHA