Overview

Google's AMP (Accelerated Mobile Project) is a web component framework that you can use to create websites, stories, emails, and ads. They are designed to load fast on the mobile web. AMP does this by disallowing third-party JavaScript.

FBIA (Facebook Instance Articles) are similar, but work solely within Facebook's ecosystem.

Heap does not currently support analytics through the AMP or FBIA frameworks, as our autocapture and APIs require our installation snippet for full functionality.

However, you can track pageviews by adding an iframe to your page. The instructions below demonstrate how to load Heap in an iframe. In Heap, you will define your events using the Referrer of the event as the path of the AMP page you want to track.

AMP Pages

AMP uses a custom iframe implementation and has rules related to the src and position on the page, in addition to other constraints. For help debugging your Heap AMP installation, read their documentation on amp iframes.

First, add this required script anywhere on the page.

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Next is the iframe that will serve your Heap snippet. This can also be added anywhere on the page.

The style attribute enforces a key rule of amp-iframes, which is that the iframe must be either 600 px away from the top, or not within the first 75% of the viewport when scrolled to the top (whichever is smaller.)

Note that depending on where you host your src you may need to remove the allow-same-origin call. For accurate user tracking across normal and AMP pages, we strongly recommend hosting your iframe on a subdomain of your primary domain.

We also include an element-level referrerpolicy call to ensure that your existing Referrer-Policy as set in your .htaccess file does not prevent the expected behavior.

<amp-iframe width="1" height="1" style="top: 600px"
    sandbox="allow-scripts allow-same-origin"
    frameborder="0"
    src="iframe.mydomain.com/myPagewithHeapInstalled">
    referrerpoicy="no-referrer-when-downgrade"
</amp-iframe>

Add this iframe to your AMP page and visit it. Check the console for any errors: most common are errors relating to the position on the page, and to the src, which you can fix by reviewing AMPs documentation.

In Heap, you can define your event as follows:

🚧

Using this event in reports

Because Heap does not currently expose the full referrer in analysis tools, you will need to define an event for each AMP page you wish to track.

FBIA Pages

FBIA uses standard iframe implementations.

First, add this iframe to your FBIA page. We include an element-level referrerpolicy to ensure that your existing Referrer-Policy as set in your .htaccess file does not prevent the expected behavior.

<iframe width="1" height="1
    frameborder="0"
    src="iframe.mydomain.com/myPagewithHeapInstalled">
    referrerpoicy="no-referrer-when-downgrade"
</iframe>

In Heap, you can define your event as follows:

🚧

Using this event in reports

Because Heap does not currently expose the full referrer in analysis tools, you will need to define an event for each FBIA page you wish to track.