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 JavaScript / HTML

  • Basic knowledge of Treasure Data

  • Basic knowledge of Treasure Data

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 </head> 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.

IP whitelist won't be applied to any import from JavaScript SDK. We have also seen a lot of cases where browsers specify invalid timestamps (like 1970/01/01), so we're currently ignoring records which have a timestamp older than 7 days, and newer than 3 days ahead.

Default Parameters Collected

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

  • td_client_id – client’s identifier

  • 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 - Treasure Data ids


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>
  • No labels