カテゴリー: SEO

  • WordPress にGoogle Tag Mnager を設定する方法

    WordPress にGoogle Tag Mnager を設定する方法

    Google Tag Mnagerこれは何?

    WordPress にGoogle Tagmanager (GTM)を設定する方法についてです。

    サードパーティー製のプラグインの使用やコードをいじる必要はありません!

    この記事は2024年9月現在の仕様です。

    Tag Mnager の設定手順

    WordPressの管理画面に入り、
    Google Site Kit プラグインを有効化しましょう。

    SiteKitを有効化すると、Goolgleアカウントの連携についての画面が開きますので、アカウントを設定して、指示に従って進めます。

    設定が完了すると、ダッシュボードが開きます。

    設定当日から1-2日はダッシュボードが空白だと思いますが、準備が完了するとデータが見られるようになります。

    管理画面 Site Kit のダッシュボード

    プラグインの有効化ができたら、左サイドメニューの Site Kitの下に [設定]の項目があるので、そちらをクリックします。

    Connected Services, Connect More Services, Admin Settings という3つのタブがあるので、
    [Connect More Services]を押します。

    ここで[Set up タグマネージャー]ボタンを押します。
    タグマネージャのアカウントを今まで設定したことがなければ[Create an account]を押しましょう。

    そうすると新しいタブで https://tagmanager.google.com にアクセスされるはずです。

    アカウント名、国を入力します。

    コンテナセットアップの項目は

    • コンテナ名 → 自分のサイトの名前
    • ターゲットプラットフォーム → Web

    を入力、選択しましょう。

    入力したら[Create]ボタンを押して、利用規約に同意します。

    設定が完了すると、 Install Google Tag Mnager のポップアップが表示されますが、今回はWordPressを使うので閉じて大丈夫です。

    ここまできたら、またWordPressの管理画面に戻ります。

    SiteKitの設定のページに移動すると、[Complete setup for Tag Mnager]のボタンが表示されているので押します。

    そしたら先ほど制作した、アカウント名とコンテナ名が選択できるので選択肢、[Complete setup]ボタンを押しましょう。

    これでWordPressに設定が完了しました。

    まとめ

    以上WordPressにTagMnagerを設定する方法でした。

    ここまでで設定が完了したのですが、タグマネージャーを使いこなすにはGoogleアナリティクスとの連携やボタン押下のトラッキングを設定する必要があります。

    それについては別記事で解説しているので見てみてください。

  • 図解 初心者が 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