# Google Accelerated Mobile Pages Amp

Treasure Dataは、Google Accelerated Mobile Pages (AMP) を使用してユーザーを追跡できます。[Treasure Data AMP コンポーネント](https://www.ampproject.org/docs/ads_analytics/analytics-vendors#treasure-data)を使用すると、AMPコンポーネントからデータを簡単に送信できます。

このコンポーネントは、デフォルトのプロパティを自動的に収集し、顧客を追跡します。Treasure Dataは、[*amp-analytics* コンポーネント](https://www.ampproject.org/docs/ads_analytics/analytics-vendors#treasure-data)によってサポートされている公式のAnalyticsベンダーの1つです。

## 前提条件

- Treasure Dataの基本的な知識
- JavaScript / HTML / AMP Scriptの基本的な知識


## はじめに

[Google AMP](https://www.ampproject.org/)を初めて使用する場合は、[クイックスタート](https://www.ampproject.org/docs/getting-started/)ガイドを参照してください。

独自のAMPページが起動して実行されたら、閉じタグ**の前に*amp-analytics*コンポーネントを含めます。[amp-analytics](https://www.ampproject.org/docs/reference/components/amp-analytics)は、AMPドキュメントから分析データをキャプチャするためのAMPコンポーネントです。


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

次のように`<amp-analytics type="treasuredata" id="treasuredata">`を使用して、ページビューを自動的に収集します:


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

APIキーは、プロフィールページのTD Consoleから取得できます。SDKには書き込み専用APIキーを使用することをお勧めします。各イベントは非同期で実行されます。

## 自動的に収集されるデフォルトパラメータ

各ページビューとイベント呼び出しで、いくつかのパラメータが自動的に収集されます。

- td_client_id – ファーストパーティCookie ID
- td_charset – 文字セット
- td_language – ブラウザ言語
- td_color – 画面の色深度
- td_screen – 画面解像度
- td_viewport – ビューポートサイズ
- td_title – ドキュメントタイトル
- td_url – ソースドキュメントURL
- td_user_agent – ブラウザユーザーエージェント
- td_host – ドキュメントのソースホスト
- td_path – ドキュメントのソースパス名
- td_platform – ブラウザプラットフォーム
- td_referrer – ドキュメントリファラー
- td_ip – リクエストIP(サーバー)
- td_global_id - サードパーティCookie ID


## カスタムパラメータ

カスタムパラメータを設定する場合は、[AMP HTML URL Variable Substitutions](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)を使用してextraUrlParamsで指定します。


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

## カスタムイベント

上記のJSONは、[amp-analytics spec](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md)に基づいています。*on*属性を使用して、イベントトリガーがどこで発火するかを指定できます。以下の例では、Webサイト訪問者が要素をクリックしたときにイベントを収集します。


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