Googleタグマネージャの設置について

こんにちは、ZEROBASEの今村です。
今回は、ウェブサイトの管理をよりスムーズに行うための便利なツール「Googleタグマネージャー」の設置方法について詳しくご紹介します。初めての方でも分かりやすいように、各ステップを丁寧に解説していきますので、ぜひ最後までお読みください。

1. Googleタグマネージャーとは?

Googleタグマネージャー(Google Tag Manager、以下GTM)は、Googleが提供するタグ管理システム(TMS)です。ウェブサイトやモバイルアプリに設置することで、様々なタグ(例えばGoogleアナリティクスや広告タグなど)を一元管理し、コードの編集なしで追加・修正・削除ができる便利なツールです。

2. Googleタグマネージャーのメリット

  • タグ管理の効率化: 一度GTMを設置すれば、各種タグを直接HTMLに書き込む必要がなくなります。ウェブ開発者に依頼せずに、マーケティング担当者自身でタグの設定・管理が可能です。
  • エラーの軽減: GTMはタグの発火条件や順序を視覚的に管理できるため、設定ミスを防ぐことができます。また、プレビュー機能やデバッグ機能を使用して、タグが正しく動作しているかを確認することもできます。
  • サイトパフォーマンスの向上: タグを一元管理することで、サイトの読み込み速度が向上し、ユーザーエクスペリエンスを改善できます。

 

3. Googleタグマネージャーの基本機能

GTMには以下のような基本機能があります。

  • タグ(Tag): タグとは、GoogleアナリティクスやGoogle広告などの計測・マーケティングツールのスクリプトやコードを指します。GTMを使えば、これらのタグを容易に追加できます。
  • トリガー(Trigger): タグを発火させる条件を設定します。例えば、特定のページにアクセスした時やボタンがクリックされた時など、ユーザーのアクションに基づいて発火させることが可能です。
  • 変数(Variable): タグやトリガーの設定に使用する要素のことです。例えば、ページURLやクリックされたボタンのテキストなどを変数として設定できます。

 

4. Googleタグマネージャーの設置方法(詳細手順)

Googleタグマネージャーの設置には、アカウントの作成、コンテナの設定、タグの設置などの手順が含まれます。以下に、具体的な手順をステップごとに詳しく説明します。

ステップ1: アカウントとコンテナの作成

【Googleタグマネージャーにログインする

  • Googleタグマネージャーの公式サイトにアクセスし、Googleアカウントでログインします。
  • 初めてGTMを利用する場合、「タグマネージャーを使ってみる」というボタンをクリックします。

【新しいアカウントを作成する

  • 「アカウント名」の欄に、管理したいサイトや企業名を入力します。例:「Tenbikidou」
  • 「データの共有設定」で、Googleとデータを共有するかどうかを選択します(任意)。

【コンテナの作成】

  • 「コンテナ名」を入力します。通常、管理するサイトのドメイン名やサービス名を入れるのが分かりやすいです。例:「tenbikidou.jp
  • 「コンテナの使用場所」を選択します。ウェブサイト、iOS、Android、AMP(Accelerated Mobile Pages)から選択します。
  • ここでは、一般的な「ウェブサイト」を選択します。

【コンテナの作成を完了させる】

  • 「作成」をクリックすると、利用規約が表示されるので内容を確認し、「同意する」を選択します。

 

ステップ2: タグマネージャーコードの設置

【タグマネージャーのコードを取得】

  • コンテナを作成すると、すぐにGTMのインストール用コード(スニペット)が表示されます。このコードをウェブサイトに設置する必要があります。
  • 表示されるコードは2つです。
  • <head> タグ内に挿入するスクリプト
  • <body> タグの直後に挿入するノスクリプト(noscript)タグ

【コードをウェブサイトに追加する】

  • 取得したコードをコピーし、ウェブサイトのソースコードに貼り付けます。以下の手順を参考にしてください。

【HTMLファイルに設置する場合】

  • ウェブサイトのHTMLファイルを開きます。
  • <head> タグの直後に1つ目のスクリプトを貼り付けます。
  • 次に、<body> タグの直後に2つ目のノスクリプトタグを貼り付けます。
  • ファイルを保存し、サーバーにアップロードして反映させます。

【WordPressなどのCMSを利用している場合】

  • WordPressでは、テーマの「ヘッダー(header.php)」と「フッター(footer.php)」ファイルにコードを直接挿入するか、プラグインを使って設置する方法があります。
  • プラグインを利用する場合、例えば「Insert Headers and Footers」をインストールし、設定画面でGTMのスクリプトを追加します。

【コード設置後の確認】

  • コードを貼り付けたら、Googleタグマネージャーの管理画面に戻り、「送信」をクリックします。
  • 「コンテナのバージョン名」と「説明」を入力して、変更内容を保存します。これにより、GTMのコードがウェブサイトに正しくインストールされ、動作するようになります。

 

ステップ3: タグとトリガーの設定

【Googleアナリティクスのタグを設定する例】

  • GTMの管理画面で「新しいタグ」を選択し、「タグの設定」画面に進みます。
  • 「タグタイプを選択」をクリックし、一覧の中から「Google アナリティクス: ユニバーサル アナリティクス」を選択します。
  • 「トラッキングタイプ」を「ページビュー」に設定し、アナリティクスの「トラッキングID」を入力します。
  • トラッキングIDは、Googleアナリティクスの管理画面の「プロパティ設定」で確認できます。形式は UA-XXXXXX-Y です。

【トリガーを設定する】

  • 「トリガーを選択」をクリックし、「新しいトリガー」を作成します。
  • 「ページビュー」を選択し、すべてのページに対してトリガーを設定する場合は「All Pages」を選択します。
  • 設定が完了したら、「保存」をクリックします。

【プレビューで動作確認】

  • 設定したタグとトリガーが正しく機能しているかを確認するために、GTM管理画面の「プレビュー」ボタンをクリックします。
  • プレビューモードでは、実際にタグが発火しているかどうかを確認できます。ウェブサイトにアクセスし、画面下部にタグの発火状況が表示されれば成功です。

 

ステップ4: 設置内容の公開

【タグの公開】

  • 設定が完了したら、GTM管理画面の右上にある「送信」ボタンをクリックし、設定内容を公開します。
  • 「バージョンの作成」画面で、設定した内容のバージョン名と説明を入力し、「公開」をクリックします。

【動作の最終確認】

  • GTMの公開後、設定したタグが正常に動作しているか確認するために、Googleアナリティクスなどの管理画面にアクセスし、リアルタイムデータが表示されているかをチェックします。
  • 問題なくデータが送信されていれば、GTMの設定は完了です。

 

5. 設置におけるよくある質問とトラブルシューティング

 

【「タグが正しく動作しない」場合】

  • タグの設置位置やコードが正しく貼り付けられているか確認しましょう。特に、<head> タグと <body> タグの位置を間違えないよう注意が必要です。
  • トリガーの条件設定が正しいか確認します。設定ミスがあると、意図しないタイミングでタグが発火したり、全く発火しなかったりすることがあります。

【「プレビューモードでタグが表示されない」場合】

  • キャッシュが影響している可能性があるので、ブラウザのキャッシュをクリアしたり、シークレットモードで確認してみましょう。
  • また、インターネット接続が不安定な場合や、GTMのサーバー側で問題が発生している場合もあるので、時間をおいて再度試してみることをお勧めします。

まとめ

 

Googleタグマネージャーを正しく設置することで、サイト運営やマーケティングの効率化を図ることができます。手順を一つひとつ丁寧に行い、プレビューモードで確認しながら進めることが成功のポイントです。