More than 1 year has passed since last update.

Ateam Brides Inc.Advent Calendar 2021

@takaHALin

株式会社エイチームライフデザイン

ITP対策！ServerSide GTMでGA4の接続の検証してみる

Last updated at 2022-03-24Posted at 2021-12-07

Ateam Brides Inc. Advent Calendar 2021の8日目は
株式会社エイチームブライズエンジニア
新卒2年目になった@takaHALが担当します！

はじめに

前回のServerSide GTMをデプロイした後の続きになります。

GA4ではなくて

コンバージョンタグなどを利用したい方は以下の記事がおすすめです。

これは何?

https://qiita.com/takaHAL/items/38781b4f7d3f022508f1
前回のServerSide GTMをデプロイした後の続きになります。

今回作成するウェブコンテナとデプロイしたサーバコンテナを利用してGA4の接続確認
ウェブコンテナを使わずにサイトに直接gtagを入れて、サーバコンテナでGA4の接続確認

上記２パターンを書きます。

利用するもの

Google Tag Manager
Google Analytics
Netlify
- これはサイトのテストのためだけなのでなくても可
ServerSide GTM
- まだない方は前回作成したので作成お願いします
- https://qiita.com/takaHAL/items/38781b4f7d3f022508f1

サクッとサイトを用意する

ReactでもSvelteでもいいのですが今回はただ試したいだけなのでindex.htmlを作ってNetlifyにデプロイしてそれを利用します。

index.htmlが入ったフォルダをドラッグ&ドロップするだけでいいですからね

やり方に関しては下記を参考にするといいかもです。

index.html

<html>
  <head>

  </head>
  <body>
    <h1>サーバーサイドGTMテスト君</h1>
  </body>
</html>

人生でこんなに質素なhtmlファイルを書いたのは何気に初めてですw

というわけでサイトを用意できたのでGA4とか設定していきますか

GA4の準備

プロパティを作成

管理からプロパティ作成画面へ移ります

詳細オプションはいじらずに作成していただければOKです。

データストリームを作成

これでGA側の設定は終わりです。測定IDに関してはあとで使うので控えておきましょう。

ウェブコンテナを使用しない方はこちら

ウェブコンテナを利用して検証する

1. ウェブコンテナをGTMに用意する

コンテナを作成

作成が完了するとサイトに埋め込むスクリプトが出てくるのでhtmlに追記します。

スクリプトを埋め込む

取得したスクリプトをheadとbodyの下に添付してください

index.html

<html>
  <head>
    <!-- Google Tag Manager -->
    <script>
      (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
          'gtm.start': new Date().getTime(),
          event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-EXAMPLE');
    </script> <!-- End Google Tag Manager -->
  </head>

  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-EXAMPLE" height="0" width="0"
        style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <h1>サーバーサイドGTMテスト君</h1>
  </body>
</html>

2. サーバー側GTMの設定

前回作成したサーバーのGTMで作業をします。

クライアントにウェブコンテナを追加する

Google タグマネージャー　ウェブコンテナを選択して、許可されたコンテナIDに先程作成したウェブコンテナのIDを入れて保存します。

GA4のタグを追加する

クライアントの設定

クライアントのGA4で有効化の条件で以下にチェックを入れる

デフォルトのGA4パス
特定ID向けのデフォルトのgtag.jsパス

特定ID向けのデフォルトのgtag.jsパスには作成したGA4の測定IDを入れる

タグの設定

タグから新規作成でGoogle　アナリティクス: GA4を選択し、GA4の設定時に生成された測定IDを設定します

トリガーの選択でAll Pagesを選択して保存でOKです

このまま公開したら完了です。

3. ウェブコンテナからGA4のタグを配信する設定をする

ここからは作成したウェブコンテナに設定を移ります

タグの作成から Google アナリティクス: GA4設定を選択し、今回作ったGA4の測定IDと前回GAEにデプロイしたServerSide GTMのURLを設定します。

トリガーをAll Pagesに設定して保存でOKです。

このまま公開したら完了です。

4. GA4の確認

サイトにアクセスしてリアルタイムでユーザーが表示されるか確認する

GTMのプレビューでも発火を確認する

ウェブコンテナを使用しない方はこちら

サイトのスクリプトを設置する

作成したデータストリームから新しいタグを追加で表示させるスクリプトを設置する

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

      gtag('config', 'G-EXAMPLE');
    </script>
  </head>

  <body>
    <h1>サーバーサイドGTMテスト君</h1>
  </body>
</html>

この状態から送信先をサーバーコンテナに変えます

こちらでデプロイしたURLを利用します。

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

-      gtag('config', 'G-EXAMPLE');
+      gtag('config', 'G-EXAMPLE', {
         transport_url: 'デプロイしたURL',
       });
    </script>
  </head>

  <body>
    <h1>サーバーサイドGTMテスト君</h1>
  </body>
</html>

この状態でNetlifyにデプロイします。