LogoLogo
Help CenterStatusContact
  • Chartbeat Documentation
  • Implement Tracking
    • Standard Websites
      • Adding chartbeat.js to Your Site
      • Customize Tracking Settings
      • Tracking Virtual Page Change
      • User Subscriber Status
      • Alternative Site Integrations
      • Integration QA Steps: Website
      • Additional Page Metadata
    • Google AMP
      • Chartbeat Code for AMP
      • AMP Configuration Variables
      • Alternative AMP Integration
      • Integration QA Steps: AMP
    • Mobile App SDKs
      • Intro to Mobile App Tracking
      • Android SDK
      • iOS SDK
      • Integration QA Steps: Mobile Apps
  • Feature Integrations
    • Headline and Image Testing
      • Adding chartbeat_mab.js to Your Site
      • Image Compatibility
      • Flicker & Flicker Control
      • mab.js Specifications
      • Integration QA Steps: Headline and Image Testing
    • Video Engagement
      • Adding chartbeat_video.js to Your Site
      • Supported OVP Integrations
      • Custom Player Integration SDK
      • Configure Video Tracking Settings
      • Integration QA: Video Tracking
    • Conversion
      • Adding subscriptions.js to Your Site
      • Conversion Events
      • Integration QA Steps: Conversion
      • Supported Conversion Flows
  • API Docs
    • Real-Time API
      • Getting Started with our Real-Time API
      • Traffic Data
      • Video Engagement Data
    • Historical API
      • Getting Started with our Historical API
      • One-time Queries
      • Recurring Queries
      • Metrics, Dimensions, and Filters
    • Headline Testing API
      • Getting Started with our Headline Testing API
      • Raw Data
      • Summary Report
      • Variant Report
    • Conversion API
      • Getting Started with our Conversion API
      • Top Articles
    • Data Lab API
      • Getting Started with Data Lab API
  • Help Center
  • Contact Support
  • Datastream Docs
  • Back to Chartbeat.com
Powered by GitBook
On this page
  • Intro to AMP
  • Validate your existing AMP HTML
  • Steps to integrate
  • Complete example
  • Next steps

Was this helpful?

  1. Implement Tracking
  2. Google AMP

Chartbeat Code for AMP

Instructions to add Chartbeat code to your AMP pages.

PreviousGoogle AMPNextAMP Configuration Variables

Last updated 1 year ago

Was this helpful?

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 . Your AMP pages should also be validated using the AMP Project's .

You can also add this same code to your AMP 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 , 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 .

<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".

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.

As all third-party JavaScript sources , 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.

behave differently on AMP pages
AMP HTML specification
validation workflow
Web Stories
next article of this guide
site-specific Chartbeat data