# Google Accelerated Mobile Pages Amp

Treasure Data can track users with Google Accelerated Mobile Pages (AMP). The [Treasure Data AMP component](https://www.ampproject.org/docs/ads_analytics/analytics-vendors#treasure-data) 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](https://www.ampproject.org/docs/ads_analytics/analytics-vendors#treasure-data).

## Prerequisites

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


## Getting Started

If you’re new to [Google AMP](https://www.ampproject.org/), go through their [Quickstart](https://www.ampproject.org/docs/getting-started/) guide.

When you have your own AMP page up and running, include the *amp-analytics* component before the closing ** tag. [amp-analytics](https://www.ampproject.org/docs/reference/components/amp-analytics) is an AMP component to capture analytics data from an AMP document.


```javascript
<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:


```javascript
<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](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).


```javascript
<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](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md). You can specify where event triggers will fire with *on* attribute. The example below will collect events when the website visitors click the elements.


```javascript
<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>
```