タグ: tag manager

  • 図解 初心者が Google Tag Mnager の設定をする方法

    図解 初心者が Google Tag Mnager の設定をする方法

    これは何?

    初めて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つ

    • タグ
    • トリガー
    • 変数

    これを理解すれば十分扱えるようになります。

    タグとトリガーにはそれぞれ
    変数を設定することができます。

    GTMタグとトリガーと変数について

    タグ、トリガー、変数はそれぞれ、

    • 何をしたいか
    • いつするか
    • 正確には??

    を設定できます。

    タグとトリガーと変数の意味

    具体的には、

    • タグ
      • Googleアナリティクスを
    • トリガー
      • ページが開いたときに
    • 変数
      • 予約ページに遷移したか
      • 何秒スクロールできたか

    のように設定できます。

    タグマネージャータグとトリガーと変数の具体的な役割

    GA4との連携

    このセクション以降Googleアナリティクスとの連携にも触れますので、先にアナリティクスの設定もすませておいてください。
    https://analytics.google.com

    新しくタグを使いしましょう。

    タグのタブに移動して、左上の「新規」ボタンを押します。

    タグの設定をクリックします

    [Googleアナリティクス], [Googleタグ]の順番で選択していきます。

    タグIDにはアナリティクスのアカウントのタグIDをコピペしてください。

    測定IDは G- から始まる文字列です。

    タグIDはデータ[管理]の[データの収集と修正]で[データストリーム]をクリックすると、タグの設定内容が表示されます。

    これはアナリティクスの画面です。

    次にトリガーを押して、[initialization – All Pages]を選択します。

    All Pages を選択している記事もありますが、24年9月現在 initialization を選択するのが推薦です。

    できたら、名前を変更して、右上[保存]を押しましょう。

    これで完了です。

    Tag Assistant での確認

    右上プレビューから動作確認をしましょう。

    全てのページで Tag Assistant Connected になっていればOKです。

    GA4での確認

    次にGoogleアナリティクスの画面で確認します。

    GA4の画面を開いたら左のパネルから[⚙️管理]を選択します。

    下にスクロールすると、
    データの表示の中に[Debug View]の項目があります。
    これをクリックします。

    正しく実行できていれば、何時にトリガーが発火したかのログがここに記録されます。

    トリガーについて

    トリガーは発動(発火)条件のことです。
    どのタイミングで、データのカウントが行われるかを指します。

    トリガーの種類について

    トリガーには以下があります。
    箇条書きで簡単な内容をメモしました。
    (名前のままの動作のものは紹介を省略しています。)

    • ページビュー トリガー
      • ページが読み込まれた時
    • クリック トリガー
      • 全ての要素
        • リンク、画像、ボタンなど
      • リンクのみ
        • <a>タグなどのリンクの遷移のあるもののみ
    • 要素の表示トリガー
      • 選択した要素が、ユーザーに表示された際に発火
      • Id, Class タグに設定できる
    • フォーム送信トリガー
    • スクロール距離トリガー
      • ユーザーがどの程度スクロールしたかで発火
      • 縦方向、横方向に設定できる
    • YouTube動画トリガー
    • カスタムイベント トリガー
    • 履歴の変更
    • JavaScriptエラートリガー
    • タイマー トリガー
    • トリガー グループ

    参考:https://support.google.com/tagmanager/topic/7679108?sjid=14244337646739296041-AP


    テスト

    ワークスペース右上の「プレビュー」をクリックして、
    Google Tag Assistant を起動します。

    Chrome のプラグインの Tag Assistant を使おうという記事がありますが、既に使われなくなった古い方法です。


    公開

    ワークスペース右上の「公開」ボタンから、
    設定したものを本番環境に適応できます。

    バージョン管理機能もついています。

Home
About
Blog
Works
Contact