coiai Logo

図解 初心者が 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 を使おうという記事がありますが、既に使われなくなった古い方法です。


公開

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

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

投稿日: 2024年9月7日
カテゴリ: SEO, おすすめ
タグ: GA4, Google, tag manager, WordPress
coiai

coiai

この記事もおすすめ

ポッドキャストを取った後Audiotionですべきこと

ポッドキャストを取った後Audiotionですべきこと

この記事はポッドキャストなどの音声コンテンツを取った後にAuditionで編集する方法について解説しています。 環境 やること 基本的に以下の4つの工程をすると、かなりクオリティアップにつながります! ノイズリダクション 無音部分を選択します。開始地点をi, 終わりをo キーを押すと選択できます。選択できたらエフェクト→ノイズリダクション/リストア→ノイズプリントをキャプチャを押します。 続いて、全体を選択します。cmd, a で全選択になります。エフェクト→ノイズリダクション/リストア→ノイズリダクションを選択します。 以下のようなパネルが表示されうので、ノイズのみをきたりして、削減ちを調整して、良い感じになったら適応ボタンを押します。 シングルバンドコンプレッサ 左のパネルのエフェクトトラックから▶️ボタンを押し、振幅と圧縮→シングルバンドコンプレッッサを選択します。 選択すると下記のようなパネルが開きます。それぞれ、 といった意味があります。設定値は下記画像のようにしています。 設定がめんどくさい場合はプリセットからラジオレベラーを選択してください。 EQ(声をクリアにする) パラメトリックイコライザーを使用します。エフェクト→フィルターとイコライザ→パラメトリックイコライザーを選択します。 私の場合は下記のように設定しています。 無音カット エフェクト→診断→無音をカットをすると左パネルに診断が表示されます。 効果を無音を削除、プリセットをポッドキャストにするとちょうどよくなると思います。設定したら、スキャンボタンを教えて、全て削除で無音がカットされます。 かなりカットされてしまうので、短いCM等に使うのはありかなという感じです。 参考 Adobe 無音カット https://helpx.adobe.com/jp/audition/using/strip-silence.html

MetaStore コンテンツ型のアプリ内課金を実装する

MetaStore コンテンツ型のアプリ内課金を実装する

MetaStoreのコンテンツ型のアプリ内課金を実装する方法についてです。 コンテンツを追加する 右上のアドオンを作成ボタンを押す。 アドオンタイプ 一度購入したら、それ以降は購入しない設定は耐久型を選びます。アプリ内のコインや石など、消耗品は消耗品を選びます。 価格設定 価格設定タブに進むとコンテンツの価格を設定できます。有料のコンテンツをまだ登録したことない場合は支払い情報の設定が住んでいないはずなので、支払い情報の設定が先に必要になります。 DUC データユーズチェックアップ 左メニューの必要条件の中のデータ使用状況の確認を開きます。 例えばIAPでユーザー認識が必要な場合は User ID, ユーザー名が必要な場合は User Profile の追加ボタンを押します。 何に使うかの用途と説明が求められるのでそこに使用用途を記述してください。 ここまで出来たらリクエストを送信ボタンを押します。 このようにデータの取り扱いについて質問されるので答えてください。英語で書いてあるので、なんとなく何が書いてあるか順番にさらっと説明します。 データの使用状況の確認 左サイドバーから必要条件⇒データ使用状況の確認をクリックします。 これが設定されていないと以下の文言のポップアップが表示されます。 読んでくださった方へ 株式会社coiaiでは、Quest向け、PCVR、Vision OS向けの開発も得意としています。新規開発ももちろん、開発途中でメンバーが必要といった場合でも請け負えますので、ご相談ください!

この記事を書いた会社

株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC(概念実証)、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。

商号株式会社 coiai創業2022年1月設立2025年1月23日資本金1,500,000円(設立時点)本社所在地東京都練馬区関町北 3-6-9代表者代表取締役 竹村 啓佑 / 代表取締役 服部 陽良

主なご相談内容

会社概要・役員紹介を見る

詳しい会社情報は会社概要ページでご覧いただけます。

資料請求・無料相談

導入要件のヒアリングからPoC、本番運用まで伴走します。まずはお気軽にご相談ください。

お問い合わせの前に 個人情報保護方針 をご確認ください。