Integrating Permutive with your Accelerated Mobile Pages is simple and takes just a few minutes of development time. To get set-up, you just need to setup your AMP Analytics JSON configuration correctly.

With Permutive's pixel support, you can collect any and all events from your Accelerated Mobile Pages. Below is simple example demonstrating how you can collect Pageview  and PageviewEngagement  events in Permutive.

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://api2.permutive.com/v1.1/px/track?k=${key}&i=${clientId(permutive-id)}&e=ArticlePageview&p=%7B%22client%22%3A%7B%22url%22%3A%22AMPDOC_URL%22%2C%22domain%22%3A%22AMPDOC_HOSTNAME%22%2C%22referrer%22%3A%22DOCUMENT_REFERRER%22%2C%22title%22%3A%20%22TITLE%22%2C%22type%22%3A%22amp%22%7D%2C%22visit_id%22%3A%22PAGE_VIEW_ID%22%7D",
        "pageviewEngagement": "https://api2.permutive.com/v1.1/px/track?k=${key}&i=${clientId(permutive-id)}&e=PageviewEngagement&p=%7B%22client%22%3A%7B%22url%22%3A%22AMPDOC_URL%22%2C%22domain%22%3A%22AMPDOC_HOSTNAME%22%2C%22referrer%22%3A%22DOCUMENT_REFERRER%22%2C%22title%22%3A%20%22TITLE%22%2C%22type%22%3A%22amp%22%7D%2C%22visit_id%22%3A%221364%22%2C%22engaged_time%22%3A5%7D"
      },
      "vars": {
        "key": "43fcbb40-1ebf-4728-8525-7412d2191afc",
        "categories": ["hello", "world"]
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
"triggers": {
        "pageTimer": {
          "on": "timer",
          "timerSpec": {
            "interval": 5
          },
          "request": "pageviewEngagement"
        }
      },

      "transport": {
        "beacon": false,
        "xhrpost": false,
        "image": true
      }
    }
    </script>
</amp-analytics>

Generating pixels in Permutive is easy, there are just four simple parameters needed:

  • k : This is your Permutive public key. It's good practise to generate a new public key for Accelerated Mobile Pages, which you can do from the dashboard.
  • i : This is a method to tie the event back to a specific Permutive ID. In the case of AMP, we want this to be the client ID (i.e. ${clientId} ).
  • e : This is the event's name, e.g. Pageview .
  • p : This is URL encoded string of the event's properties. For example an event with just two properties, title and url  would be "%7B%22title%22%3A%22Hello%20AMP%22%2C%22url%22%3A%22http%3A%2F%2Fdemo.com%2Famp.html%22%7D"

When generating properties, a really simple tip for generating the property strings is to use your JavaScript console with a mocked up properties JSON object.

encodeURIComponent(JSON.stringify({
  title: "Hello AMP",
  url: "http://demo.com/amp.html"
}));

All you need to do is replace Hello Amp  and http://demo.com/amp.html with the correct AMP variable replacements (in this case ${title} and ${ampdocUrl} .

Did this answer your question?