初めてGoogle Tag Mnager を実装する方向けの記事です。
GTMを設定することでGoogleアナリティクスと連携して、
サイトの訪問者がどこからきたのか、オーガニックサーチなのかTwitter, FacebookなどのSNSなのか、有料広告からなのか、といった流入元の追跡ができます。
また、ユーザーのページ遷移をグラフィカルに分析することも可能です。
この記事ではGTMとは何か?前提から設定方法まで図解でわかりやすく、順を追って解説します。
この記事は2024年9月時点で最新の情報です。
グーグルタグマネージャーでは、
Webサイトに埋め込まれたボタンのクリックや、
他サイトからの遷移、スクロールのデータを収集できます。
1つのGoogleアカウントに
プロジェクトごとにGTMアカウントを作れます。
コンテナはサービスごとに作成するのが良いでしょう。
まずはタグマネージャーにアクセスします。
https://tagmanager.google.com
サイトにアクセスしたらアカウントを作成します。
Googleアカウントをお持ちでしたら、手こずることはないでしょう。
コンテナはトラッキングコードを管理するバケツのようなものです。
コンテナは通常サービスひとつに付き作成するものです。
基本的に一つのドメインに1コンテナ作成します。
このコンテナのひとまとまりで、タグを設定していきます。
WordPressをお使いの場合は、
Google Site Kit のプラグインを使うのが最も簡単でしょう。
WordPressの管理画面から Site Kit / Settings の順番にボタンを押していくと、設定の項目が出ると思います。
詳しい設定方法はこちらの記事で解説しました。
他サイトで他のプラグインを使う手段が紹介されていますが、
24年9月現在WordPressユーザーはGoogle公式のSiteKitを使うのが英断です。
その他のフレームワークをお使いの方は、
Google Tag Mnager に最初に登録したときに、head, body に書くべきものの指示があるので、そちらに従ってください。
最初のポップアップを消してしまった方は、
ワークスペースの画面右上に GTMから始まるIDが書いてあります。
そちらをクリックすると、設定方法のポップアップが再度開きます。
正しく設定できたかの確認は、
右上の「プレビュー」ボタンを押下すると、
別ページが立ち上がり、出てきたURLに対してOKを押すと、
自社サイトが立ち上がり、右下に次のようなポップアップが出ているはずです。
Tag Assistant Connected とあれば正常に動作しています。
次のセクションから具体的な使い方を解説します。
タグマネージャーを使いこなすには基本的に以下の3つ
これを理解すれば十分扱えるようになります。
タグとトリガーにはそれぞれ
変数を設定することができます。
タグ、トリガー、変数はそれぞれ、
を設定できます。
具体的には、
のように設定できます。
このセクション以降Googleアナリティクスとの連携にも触れますので、先にアナリティクスの設定もすませておいてください。
https://analytics.google.com
新しくタグを使いしましょう。
タグのタブに移動して、左上の「新規」ボタンを押します。
タグの設定をクリックします
[Googleアナリティクス], [Googleタグ]の順番で選択していきます。
タグIDにはアナリティクスのアカウントのタグIDをコピペしてください。
測定IDは G- から始まる文字列です。
タグIDはデータ[管理]の[データの収集と修正]で[データストリーム]をクリックすると、タグの設定内容が表示されます。
次にトリガーを押して、[initialization – All Pages]を選択します。
All Pages を選択している記事もありますが、24年9月現在 initialization を選択するのが推薦です。
できたら、名前を変更して、右上[保存]を押しましょう。
これで完了です。
右上プレビューから動作確認をしましょう。
全てのページで Tag Assistant Connected になっていればOKです。
次にGoogleアナリティクスの画面で確認します。
GA4の画面を開いたら左のパネルから[⚙️管理]を選択します。
下にスクロールすると、
データの表示の中に[Debug View]の項目があります。
これをクリックします。
正しく実行できていれば、何時にトリガーが発火したかのログがここに記録されます。
トリガーは発動(発火)条件のことです。
どのタイミングで、データのカウントが行われるかを指します。
トリガーには以下があります。
箇条書きで簡単な内容をメモしました。
(名前のままの動作のものは紹介を省略しています。)
参考:https://support.google.com/tagmanager/topic/7679108?sjid=14244337646739296041-AP
ワークスペース右上の「プレビュー」をクリックして、
Google Tag Assistant を起動します。
Chrome のプラグインの Tag Assistant を使おうという記事がありますが、既に使われなくなった古い方法です。
ワークスペース右上の「公開」ボタンから、
設定したものを本番環境に適応できます。
バージョン管理機能もついています。