Skip to content
/
Google Accelerated Mobile...
Last updated

Google Accelerated Mobile Pages Amp

Treasure Data can track users with Google Accelerated Mobile Pages (AMP). The Treasure Data AMP component makes it easy to send data from AMP components easily.

This component automatically collects default properties and track customers. Treasure Data is one of the official Analytics vendors supported by the amp-analytics component.

Prerequisites

  • Basic knowledge of Treasure Data
  • Basic knowledge of JavaScript / HTML / AMP Script

Getting Started

If you’re new to Google AMP, go through their Quickstart guide.

When you have your own AMP page up and running, include the amp-analytics component before the closing  tag. amp-analytics is an AMP component to capture analytics data from an AMP document.

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

Use <amp-analytics type="treasuredata" id="treasuredata"> to automatically collect page views, as follows:

<amp-analytics type="treasuredata" id="treasuredata"><script type="application/json">  {    "vars": {      "host": "in.treasuredata.com",      "writeKey": "YOUR_WRITE_ONLY_APIKEY_IS_HERE",      "database": "YOUR_DATABASE_NAME"    },    "triggers": {      "trackPageview": {        "on": "visible",        "request": "pageview",        "vars": {          "table": "pageviews"        }      }    }  }</script></amp-analytics>

The API Key can be retrieved from TD Console in your Profile page. It’s recommended to use write-only API key for SDKs. Each event will fire off asynchronously.

Default Parameters Collected

A few parameters are automatically collected with each page view and event call.

  • td_client_id – 1st party cookie id
  • td_charset – character set
  • td_language – browser language
  • td_color – screen color depth
  • td_screen – screen resolution
  • td_viewport – viewport size
  • td_title – document title
  • td_url – source document url
  • td_user_agent – browser user agent
  • td_host – document’s sourcehost
  • td_path – document’s sourcepathname
  • td_platform – browser platform
  • td_referrer – document referrer
  • td_ip – request IP (server)
  • td_global_id - 3rd party cookie id

Custom Parameters

If you want to set the custom parameters, specify them in extraUrlParams with using AMP HTML URL Variable Substitutions.

<amp-analytics type="treasuredata" id="treasuredata"><script type="application/json">  {    "vars": {      "host": "in.treasuredata.com",      "writeKey": "YOUR_WRITE_ONLY_APIKEY_IS_HERE",      "database": "DATABASE_NAME"    },    "triggers": {      "trackPageview": {        "on": "visible",        "request": "pageview",        "vars": {          "table": "pageviews"        },        "extraUrlParams": {          "example_param1": "123",          "example_param2": 456        }      }    }  }</script></amp-analytics>

Custom Events

Above JSON is based on amp-analytics spec. You can specify where event triggers will fire with on attribute. The example below will collect events when the website visitors click the elements.

<amp-analytics type="treasuredata" id="treasuredata">
  <script type="application/json">
    {"vars": {"host":"in.treasuredata.com", "writeKey": "YOUR_WRITE_ONLY_APIKEY_IS_HERE", "database": "DATABASE_NAME"},"triggers": {"trackPageview": {"on": "visible","request": "pageview","vars": {"table": "pageviews"},"extraUrlParams": {"foo": "123"}},"trackClick": {"on": "click","request": "event","vars": {"table": "events"},"extraUrlParams": {"type": "click","bar": 789 }}}}
  </script>
</amp-analytics>
Previous page
Next page