Multimedia tracking in AMP iframes

Use this guide to set up multimedia tracking inside <amp-iframe> on AMP pages.

You need to make changes in two places: the AMP host page that contains the amp-iframe, and the page loaded as the iframe’s content.

Host AMP page

1. Add amp-bind

Add amp-bind to your AMP scripts in the <head>. This allows tracking data to be injected into the iframe.

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

2. Wrap amp-iframe with amp-script

Wrap each amp-iframe you want to track inside an amp-script. Add an amp-state element as a sibling of the iframe inside the script, and bind the mrfCtx variable to the state’s result.

<amp-script
  src="https://sdk.mrf.io/statics/compass-amp-iframe-sdk.js"
  layout="fixed-height"
  height="${amp-iframe's height}">

  <amp-state
    id="mrfTrackerCtx"
    src="https://marfeeljukebox.mrf.io/amp-context?u=CLIENT_ID(compass_uid)&c=CANONICAL_URL&url=AMPDOC_URL&r=EXTERNAL_REFERRER&dr=DOCUMENT_REFERRER&t=NAV_TIMING(navigationStart)&pvid=PAGE_VIEW_ID_64&n=TIMESTAMP&cc=CONSENT_STATE">
  </amp-state>

  <amp-iframe
    ...
    sandbox="allow-scripts allow-same-origin"
    [src]="'${amp-iframe's src}#amp=1&mrfCtx=' + mrfTrackerCtx.token">
    ...
  </amp-iframe>
</amp-script>

Tip:
To ensure the integration works correctly:

Match the height of the amp-script to the height of the iframe.
Keep all existing attributes and content in the iframe.
Double-check the single quotes in the [src] binding.

3. Add amp-script security hash

AMP requires a content security hash to allow script execution. Add the following meta tag inside <head>:

<meta name="amp-script-src" content="sha384-_skwlrfMP5exU8hKWE7Xy2Jv1uurrTFeIyV07VV9DgDax0c9UIQIySkjHLSji6JV">

Iframe’s content page

The iframe’s content page must have the Compass tracker installed. With the tracker in place, multimedia tracking is handled automatically through the no-code multimedia experience. No additional configuration required.

For the full list of supported providers, see the multimedia tracking documentation.

Important:

The host page and the iframe must be on different domains.

Testing

Append #development=1 to the host page URL to enable AMP validation, then check the console for errors.

Missing amp-bind dependency:

The tag 'amp-state' requires including the 'amp-bind' extension JavaScript

Missing or incorrect security hash:

amp-script Script hash not found or incorrect for amp-script[src="https://sdk.mrf.io/statics/compass-amp-iframe-sdk.js"].js

Check the network tab to confirm that multimedia.php events fire on page load and when users interact with multimedia elements.