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

Google Accelerated Mobile Pages Amp

Treasure Dataは、Google Accelerated Mobile Pages (AMP) を使用してユーザーを追跡できます。Treasure Data AMP コンポーネントを使用すると、AMPコンポーネントからデータを簡単に送信できます。

このコンポーネントは、デフォルトのプロパティを自動的に収集し、顧客を追跡します。Treasure Dataは、amp-analytics コンポーネントによってサポートされている公式のAnalyticsベンダーの1つです。

前提条件

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

はじめに

Google AMPを初めて使用する場合は、クイックスタートガイドを参照してください。

独自のAMPページが起動して実行されたら、閉じタグ*の前にamp-analytics*コンポーネントを含めます。amp-analyticsは、AMPドキュメントから分析データをキャプチャするためのAMPコンポーネントです。

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

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

<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を使用してextraUrlParamsで指定します。

<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に基づいています。on属性を使用して、イベントトリガーがどこで発火するかを指定できます。以下の例では、Webサイト訪問者が要素をクリックしたときにイベントを収集します。

<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