SVG IconNextTech

#7 ドキュメント通りにGoogleタグ設定したのにエラーが出る!

  • next.js
  • GTAG

GTM(Googleタグマネージャー)の設定方法

GTM(Googleタグマネージャー)の設定方法について解説します。

  1. GTMアカウントの発行
  2. GTMコードをページに埋め込む
  3. タグ・トリガーの設定
  4. 右上の「公開」を押下

それぞれ詳しく解説していきます。

1. GTMアカウントの発行

まずはGTMアカウントを発行しましょう。

  1. Googleタグマネージャーのサイトにアクセス
  2. 「無料で利用する」をクリック
  3. 「アカウント作成」をクリック
  4. 必要項目を入力
    • アカウント名
    • コンテナ名(URL)
    • コンテナの使用場所(ウェブ・アプリなどを選択)
  5. 「作成」をクリック

これでGTMアカウントの発行は完了です。

2. GTMコードをページに埋め込み

アカウントの作成後、いよいよGTMコードをページに埋め込みます.私はここで少し躓きました.以前書いたこちらの記事を参考にしてください.

参考にした記事はこちら

3. タグ・トリガーの設定

続いては、タグ・トリガーの設定をしましょう。

  1. ワークスペース内の「タグ」で新規作成をクリック
  2. タグの編集マーク(鉛筆マーク)を押し、目的に合ったタイプを選択
  3. トリガーの編集マークを押し、目的に合ったタイプを選択

トリガーはワークスペース内の「トリガー」で新規追加・編集が可能です。
タグを発火させたい条件を登録しましょう。

4. 右上の「公開」を押下

タグ・トリガーを設定しても、右上の「公開」を押さないとサイトに反映されません。

  1. 公開前にプレビューで確認
    • 表示崩れがないか
    • 動作は機能するか
  2. 問題がなければ公開

GTM(Googleタグマネージャー)の設定チェック

こちらからのサイトから自身が運営するブログのドメインを入力することで正しく設定されているか確認することができます.私はここで以下のようなエラーが発生しました.

原因としては私が使っているブラウザArcにありました.このArcにデフォルトで設定されている広告ブロックが悪さしていたようです.そのため私はChromeで同様にアクセスしたところちゃんとタグが設定されていることを確認できました.