More than 5 years have passed since last update.

GMOペパボ Advent Calendar 2018

td-js-sdk(Treasure Data)をGTM経由で配信した時に得たTips

Last updated at 2018-12-10Posted at 2018-12-10

この記事は GMOペパボ Advent Calendar 2018 10日目の記事です。
突然ですが皆さん、プロダクトの行動ログって収集してますか??
ちょっと前に、Treasure Dataで行動ログをに収集する!!!1ために、プロダクトにtd-js-sdkを導入することを経験しました。
実際に行動ログを取り始めると、プロダクトにあるどのページにアクセスしているのかを、Treasure Dataのダッシュボード上でSQLを叩くとわかるのがとても面白い!!!っと思いました。
今回はその時に得た主にGTM(Google Tag Manager)周りのTipsを書いていこうと思います。
え!?Treasure Dataって聞くとなんか難しそう!?そんなこと全然無いですよ!!簡単に設定できちゃいます!!!
Treasure DataのDEMO版のリクエストはこちらのURLからリクエストすれば使えるようです。
(自分のプライベートのgmail入れたら、バリデーションエラーになったので会社のメールアドレスとかじゃないと作れないっぽいのかな...)
DB作成方法については、色々なやり方があるようですが、公式ドキュメント(一部日本語対応してます)やこちらの記事が参考になるかと思います。

`td-js-sdk`をGTM経由で配信する

コンテナを作成する

td-js-sdkを導入するに当たり公式リポジトリにあるScript snippetをプロダクトの共通のページ(Railsでいうとviews/layouts/application.html.erb的な共通ページ)に埋め込むのですが、直接埋め込んでしまうと管理が煩雑になってしまいます。
そのためGTMを使って配信することで一元管理され何か値が変わった場合、GTMのダッシュボードから変更できるようになります。(直接埋め込んだ場合、プルリクエストをして変更することになるかと思います...)
さっそく、GTMにアクセスしましょう。
GTMを初めて利用する際はアクセスすると、以下のようなコンテナ作成ページが表示されると思います。(Dockerのコンテナとは意味が違う)
アカウント名と国を入力し、コンテナ名にプロダクト名を入れましょう。
最後にコンテナの使用場所(今回はウェブ)を選択して作成を押せばダッシュボードへアクセスできるようになります。

td-js-sdkのタグを作成する

画面にあるタグをクリックし赤い新規ボタンを押すと以下のような画面になります。

タグの名前は何でも良いです。(今回はtd-js-sdkとします)
タグの設定はカスタムHTMLを選択し、HTMLのところに公式リポジトリにあるscript-snippetを貼り付けます。
fooのところに、Treasure Dataのデータベース名を、writeKeyにTreasure Dataのダッシュボードで発行する書き込み専用のAPIキーを入れます。

<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=["blockEvents","unblockEvents","setSignedMode","setAnonymousMode","resetUUID","addRecord","fetchGlobalID","set","trackEvent","trackPageview","trackClicks","ready"],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.1/td.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}}("Treasure",this);
  
var foo = new Treasure({
  database: 'Treasure Dataのデータベース名',
  writeKey: '発行したAPIキー'
});  
</script>

トリガーにはAll Pagesを選択します。

GTMをプロダクトに埋め込む

GTMのダッシュボードにあるコンテナID(ワークスペースでの変更数の左横あたりにある)をクリックするとGoogle タグマネージャをインストールというモーダルウィンドウが表示されます。

このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。という方のスクリプトをコピーし、プロダクトの共通のページ(先程言っていたRailsでいうviews/layouts/application.html.erb的な共通ページ)の<head>タグ直下に貼り付けてください、<script>を外して、GTM用のjsファイルを作成し、それを<head>に読み込ませるのもアリだと思います。

どうやって確認するの?

GTMの配信方法はダッシュボードにある公開ボタンを押せば公開できます。けど、確認せずに公開って怖いですよね。大丈夫です。GTMにはプレビューという機能があります。
ダッシュボードにあるプレビューを押してみましょう。

すると以下のようなものが表示されます。
この状態からタグ(トリガー、変数)に変更があれば更新ボタンを押す必要があります。

それでは、自分のプロダクトのローカル環境にアクセスしてみましょう(どのページでも良いです。staging環境にデプロイして確認でも大丈夫です。)
すると以下のようなデバッグモードがぴょこっと表示されます。

するとSummaryの欄に設定したタグが表示されます。ここでFired(発火)と表示されていれば成功です。
(どーでも良いですが疲れた時にここの表示の字面がfailedに見えて失敗したんじゃないかとよく勘違いしていました...)

これでtd-js-sdkをGTM経由で配信することができました。
いやいやいやいやいやいや、行動ログまだ送れるようにしてないでしょ!?
そうですね。ここからは行動ログを送るタグを作成します。

行動ログを送るタグを作成

事前にTreasure Data側のDBに行動ログを収集するテーブル(下記画像でいうところのaction-log)を作成しておいてください
さてここからが本番です。と言っても簡単ですが...
td-js-sdkを作成したときのようにタグを新規で作成し、カスタムHTMLを選択し、以下のスクリプトを入れます。
タグの名前は今回はaction-logという名前にします。

<script>  
  td.setAnonymousMode();
  td.set('行動ログを収集するテーブル名');
  td.trackPageview('行動ログを収集するテーブル名');
</script>

詳細設定をクリックし、タグの順位付けを選択し、〜が発効する前にタグを配信の設定タグをtd-sdk-jsを選択します。
あとは、トリガーをAll Pagesに選択して保存しましょう。

setAnonymousModeについて(ココ重要)

setAnonymousModeというのはバージョン2.0 から追加された Do Not Track 機能というものでユーザのデータ主体の同意状況によって取得するデータを選択できるオプション機能です。
今回はIPアドレスtd_ip・td_client_id・td_global_idが匿名化されるsetAnonymousModeで設定しております。
もし、プロダクトによってIPアドレスも知りたい場合はsetSignModeを選択し、以下のようにスクリプトを変更することになります。


<script>
  td.setSignedMode();
  td.set('$global', 'td_global_id', 'td_global_id');
  td.set('行動ログを収集するテーブル名');
  td.trackPageview('行動ログを収集するテーブル名', td.fetchGlobalID);
</script>

ただし、特にIPアドレスは昨今話題になっているGDPR（EU一般データ保護規則）に関わってくる話になるため、自社のプロダクトの責任者や法務担当の方に確認・相談をしてからsetSignModeへの設定変更を検討するのが良いかと思います。
Do Not Track 機能の詳細は公式ブログを、td-js-sdkのGDPR対応についてはサポートページを御覧ください。(一度ご一読することを勧めます)

JavaScript SDKのオプトアウト機能とHive/Presto UDF “TD_IP_TO_COUNTRY_CODE”
https://www.treasuredata.co.jp/blog_jp/do-not-track-td-ip-to-country-code/

GDPR対応のJavascript SDKとモバイルSDK のご案内
https://support.treasuredata.com/hc/ja/articles/360001496727-GDPR%E5%AF%BE%E5%BF%9C%E3%81%AEJavascript-SDK%E3%81%A8%E3%83%A2%E3%83%90%E3%82%A4%E3%83%ABSDK-%E3%81%AE%E3%81%94%E6%A1%88%E5%86%85

さて、この状態でGTMをプレビューモードにし(既にプレビューモードの場合は更新をクリック)、ローカル環境にアクセスしてみましょう。
すると先ほと作成した行動ログを送るタグ(今回で言うところのaction-log)がFiredになっているかと思います。
確認したら、Treasure Dataのダッシュボードにアクセスし、該当のDBのテーブルにアクセスしてみましょう。
少し時間が経ったらかもですが、レコードが追加されているはずです。

リリース方法

さて、プレビューモードでの確認ができたら、最後にリリースをします。
リリースは以下2つになります。

GTMコンテナのリリース
GTMをプロダクトに埋め込むをプルリクエストしてリリース

1.は普通にプルリクエスト作成してリリースする作業なので、2.について説明します。

GTMコンテナのリリース

こちらも特に難しくなく、GTMダッシュボードにある公開をクリックします

すると以下のような画面が表示されます。
バージョン名とバージョンの説明には今回追加したタグのついての説明を入れます。
どんな風に説明を入れるかは人それぞれだとは思いますが私は、普段のプルリクエスト時に入れる説明文を意識して入れております。

最後に公開をクリックすれば公開されます。
その後に2.をリリースすればOKです。

Appendix

環境別に行動ログを収集する

おそらく、皆さんのプロダクトにはdevlopment、staging、productionと環境が別にあるかと思います。
トレジャーデータ側のDBも環境別にある場合(今回、Treasure Data側にdevlopment-my-product、staging-my-product、production-my-productというDBを作っていると仮定します。の場合)はどうしたら良いでしょうか?
これは、実はGTMの変数を使うだけで解決します。
ダッシュボードで変数メニューをクリックし、ユーザ定義変数の方の変数のボタンを押します

すると以下のように表示され、変数のタイプをカスタム JavaScriptを選択します。
名前はenvironmentとします。

カスタム JavaScriptには以下を入れます。

function () {
  switch(document.domain){
    case 'プロダクトのproductionのURL': return 'Treasure Dataのproductionのデータベース名'
    case 'プロダクトのstagingのURL': return 'Treasure Dataのstagingのデータベース名'
  }
  return 'Treasure Dataのdevlopmentのデータベース名'
}

この後、保存すればOKです。

作成した変数を使う

td-js-sdkのタグを作成するで作成したタグを以下のように変更し、作成した変数を使うようにします。

<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=["blockEvents","unblockEvents","setSignedMode","setAnonymousMode","resetUUID","addRecord","fetchGlobalID","set","trackEvent","trackPageview","trackClicks","ready"],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.1/td.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}}("Treasure",this);
  
var foo = new Treasure({
--  database: 'Treasure Dataのデータベース名',
++  database: '{{environment}}',
  writeKey: '発行したAPIキー'
});  
</script>

この後、プレビューモードでの確認をしましょう!
OKの場合はまた、GTMコンテナのリリースをすればプロダクトに反映されます。

さいごに

これで、GTM経由でTreasure Dataを使って行動ログを収集できるようになりました!!
行動ログを取ることで、ユーザはどのページに興味があるのか、どんなことを実現したいのかという仮設やそれに繋がる施策が生まれるかと思います。
プロダクトの規模に関わらず、グロースするためには行動ログは大事な財産の一つになるかと思います。
この記事を通して少しでも参考になって「お!ウチでも行動ログ収集してみるか!!」ってなったら幸いです。
これからもどんどん仕組みを作っていくぞ!!!!!!1111

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up