kdcsライブラリー

wordpressに動画を埋め込んで再生する場合、youtubeであればyoutube画面に再生回数が表示されるが、mpg4などで作成した動画をアップロードして投稿に直接埋め込んだ場合、再生回数を取得するにはjavascriptで動画再生イベントをGA4に送信する必要がある。

document.querySelectorAll("video").forEach(video => {
    video.addEventListener("play", function() {
        gtag("event", "video_play", {
            event_category: "Video",
            event_label: window.location.pathname // 投稿ページのURLを記録
        });
    });
});

1. GA4のカスタムイベントを作成
GA4の管理画面でカスタムイベントを作成。

例：イベント名「video_play」ブログのシングルページ内の動画なのでpage_locationの値を「/blog/」にする。

1. GA4管理画面 → 「イベント」 → 「カスタムイベントを作成」
2. 「イベント名」を video_play に設定
3. 「条件」に event_name = video_play を指定
パラメーター：event_name　演算子：次と等しい　値：video_play
4. 「パラメータ」に page_location（投稿ページのURL）を追加
パラメーター：page_location　演算子：次を含む　値：/blog/

contact form 7はサンクスページが無く、同じURLで送信完了となるためグーグルアナリティクスのコンバージョン設定が簡単にできなかった。
contact form7は最近のバージョンアップで、サンクスページが無くてもコンバージョンが計測できるようにイベントタグを公開した。これはGA4に対応したもので、従来のユニバーサルアナリティクスには非対応と思われる。

function.phpに記述

add_filter( 'wp_footer', function() {
  if ( is_page('contact')) {
  ?>
  <script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    gtag('event', 'Submit', {
      'event_category' : 'Form',
      'event_label' : 'contact'
    });
  }, false );
  </script>
  <?php
  }
} );

is_pageで指定したページのwp_footerでgtagが出力されるようになっている。
イベント名：Submit
イベントカテゴリー：Form
イベントラベル：contact

名前は自由っぽい

後はGA4側でイベントの設定を行う
GA4→設定→イベント→イベントを作成→作成（カスタムイベント）
上記のgtag設定より、カスタムイベント名（任意）を入力し、event_nameに「Submit」を入力
多分これだけでよい。反映に時間がかかる（一晩くらい）

設定が反映されるとイベントリストに表示されるので「コンバージョンとしてマークを付ける」をオンにする

GA4→設定→コンバージョン
設定が反映されるとコンバージョンイベントリストに表示されるので「コンバージョンとしてマークを付ける」をオンにする

従来のGoogleアナリティクス
グローバル サイトタグ（gtag.js）を使用して、アプリ + ウェブ プロパティの Google アナリティクス タグをサイトに追加する

<!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'MEASUREMENT_ID');
    </script>

この手法では複数のGoogle アナリティクス プロパティを追加することが可能

<script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID">
    </script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'MEASUREMENT_ID');
      gtag('config', 'MEASUREMENT_ID_2');
    </script>

新規で現行ユニバーサルアナリティクスを設定しGA4も導入する場合は、プロパティ作成時に「ユニバーサルアナリティクスプロパティの作成」のトグルを右にして青くすると、さらに設定画面が表示されここで「ウェブサイトのURL」を入力し、「Googleアナリティクス4とユニバーサルアナリティクスのプロパティを両方作成する」にチェックを入れる。

設定を進め、「タグ設定手順」下にある「グローバルサイトタグ(gtag.js)」をクリックすると、GA4用トラッキングコードが出てくるのでコピー。
次にUA用のプロパティをクリック、「トラッキング情報」－「トラッキングコード」を選択してトラッキングコードを表示させ、「 gtag(‘config’, ‘UA-XXXXXXX-Y’);」の部分のみをコピーしてGA4用のコードに貼り付ける。

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());gtag(‘config’, ‘G-XXXXXXXXXX’’);
gtag(‘config’, ‘UA-XXXXXXXX-Y’);
</script>

リファラスパムと呼ばれるアナリティクス管理者へのスパムの対策
参照元サイトのリンクをクリックすると海外の通販サイトや、意味不明なサイトへ誘導される。悪質なサイトへ飛ばされてしまう可能性もある。

対策としてはアナリティクスのフィルタで、これらのサイトを除外する
(続きを読む…)