Google Tag Manager で Amplitude の設定を行う

サービスのグロースやUX改善に不可欠なMixpannelやAmplitudeの計測設計｜KAJI @ MESON CEO｜note を見ていて、Amplitude を知りました。
Google Tag Manager からタグ配信を実施してみましたので、結果を記載します。

1. Amplitude の説明

少し使用した後に、Google Analytics との比較で感じたことを記載します。
`️ は比較して良いと感じた点、印無しは同レベル、❌ は比較して悪いと感じた点になります。

• ⭕️ データの設定が柔軟にできる
  Google Analytics の Event は 最大4項目のみ設定が可能ですが、Amplitude は、Event や UserProfile として設定するデータはJSON形式で柔軟に設定ができます。

• ⭕️ データ可視化が柔軟にできる
  Event のプロパティとして設定したデータ を GroupBy 項目に指定して、時系列分析ができます。
  Google Analytics でいうセグメントを作らなくても良いですし、分析にスピードが出るかと思います。

• ⭕️ ユーザーエクスプローラの機能が見やすい
  Google Analytics よりもスッキリしている印象があり、見やすいと思いました。
  メニューがそこまで多くなく、目的の機能にたどり着き易い印象を持ちました。

• Google Analytics と同様に 1000万イベントまで無料
  無料枠が大きいのは使ってみようという気持ちになるかと思いました。
  ただ、データ可視化機能の半分は有料化しないと使用できないようになっています。

• 個人情報の設定も問題ない?
  設定例を見る限り個人情報を設定しても規約上は問題ないように思いました。
  Google Analytics の場合は、規約上許可していないため、アクセス解析基板側に情報を保持させたい人にとってはメリットかもしれません。
  ただ、情報漏洩のリスクもあるかと思います。

• ❌ UIが英語
  これは、苦手意識を持つ人がいるかもしれません。

• ❌ 日本語ドキュメントをあまり見かけない。
  英語の Developer Guide はあるので、実装にはそこまで困らないかもしれませんが、日本語ドキュメントがないのでとっつきづらさがあります。

• ❌ データ反映にタイムラグがある。
  これは最初の疎通確認時に感じました。データの反映にしばらく時間がかかるようです。
  感覚的には1時間程度かなと思います。

2. アカウント取得

Pricing Plans | Product Analytics Software から Free アカウントの取得ができます。
取得にはそれほど手こずらなかったので手順は割愛します。
会社名を求められますが、Personal Use でアカウント登録は可能でした。

3. Google Tag Manager での作業

Amplitude で pageview を記録するとして以下のようなタグ、トリガーを作成しました。

3.1. カスタムHTMLを作成

以下、カスタムHTMLタグを作成しました。

• Amplitude の初期化タグ
  

  <script type="text/javascript">
    (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
    ;r.type="text/javascript"
    ;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
    ;r.crossOrigin="anonymous";r.async=true
    ;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
    ;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
    console.log("[Amplitude] Error: could not load SDK")}}
    ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
    ;function s(e,t){e.prototype[t]=function(){
    this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
    var o=function(){this._q=[];return this}
    ;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
    ;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
    ;return this}
    ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
    ;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
    ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
    ;function v(e){function t(t){e[t]=function(){
    e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
    for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
    e=(!e||e.length===0?"$default_instance":e).toLowerCase()
    ;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
    ;e.amplitude=n})(window,document);
  
    amplitude.getInstance().init("API_KEY");
  </script>
  

  "API_KEY" には Project 作成時の、キーが設定されています。
  Installation – Amplitude Developer Center でタグのサンプルの記載がありますが、若干 JavaScritp の Version が古いので、Project 作成時に、コピーを促されるタグを設定すれば良いかと思います。
  このタグは、一度 タグからのイベント送付に成功すると、VIEWが若干変更されるので、最初しか取得ができません。
  もしかしたらどこからか表示できるのかもしれませんが見つけられませんでした。

• pageviewイベントを発行するタグ
  pageviewイベントを発行するタグとして以下のタグを作成しました。
  Event のプロパティとして、ブログの記事情報をデータレイヤ変数に設定、JSON形式で設定しています。
  

  <script>
  var eventProperties = {
    blogPostId : {{blogPostId}},
    blogPostDescription : {{blogPostDescription}},
    blogPostCreated : {{blogPostCreated}},
    blogPostUserName: {{blogPostUserName}},
    blogPostUpdated : {{blogPostUpdated}},
    blogPostCategories: {{blogPostCategories}},
    blogArticlePunctuationScore: {{ブログ記事 句読点数}},
    userAgent: {{UserAgent}},
    timeStamp: {{timeStamp}},
    blogArticleNumberOfCharacters: {{ブログ記事 文字数}},
    performanceNavigationType: {{performance.navigation.type}},
    performanceNavigationRedirectCount: {{performance.navigation.redirectCount}},
    connectionDownlink: {{connection.downlink}},
    connectionDownlinkMax: {{connection.downlinkMax}},
    connectionEffectiveType: {{connection.effectiveType}},
    connectionRtt: {{connection.rtt}},
    connectionSaveData: {{connection.saveData}},
    connectionType: {{connection.type}} ,
    severTiming: {{severTiming}}
  };
  amplitude.getInstance().logEvent('pageview', eventProperties);
  </script>
  

  また、初期化タグとの依存関係があるため、pageview タグの発行前に初期化タグを呼び出すように設定しました。
  

3.2. トリガーの設定

pageviewイベントを発行するタグ にのみ全てのページビュートリガーを設定しました。
pageviewタグの発行前に初期化タグの呼び出しをタグ側で設定しているため、pageviewイベントへのタグ設定のみで芋づる式に呼び出されます。

4. 参考

以下、参考にした記事になります。

• Setting up our SDKs – Amplitude Developer Center
• amplitude/GTM-Web-Demo: Web demo app for Google Tag Manager + Amplitude integration

以上です。