Contents x
      Implementation with amp-iframe
      • 1 Minute to read
      • Print
      • Dark
        Light
      Contents

      Implementation with amp-iframe

      • 1 Minute to read
      • Print
      • Dark
        Light
      Article summary

      AMP allows only one iframe per page, which is used for analysis and tracking purposes. To conserve resources, these iframes are removed from the DOM 5 seconds after loading, which should be enough time to perform the required operations.

      You can find further information about "amp-iframe" at this link: amp-iframe.

      The AMP framework does not allow iframes from the same subdomain where the AMP page itself exists. Due to this restriction, your iframe page must be hosted on a separate subdomain.

      Example

      For example, if your AMP framework is hosted on amp.example.com, make sure you host your iframe page on a separate subdomain such as ampmetrics.example.com or similar.

      1. Add the following code to your AMP pages.

        <amp-iframe width=1 height=1
	src="###URL_OF_YOUR_AMP_PAGE###"
    sandbox="allow-scripts allow-same-origin"
    layout="fixed"
    frameborder="0">
</amp-iframe>

      2. Adjust the "src" attribute under "amp-iframe":

        Parameter

        Description

        src

        Enter the URL of your AMP page, e.g. "pixel.html".

      Example: Content of the "pixel.html" page

      <html>
    <head>
        <title>Tracking Page</title>
        <script type="text/javascript" src="webtrekk_v4.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            var locationHref = document.location.href;
            var wt = new webtrekkV3();
             
            wt.contentId = wt.urlParam(locationHref, "contentId", ""); // en.AMP.Example-Page
            wt.contentGroup = {
                1: wt.urlParam(locationHref, "cg1", ""), // de
                2: wt.urlParam(locationHref, "cg2", "")  // AMP
            };
             
            // ...
            // ...
            // ...
             
            wt.sendinfo();
        </script>
    </body>
</html>

      Was this article helpful?
      What's Next