According to the official AMP website, AMP is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you. One of the reasons why these pages are "compelling, smooth, and load near instantaneously" is because they don't run any JavaScript.
Digital Analytics tags as you already know, rely almost entirely on JavaScript and not having it enabled introduces a lot of implementation challenges. This post covers two different methodologies by which we set up Adobe Analytics page load and link tracking using AMP. I'll also share links to some sample pages with you for you to set them up on your end. Let's dive right in!
AMP Pages Tagging via Launch by Adobe
Before we get started, it's important to call out that this method supports the Visitor ID Service, Adobe Analytics page view tracking and Adobe Audience Manager. Adobe Target and link tracking are not supported with this approach.
Here's a link to the public facing technical guide I created that walks through how to do Adobe Analytics page load tracking on AMP pages. I'm going to reference certain components from it in this section.
Validate AMP Syntax
The first step is to make sure your site is compatible with AMP. To do so, paste your code into the AMP validator code editor. Below is a screenshot from the validator site showing that my test page passed (click on the image to enlarge) the syntactical check on the validator site.
Add References to Libraries
We need to reference a couple of JavaScript libraries which are compatible with the AMP platform. These are pasted below and highlighted in the screenshot. Make sure to reference these correctly as shown in the screenshot.
- https://cdn.ampproject.org/v0/amp-analytics-0.1.js (Mandatory file for any kind of analytics tracking in AMP be it Adobe Analytics or Google Analytics.)
- https://cdn.ampproject.org/v0/amp-iframe-0.1.js (Required if you want to setup Adobe Analytics using any Tag Management solution such as Launch by Adobe)
Leverage the "adobeanalytics_nativeConfig" Template
This is the most important step in the overall configuration. This method makes use of the "adobeanalytics_nativeConfig" template to host the Launch by Adobe library in an iframe as well as outputs meta data required to pass data over to the Analytics tag.
There are two main components of the code as shown in the sections highlighted below.
This is where the iframe (Red) is added and meta data (Blue) to pass along
The "iframeMessage" section (Red) contains the link to the iframe URL along with additional data points such as page URL, referring URL etc along with the iframe domain which in this case is my blog. The next two screenshots see how "iframeMessage" is linked to a separate "iframe" page on my blog.
The "extraUrlParams" section (Blue) contains any meta data you want to pass along to the Tag Management tool and eventually to your Analytics solution. We can think of this as a virtual data layer.
http://rkapoor.blogspot.com/2018/05/launch.html is where the Launch library is hosted
HTML of the iframe page reference added here
Setup Adobe Analytics Extension in Launch
Install the Adobe Analytics extension in Launch.
Create a data element to override the page URL to capture the parent page URL instead of the iframe URL.
Validate Adobe Analytics on the AMP Page
Here's a link to a page I created to showcase the capability of this hosted on a server. Also, here's a link to a couple of simple AMP pages which when hosted on a server, will fire the Adobe Analytics tag as shown below.
Caveats with this Approach
- This method doesn't work on Adobe Target due to the iframe
- Link tracking doesn't work with the "adobeanalytics_nativeConfig" template
- We've seen issues with Safari where the iFrame is unable to set a cookie and the Visitor object thereby affecting the Visitor/Visit count
This section is based off the instructions provided in the official Adobe documentation. I've added a simple addition to show how to fire off events as a client asked about it which are not listed on this page. Let's go through the setup.
Link Tracking Code Setup
The screenshot below shows the code that we need to use to setup basic image pixel based page load and link tracking on AMP pages. At a high level, there are three main sections in the code.
- The "requests" section (Red) contains a definition of various Adobe Analytics variables that are referenced for the page view and link tracking image requests.
- The "vars" section (Blue) contains variables that are mandatory to send the image request such as tracking server and report suite.
- The "click" section (Orange) is where we define all variables needed to be sent as part of the link tracking call.
Validate Link Tracking
Below is a screenshot that shows the Adobe Analytics link tracking call.
Caveats with this Approach
Here's a link to a page hosted on a server that has a click tracking example for AMP. There are lot of issues with this method which are taken from the test page hosted on Adobe's Github.
- Visitor/visit counts will be hyper inflated.
- Visitor ID Service is not supported.
- No way to tie a visitor back to the originating site (no measuring new vs repeat visitors or user acquisition).
Given that the link tracking method on AMP causes visitor duplication, my recommendation is to go with the first method which leverages an iframe. How are you tracking your AMP pages?
No comments:
Post a Comment