Chartbeat Code for AMP

Instructions to add Chartbeat code to your AMP pages.

Intro to AMP

Google’s Accelerated Mobile Pages (AMP) project aims to speed up load times on mobile web pages, industry-wide, using a special, lightweight form of HTML. As a part of this AMP project, Google has updated its search engine to point to an AMP page—if it exists—from mobile search results.

Because many mobile users exit publisher websites before a page finishes loading due to slow load times, building mobile pages with AMP can improve user experience, retain readership, and built loyalty.

Once a Chartbeat Dashboard is integrated with AMP tracking, a new field will appear under the Site filter of the Distribution module in the left-hand side of the Real-Time dashboard, labeled 'AMP'. This will display the percentage of concurrents that are engaging with content in your AMP site experience. By selecting this new filter in Real-Time, the dashboard will display only the concurrents that are engaging with your AMP content, as well as all the Chartbeat metrics specific to this audience.

Validate your existing AMP HTML

Make sure that your site's AMP pages are properly configured according to AMP HTML specification. Your AMP pages should also be validated using the AMP Project's validation workflow.

You can also add this same code to your AMP Web Stories pages.

Steps to integrate

Step 1: After validating your AMP markup, you’ll need to add the "amp-analytics.js" extension within the <head> of the AMP page markup code if it's not already in place. This will enable analytics for your AMP pages.

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

Step 2: Add this code to the <body> of your AMP webpage, replacing the placeholder values assigned to the uid, domain, sections, and authors variables below with your site-specific Chartbeat data, dynamically populated for each unique AMP page by your CMS. Learn more about available configuration variables for your Chartbeat AMP tracking and how to populate them in the next article of this guide.

<amp-analytics type="chartbeat">
    <script type="application/json">
        {
            "vars": {
                "uid": "12345",
                "domain": "yoursite.com",
                "sections": "section 1,section 2",
                "authors": "John Doe"
            }
        }
    </script>
</amp-analytics>

The domain variable should never include "http", "https" or "www".

As all third-party JavaScript sources behave differently on AMP pages, if you are using custom metadata fields to populate the sections, authors, and content type variables in your existing Chartbeat code, you'll need to retrieve these outside of the AMP markup.

Your UID for your Chartbeat account and the site id assigned to the domain variable can be set manually for each of your sites as these values are static and will not change from article to article.

Tip: Be sure to double check your work and ensure there is no trailing comma at the end of the final key-value pair, as demonstrated in the code snippet above in line 8.

Complete example

This example demonstrates a complete AMP page with Chartbeat tracking enabled.

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chartbeat for AMP demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="mysite.com/article-xyz.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure Chartbeat analytics -->
    <amp-analytics type="chartbeat">
    <script type="application/json">
        {
            "vars": {
                "uid": "12345",
                "domain": "yoursite.com",
                "sections": "section 1,section 2",
                "authors": "John Doe"
            }
        }
    </script>
    </amp-analytics>

  </body>
</html>

Next steps

Following the above steps will suffice for a basic AMP tracking integration, but we strongly encourage reviewing each of the articles within this guide prior to implementing our code so you can fine-tune your tracking settings for AMP to match the tracking of your standard website.

The next article in this series explains how to set the configuration variables included in the snippet above (lines 5–8), as well as other optional variables that may be appropriate for your integration.

PreviousGoogle AMP NextAMP Configuration Variables

Last updated 1 year ago