• Platforms
  • Partners
  • Forums
  • 日本語
  • TLC Tealium Learning Center Tealium Learning
    Community
  • Discussions & Ideas Dicussions & Ideas
  • Product Guides Product Guides
  • Knowledge Base Knowledge Base
  • Developer Docs Developer Docs
  • Education Education
  • TLC Blog TLC Blog
  • Support Desk Support Desk
  • CDH Customer Data Hub Customer Data Hub
  • Mobile
  • Getting Started
    • Overview
    • Quick Start Guide
    • Mobile Concepts
    • Client-Side
    • Server-Side
    • Tracking Webviews
    • Data Layer
    • Consent Management
    • Event Batching
    • User Location and Geofencing
    • Media Tracking
    • Deep Links
    • Timed Events
    • Trace
    • Hosted Data Layer
    • Adobe Visitor Service Module
    • Feature Comparison
    • Troubleshooting
  • Remote Commands
    • Overview
    • How It Works
    • Integrations
      • Adjust
      • AppsFlyer
      • Branch
      • Braze
      • Contentsquare
      • Facebook
      • Firebase
      • Kochava
      • Usabilla
  • Android (Java)
    • Overview
    • Install
    • Track
    • Data Layer
    • Data Management
    • Consent Management
    • Module List
      • Ad Identifier Module
      • Crash Reporter Module
      • Install Referrer Module
      • Lifecycle Tracking Module
      • Location Module
      • Optimizely X Tracking Module
    • Android TV
    • Android Wear
    • API Reference
      • ConsentManager
      • DataSources
      • Lifecycle
      • Tealium
      • Tealium.Config
      • TealiumLocation
    • Release Notes
  • Android (Kotlin)
    • Overview
    • Install
    • Track
    • Data Layer
    • Consent Management
    • Identity Resolution
    • Module List
      • Ad Identifier Module
      • AutoTracking Module
      • AdobeVisitorService Module
      • Collect Module
      • Collectors Module
      • Crash Reporter Module
      • In-App Purchase Module
      • Install Referrer Module
      • Lifecycle Tracking Module
      • Location Manager Module
      • Media Module
      • RemoteCommands Module
      • Tag Management Dispatcher Module
      • Visitor Service Module
    • Android TV
    • API Reference
      • ConsentCategory
      • ConsentManager
      • CurrentVisit
      • DataLayer
      • Lifecycle
      • LocationManager
      • Media
      • Tealium
      • TealiumConfig
      • VisitorProfile
      • VisitorService
    • Release Notes
  • Cordova 1.x
    • Overview
    • Install
    • Track
    • Data Management
    • Module List
      • Ad Identifier Module
      • Crash Reporter Module
      • Install Referrer Module
    • API Reference
    • Release Notes
  • Cordova 2.x
    • Overview
    • Install
    • Track
    • API Reference
    • Release Notes
  • Flutter 1.x
    • Overview
    • Install
    • Track
    • Consent Management
    • Data Management
    • API Reference
    • Release Notes
  • Flutter 2.x
    • Overview
    • Install
    • Track
    • Consent Management
    • Data Management
    • API Reference
      • Tealium
      • TealiumConfig
      • VisitorProfile
    • Release Notes
  • iOS (Objective-C)
    • Overview
    • Install
    • Track
    • Data Layer
    • Data Management
    • Consent Management
    • Tag Management
    • Module List
      • Lifecycle Tracking Module
    • tvOS
    • watchOS
    • API Reference
    • Release Notes
  • iOS (Swift) 1.x
    • Overview
    • Install
    • Track
    • Data Layer
    • Data Management
    • App Extensions
    • Identity Resolution
    • Consent Management
    • Modules
    • Module List
      • AppData Module
      • Attribution Module
      • AutoTracking Module
      • Collect Module
      • Connectivity Module
      • CrashReporter Module
      • DataSource Module
      • DefaultStorage Module
      • Delegate Module
      • DeviceData Module
      • DispatchQueue Module
      • FileStorage Module
      • Lifecycle Module
      • Location Module
      • Logger Module
      • PersistentData Module
      • RemoteCommands Module
      • TagManagement Module
      • VisitorService Module
      • VolatileData Module
    • Feature Comparison
    • Working with Objective-C
    • API Reference
      • TealiumConfig
      • TealiumConsentCategories
      • TealiumConsentManagerDelegate
      • TealiumConsentManager
      • TealiumInstanceManager
      • TealiumPersistentData
      • TealiumVolatileData
      • Tealium
    • Release Notes
  • iOS (Swift) 2.x
    • Overview
    • Install
    • Track
    • Data Layer
    • Consent Management
    • App Extensions
    • Identity Resolution
    • Modules
    • Module List
      • AppData Module
      • AdobeVisitorService Module
      • Attribution Module
      • AutoTracking Module
      • Collect Module
      • Connectivity Module
      • CrashReporter Module
      • DeviceData Module
      • In-App Purchase Module
      • Lifecycle Module
      • Location Module
      • Media Module
      • RemoteCommands Module
      • TagManagement Module
      • VisitorService Module
    • Working with Objective-C
    • API Reference
      • LocationModule
      • MediaSession
      • Tealium
      • TealiumConfig
      • TealiumConsentCategories
      • TealiumConsentManager
      • TealiumDataLayer
      • TealiumInstanceManager
    • Release Notes
  • NativeScript
    • Overview
    • Install
    • Track
    • API Reference
      • Tealium
      • TealiumConfig
    • Release Notes
  • React Native 1.x
    • Overview
    • Install
    • Track
    • API Reference
    • Release Notes
  • React Native 2.x
    • Overview
    • Install
    • Track
    • Location Module
    • API Reference
    • Release Notes
  • Unity 1.x
    • Overview
    • Install
    • Track
    • API Reference
  • Unity 2.x
    • Overview
    • Install
    • Track
    • API Reference
  • Xamarin 1.x
    • Overview
    • Install
    • Track
    • Data Management
    • Consent Management
    • API Reference
    • Release Notes
  • Xamarin 2.x
    • Overview
    • Install
    • Track
    • Data Layer
    • Consent Management
    • API Reference
    • Release Notes
  • Web
  • Getting Started
    • Overview
    • Quick Start Guide
    • Web Concepts
    • Data Layer
      • An Introduction to the Data Layer
      • How the Data Layer Works for Websites
      • Data Layer Best Practices
      • Definitions
        • Retail
        • Publisher
        • Hotel
        • Travel
        • Basic Video Tracking
  • Adobe Launch
    • Overview
    • Install
    • Data Layer
  • AMP
    • Overview
    • Install
    • Track
    • Data Layer
  • Angular
    • Overview
    • Install
    • Track
    • API Reference
  • Google Tag Manager
    • Overview
    • Install
    • Data Layer
  • JavaScript (Web)
    • Overview
    • Install
    • Track
    • Data Layer
    • Universal Data Object (utag_data)
    • Universal Tag (utag.js)
    • Data Layer Object (b)
    • Single-Page Applications
    • Settings
    • Debugging
    • API Reference
      • Cookie Functions
      • GDPR Functions
      • Tracking Functions
      • Utility Functions
    • Release Notes
  • Server
  • C#
    • Overview
    • Install
    • Track
    • Data Layer
    • API Reference
    • Release Notes
  • HTTP API
    • Overview
    • Endpoint
    • Data Layer
  • Java
    • Overview
    • Install
    • Track
    • API Reference
    • Release Notes
  • Node
    • Overview
    • Install
    • Track
    • API Reference
  • Python
    • Overview
    • Install
    • Track
    • API Reference
  • Roku
    • Overview
    • Install
    • Track
    • API Reference
  • Ruby
    • Overview
    • Install
    • Track
    • API Reference
AMP

Install

Learn to install Tealium Collect for AMP sites.

Requirements

  • Tealium Customer Data Hub account

Install

The <amp-analytics> element is an extended AMP component that captures analytic data from an AMP document. AMP analytics provides built-in configuration support for Tealium Collect with the type attribute tealiumcollect.

To install Tealium Collect for AMP sites:

  1. Add the script to your page within the <head> tags of your HTML document:

    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    
  2. To add a base installation of Tealium Collect to an AMP page, add the <amp-analytics> element within the <body> tags of your page as follows:

    <amp-analytics type="tealiumcollect">
    <script type="application/json"> {
      "vars": {
        "account": "ACCOUNT",
        "profile": "PROFILE",
        "datasource": "DATASOURCE"
      }
    }     
    </script>
    </amp-analytics>
    
Parameters Type Description Example
account String Tealium account name "companyXYZ"
profile String Tealium profile name "main" 
datasource String Data source key "abc123"

Validation

To verify that that a web page satisfies the AMP HTML specifications, use the AMP Validator.

  1. To turn the validator on, add #development=1 to the end of an AMP page URL.

  2. See the browser console to view AMP validation errors, if any.

Hosted JSON

If you prefer to install Tealium Collect for AMP with hosted JSON (rather than embedded directly in the page) use the config attribute to load your AMP configuration from a hosted location:

<amp-analytics type="tealiumcollect" config="https://tags.tiqcdn.com/dle/ACCOUNT/PROFILE/FILE.json" />

Learn more about serving remote JSON configuration files for use on an AMP site.

Full Page Example

This example demonstrates a complete AMP page. This configuration sends standard page view data to Tealium and track button clicks.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <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>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  </head>
  <body>
    <amp-analytics type="tealiumcollect">
    <script type="application/json"> {
      "vars": {
        "account": "ACCOUNT",
        "profile": "PROFILE",
        "datasource": "DATASOURCE"
      },
      "triggers": {
        "custom_click": {
          "on": "click",
          "selector": "#the-button",
          "request": "event",
          "vars": {
            "tealium_event": "custom_click"
          },
          "extraUrlParams": {
            "link_name": "${linkName}"
          }
        }
      },
      "extraUrlParams": {
        "site_section": "Demos"
      }
    }
    </script>
    </amp-analytics>

    <h1 id="header">Welcome to the mobile web.</h1>
    <p>Testing AMP Analytics "tealiumcollect" component.</p>
    <div>
      <button type="button" id="the-button" data-vars-link-name="track">Track</button>
    </div>
  </body>
</html>
Next
Track
"Track"

 

Was this article helpful?

This page was last updated: March 11, 2021      

Thank you for your feedback!

Table of Contents

  • Requirements
  • Install
  • Validation
  • Hosted JSON
  • Full Page Example
  • Platforms
  • Partners
  • Forums
  • Mobile
  • Getting Started
  • Remote Commands
  • Android (Java)
  • Android (Kotlin)
  • Cordova 1.x
  • Cordova 2.x
  • Flutter 1.x
  • Flutter 2.x
  • iOS (Objective-C)
  • iOS (Swift) 1.x
  • iOS (Swift) 2.x
  • NativeScript
  • React Native 1.x
  • React Native 2.x
  • Unity 1.x
  • Unity 2.x
  • Xamarin 1.x
  • Xamarin 2.x
  • Web
  • Getting Started
  • Adobe Launch
  • AMP
  • Angular
  • Google Tag Manager
  • JavaScript (Web)
  • Server
  • C#
  • HTTP API
  • Java
  • Node
  • Python
  • Roku
  • Ruby