GTM実装記録

概要

GTMの勉強記録。作業内容を箇条書きで記録。

詳細

導入

• wordpress
  • 「Local」を使用してサイト構築
    • lightning等プラグイン導入
  • Google タグマネージャー設定＞Google タグマネージャーのコンテナIDを設定→guiベースでgtmタグ埋め込み
• GTM
  • アカウント作成・コンテナ作成
    • タグ作成
      • ウェブストリームの測定id設定
    • トリガー作成
  • プレビューボタンからデバッグ
    • 問題ないことを確認しタグを公開
  • Tag Assistant を使用してタグを確認

実装例の詳細

UAで内部リンククリックをカウントタグを実装

• ↑の挙動をGA4の「リアルタイム」メニューでモニタリング

UAで外部リンククリックのカウントタグを実装

• プレビューでデバッグ
• Display Variables as  Names →Valuesを選択で値が確認できる

ボタンクリックの実装

• デベロッパーツールでボタン要素のClass名を調べる
• Click Classes を条件とするトリガーを実装

ページscrollの実装

• Scroll Depth Threshold をトリガーに設定

画像表示の実装(event: "gtm.elementVisibility")

• トリガー：要素の表示
• セレクタ：デベロッパーモードのCopy selectorで取得
• 例：#post-212 > div > div.is-layout-flex.wp-container-3.wp-block-columns > div:nth-child(1) > figure > img

変数設定

パス+クエリを出力する変数の設定

• ルックアップテーブルと変数「クエリ」を使用

ウェブページタイトル

• 変数タイプ：javascript変数、グローバル変数名：document.title
• document.titleは、ページのロード中に自動的に設定される場合もあります。HTML文書の要素内の要素がある場合、ブラウザーはページを読み込む際に、この要素のテキストをdocument.titleプロパティに設定します。
• こんな感じでプレビューモードのvariablesに取得されている

リンクのパスをClick Elementから取得

• 

GA4→biqqueryへのエクスポート

• window.innerWidthの値によってデバイスタイプを判定していることが分かる
  • デバイスタイプ変更はf12→ctrl+shift+Mで左上のページの横幅をいじれば可能
    
    

GA4→biqqueryへのエクスポート

• お金かかって止めるの忘れそうだったのでプロジェクト選択するところまで

コンテナ設定のエクスポート

• jsonはIDが漏れるのでプライベートリポジトリで保管

定義

• リンク
  • <a>タグで指定されたもの
• イベントタグ実装時の文脈
  • Page URL　どのURLにいるか
  • Click URL　どのURLがクリックされたか
  • 値　アクション当たりの値。１クリック時のクリック単価等

備考

• 変数命名規則の確認
  • 基本的にUpper Camel Case
    • EX.「hoge - fuga」「LinkClick - 内部リンクをクリック」
• 当たり前だが、移行期間に当たってはUA GA双方のタグを埋め込まなければいけない
• トリガーのタイプで「ページビュー」と「リンクをクリック」（系）が地味に間違いやすいので注意
• デバッグモード10、link_domain10とあるが、デバッグモード中でクリックされた外部ドメインが10でこのように表示される。デバッグモード中のカウントが排除されているわけではないので注意
  
• 仮説→計測タグの設定→設定方法の調査→プレビューモードでのデバッグ→公開→GA4のレポート＞リアルタイムでモニタリング