# Google Tag Manager Import Integration

Treasure Dataは[Google Tag Manager](http://www.google.com/tagmanager/) (GTM) と連携して、データを一箇所に収集します。この統合により、Googleの管理ツールがお客様のニーズに合わせてより強力になります。

## 前提条件

- JavaScript / HTMLの基本知識
- Treasure Dataの基本知識


## タグの作成

コンテナを作成したら、その中にCustom HTML Tagとして新しいタグを作成できます。タグとは、他のプラットフォームにデータを送信するように設定されたコードです。タグは、ウェブサイトのソースコードを編集することなく、さまざまなサードパーティツールを組み合わせるために使用されます。

1. Google Tag Managerを開きます。
2. コンテナを選択します。
3. Configure Tagセクションに以下の行を追加し、[write-only APIキー](https://docs.treasuredata.com/smart/project-product-documentation/getting-your-api-keys)とデータベース名を設定します。以下のタグは**All Pages**トリガーに関連付けて実行する必要があります。



```html
<!-- Treasure Data -->
<script type="text/javascript">
  !function(t,e){if(void 0===e[t]){e[t]=function(){e[t].clients.push(this),this._init=[Array.prototype.slice.call(arguments)]},e[t].clients=[];for(var r=function(t){return function(){return this["_"+t]=this["_"+t]||[],this["_"+t].push(Array.prototype.slice.call(arguments)),this}},s=["addRecord","blockEvents","fetchServerCookie","fetchGlobalID","fetchUserSegments","resetUUID","ready","setSignedMode","setAnonymousMode","set","trackEvent","trackPageview","trackClicks","unblockEvents"],n=0;n<s.length;n++){var c=s[n];e[t].prototype[c]=r(c)}var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.treasuredata.com/sdk/2.5/td.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}}("Treasure",this);

  // Configure an instance for your database
  var td = new Treasure({
    host: 'in.treasuredata.com',
    writeKey: 'YOUR_WRITE_ONLY_APIKEY_IS_HERE',
    database: 'DATABASE_NAME'
  });
  // Enable cross-domain tracking
  td.set('$global', 'td_global_id', 'td_global_id');
  // track pageview information to 'pageviews' table
  td.trackPageview('pageviews');
</script>
```

画面は次のようになります。

![](/assets/image-20200422-201738.55c22279978010c4c154b63e6c7fa009b5d1b88799aa22dc36ac31fadb19eadc.07b9aa4f.png)

## Click URL変数のトラッキング

Click Triggerを設定することで、ユーザーがクリックしたリンクを追跡できます。これにより、データと{{Click URL}}変数を含む追加のJavaScriptタグがTreasure Dataに送信されます。{{Click URL}}変数には、リンクのURL情報が含まれています。Click Triggerを使用して、ページビューを追跡できない外部サイトへのリンクをユーザーがクリックしたときを追跡できます。Google Tag Managerの変数により、トラッキングがより適応性の高いものになります。変数は変化する値を保持するコンテナのようなもので、ウェブサイトのコンテキストから情報を取得してタグに渡すことができるため、トラッキングと分析の設定がよりカスタマイズ可能になります。

### {{Click URL}}変数の有効化

1. ワークスペースから、**Variables**を選択します。
2. **Configure**を選択します。
3. 変数パネルのClicksセクションで、**Click URL**を選択します。


![](/assets/image2020-11-24_9-35-55.888c0c3de33389a39907dbf47e3e2df2cc2f9c5f4e32ac19b1bdcbc36c348275.07b9aa4f.png)

### Click Triggerの定義

タグはトリガーに関連付けられます。トリガーとは、ウェブサイト上でタグを実行するタイミングと場所を決定するルールまたは条件です。トリガーはイベントリスナーとして機能し、ウェブサイトのアクティビティを監視します。トリガーは、関連付けられたタグに実行するよう信号を送ります。トリガーは、タグがいつ、どこでアクティブ化または実行されるかを制御します。

1. ワークスペースから、**Triggers**を選択します。
2. **New**を選択します。
3. Trigger Configuration Panelで、**Click - Just Links**を選択します。References to this Triggerの下にClicksタグが選択され、トリガーへの参照が実行されるようになります。


![](/assets/image2020-11-24_9-36-33.daaf806bd9bc015780820075b1a6ac90067b34f18ed2d072ffc65befe0463087.07b9aa4f.png)

### Click Triggerのタグ設定

1. References to this Triggerパネルで、**Clicks**を選択します。
2. Tag Typeの下で**Custom HTML**を選択します。


![](/assets/image2020-11-24_9-37-32.d355c1a6af51aa04239d4d77e8de2106a578c7036ce72fe5b8381c9965eed588.07b9aa4f.png)
3. HTMLセクションに、以下のコードを挿入します。


```html
<script type="text/javascript">
  !function(t,e){if(void 0===e[t]){e[t]=function(){e[t].clients.push(this),this._init=[Array.prototype.slice.call(arguments)]},e[t].clients=[];for(var r=function(t){return function(){return this["_"+t]=this["_"+t]||[],this["_"+t].push(Array.prototype.slice.call(arguments)),this}},s=["addRecord","blockEvents","fetchServerCookie","fetchGlobalID","fetchUserSegments","resetUUID","ready","setSignedMode","setAnonymousMode","set","trackEvent","trackPageview","trackClicks","unblockEvents"],n=0;n<s.length;n++){var c=s[n];e[t].prototype[c]=r(c)}var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.treasuredata.com/sdk/2.4/td.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}}("Treasure",this);

  // Configure an instance for your database
  var td = new Treasure({
  host: 'in.treasuredata.com',
  writeKey: 'YOUR_WRITE_ONLY_APIKEY_IS_HERE',
  database: 'DATABASE_NAME'
  });
  // Enable cross-domain tracking
  td.set('$global', 'td_global_id', 'td_global_id');

  // Track click information to 'clickviews' table
  var click_url = {{Click URL}};
  td.set('clickviews', {click_url: click_url});
  td.trackPageview('clickviews');
</script>
```

これにより、pageviewsテーブルに追加のclick_urlカラムが表示されます。

![](/assets/image2020-11-24_9-38-13.18d82df6cde67c51bf348d1ad25811a115b8f1b63cf6f7dfb326f20dc3c5f8a4.07b9aa4f.png)

*All Pages*と*click_trigger*の2つのTDタグが登録されているはずです。

![](/assets/image2020-11-24_9-39-9.e92ab18fa7261822b88913ec1e1fbe3169b3d94e8ab7908593904bd5ffb7693d.07b9aa4f.png)

# Google Tag Managerからのデータの除外

Google Tag Managerに関連するレコードが表示される場合があります。これらのレコードに含まれるデータの例については、以下の表を参照してください。

| td_title | td_referer | td_host | td_url |
|  --- | --- | --- | --- |
| gtm-msr | [https://gtm-msr.appspot.com/render?id=xxxxxxx](https://gtm-msr.appspot.com/render?id=xxxxxxx) | [gtm-msr.appspot.com](http://gtm-msr.appspot.com/) | [https://gtm-msr.appspot.com/render2?id=xxxxx](https://gtm-msr.appspot.com/render2?id=xxxxx) |


1. クエリ結果からデータを除外するには、次のいずれかを選択します:


- td_titleまたはtd_hostを使用して結果をフィルタリングする。
- テーブルにデータを記録したくない場合は、コードに以下を追加します:



```html
<script type="text/javascript">
  if (document.location.href.search('gtm-msr.appspot') == -1) {
 /* Attribution code here */
  }
</script>
```