PR

【Googleタグマネージャーの使い方】24枚の画像で徹底解説!

この記事で解決できるお悩み
  • Googleタグマネージャーって何に使うの?
  • アドセンスとかアドセンスとか、貼り付けるコードが多くて管理が大変
  • Googleタグマネージャーを使ってみたいけど、難しそう

こんなお悩みを解決します。

この記事ではサイト運営をより効率よく楽にしてくれるGoogleタグマネージャーの使い方について解説。

前半ではGoogleタグマネージャーの簡単な仕組みを解説し、その次に各手順で画像を使いながら詳細に使い方を解説していきます。

記事のとおりに進めるだけでタグマネージャーを使えるようになるので、ぜひ最後まで頑張りましょう!

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

Googleタグマネージャーとは、サイトに貼り付ける様々なタグをひとまとめにして管理を簡単にするためのツールです。

頭文字を取って【GTM】ともよく言われます。

大まかな仕組みのイメージとしてはこんな感じ。

GTMの仕組み
  1. 【コンテナ】と呼ばれる箱の中に、サイトに設置したいタグを詰め込む
  2. 【コンテナ】と呼ばれる箱のタグ一つをサイトに設置する
  3. 箱の中身全てのタグが有効になる

例えばブログを運営する上で、多くのブロガーが設置するタグと言えば下記2つ。

  • Googleアナリティクス(アクセス解析ツール)
  • Googleアドセンス(クリック型報酬広告)

これらを普通に設置するならそれぞれのタグをサイトに設置する必要があります。

しかしGoogleタグマネージャーでまとめて管理しておけば、設置するタグはGoogleタグマネージャーのタグ一つで済むため、管理が楽になります。

アカウント・コンテナを作成

Googleタグマネージャを初めて使う場合は初期設定が必要です。

以下手順どおりに進めてください。

GTM初期設定

画像赤枠内をクリック。


GTMアカウント追加
  • アカウント名:お好みのアカウント名を付けてください
  • 国:利用国を選択してください
  • コンテナ名:コンテナは今後複数作成する可能性もあるため、区別しやすいように分かりやすく付けてください。
  • ターゲットプラットフォーム:【ウェブ】を選択

GTMアカウント利用規約
  1. 左下のチェックマークを付けてデータ処理規約に同意
  2. 右上『はい』をクリックしてGoogle タグマネージャーの利用規約に同意

GTMコード表示

画像の通りコードが表示されたら、アカウントとコンテナの作成が完了です。

表示されたコードは閉じずにそのまま次の項目に進んでください。

コードの表示をもし閉じてしまった場合は、以下画像赤枠内のタグIDをクリックすると再度表示することができます。

GTMコード再表示

Webサイトにコード貼り付け

作成されたコンテナの専用コードをWebサイト構成ファイル(header.php)の指定された箇所に設置する(貼り付ける)ことで、コンテナ内に登録する各タグが有効になります。

Webサイトにコードを設置する方法は以下3つ。

  1. テーマに用意された入力欄
  2. プラグイン
  3. header.phpに直接入力

上から難易度が低い順になっています。

順に解説していきますね。

Googleタグマネージャーは閉じずに、ブラウザの別タブでブログを開いてください。

テーマに用意された入力欄

最も簡単な設置方法。

無料テーマの【cocoon】を使って解説します。

GTMコードをcocoonに設置

WordPress管理画面メニューから【Cocoon設定 – アクセス解析・認証】へ進みます。

『Googleタグマネージャ設定 – タグマネージャID』に、以下画像を参考にタグマネージャコード内のIDを入力。

GTM-ID

入力したら『変更をまとめて保存』をクリックで完了です。

プラグイン

Googleが開発・提供しているWordPress用無料プラグイン『Site Kit by Google』を利用します。

テーマに入力欄が用意されてなければ、プラグインを利用するかheader.phpに直接入力する必要がありますが、個人的におすすめなのは『header.phpに直接入力』です。

プラグインを使うとサイト表示速度が遅くなってしまうため、SEO対策の観点からできればheader.phpに直接入力する方をお勧めします。

ただ、直接入力はちょっとだけ難易度が上がるため、「SEOのことよりも何も考えずちゃちゃっと済ませたい」という方に限りプラグインを使ってください。

当記事では『Site Kit by Google』の導入手順は割愛します。

header.phpに直接入力

『header.php』ファイルに直接入力するには、2つの方法があります。

  • サーバーにFTP接続して直接編集
  • WordPress管理画面から編集

今回は簡単な方法『WordPress管理画面から編集』で解説していきます。

【サーバーにFTP接続して直接編集】をしたい場合は『【FTPの使い方】サーバー接続方法を【28枚の画像で解説】』を参考にFTP接続をして対象ファイルを編集してください。

GTM-ID

WordPress管理画面メニューから【外観 – テーマエディター】へ進み、右側の項目から『テーマヘッダー(header.php)』をクリック。

セキュリティプラグインを利用している場合、テーマエディタが見えなくなっていることがあるので、あらかじめ無効化しておきましょう。

この中の「<head>」「<body>」の直後に先程Googleタグマネージャーで表示された各コードを設置していきます。

Cocoonなどの【子テーマ】を使用している場合

子テーマの場合は基本的に「header.php」というファイルではなく、テーマ制作者によって【head-insert.php】や【header-insert.php】、【body-top-insert.php】というファイル名で別途用意されています。

ファイル名はテーマ制作者によって異なるため、今回はCocoonを例に解説していきます。

その他テーマを利用している方は該当のファイルを探して適宜修正してください。


GTM-headタグ設置コードコピー

Googleタグマネージャーに戻ってまずは上段のコードをコピー(コード右上のマークをクリックするとコピーできます)。

説明に『このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。』と記載されてるので、説明どおりに設置します。


<head>タグの下に、コピーしておいたコードを貼り付けます。

Cocoon子テーマの場合
GTM-headタグをCocoon子テーマに設置

右側のテーマファイルから 【tmp-user – head-insert.php】を探します。

アナリティクスやアドセンス等は管理者以外を計測・表示すればいいので、『//管理者を除外してカウントする場合は以下に挿入』の下の赤枠内に設置。

区別なく設置したい場合は青枠内に設置してください。

他の行の余白に合わせて見た目を整えたい場合は、寄せたい行を全て選択して『Tabキー』を押してください。

コードをタブキーで寄せる

GTM-bodyタグ設置コードコピー

Googleタグマネージャーに戻って次に下段のコードをコピー(コード右上のマークをクリックするとコピーできます)。

説明に『開始タグ <body> の直後にこのコードを次のように貼り付けてください。』と記載されてるので、説明どおりに設置します。


GTM-bodyタグを設置

<body>タグの下に、コピーしておいたコードを貼り付けます。

Cocoon子テーマの場合
GTM-bodyタグをCocoon子テーマに設置

右側のテーマファイルから【tmp-user – body-top-insert.php】を探します。

アナリティクスやアドセンス等は管理者以外を計測・表示すればいいので、『//管理者を除外してカウントする場合は以下に挿入』の下の赤枠内に設置。

区別なく設置したい場合は青枠内に設置してください。


コードを貼り付けたら最後に【ファイルを更新】をクリックして、コードの設置は完了です。

あとはGoogleタグマネージャーに様々なタグを登録することで、コードを設置した箇所で自動的に各タグが有効になります。

トリガーを作成

トリガーとは『きっかけ』を意味し、『●●がされたら▲▲をする』という「●●」の設定のこと。

つまり、「サイト内で何をされた時にタグを有効にするか」というきっかけになる設定を作ります。

例えばアナリティクスのアクセス解析を例にすると、「ページを見られた時にアクセス解析を発動する」という流れになりますが、この「ページを見られた時」というきっかけを設定するのが「トリガー」の作成です。

アクセス解析用のトリガーは元々作られているため、実際には追加で作成する必要はありません。
特殊な計測など応用して使いたい場合にのみトリガーを追加作成します。
トリガーを有効活用した応用編は『特定リンクのクリック回数をカウントする方法【42枚の画像で解説】』をご確認ください。

タグを作成

次は実際に動作させたいタグを作ります。

先程作成したトリガーと組み合わせることで「●●(トリガー)が発生したら▲▲(タグ)を実行する」という動作が可能になります。

アナリティクスのアクセス解析を想定して解説していきますね。

GTM-タグ

左メニューから【タグ】へ進んで「新規」をクリック。


GTM-タグ作成

分かりやすいようにタグの名前を付けてください。

今回はアナリティクスのアクセス解析用タグを作るので、「アナリティクス-UA」と付けました。

名前を入力したら大きい赤枠内(タグの設定)をクリック。

UAとは旧アナリティクス「ユニバーサルアナリティクス」の略。新アナリティクスを利用している場合は「アナリティクス-GA4」という名前にしておくと分かりやすいですね。


GTM-タグ設定-『Googleアナリティクス:ユニバーサルアナリティクス』を選択

『Googleアナリティクス:ユニバーサルアナリティクス』を選択。


GTM-タグ設定-アナリティクスID設定

【このタグでオーバーライド設定を有効にする】にチェックを入れ、アナリティクスのトラッキングIDを入力してください。

入力したら大きい赤枠内(トリガー)をクリック。


GTM-タグ設定-トリガー選択

【All Pages】を選択。


GTM-タグ設定-保存

【保存】をクリックでタグの設定は完了です。

タグを公開

タグを作成したら最後に【公開】して完了です。

【公開】というのは、言い換えると作成したタグを有効にするということ。

タグを作成しても最後に【公開】をしてなければ、作成したタグはサイトに設置してあるコードに反映されないので注意してください。

GTM-公開

右上の【公開】をクリック。


GTM-公開設定
  • バージョン名:変更履歴(公開履歴)が分かりやすいように名前を付けてください。
  • バージョンの説明:簡易説明を入力してください。

それぞれ入力したら右上の【公開】をクリック。

以上でGoogleタグマネージャーを使ったタグの設置は完了です!

まとめ:Googleタグマネージャーの使い方

最後に、ご紹介した内容をおさらいしておきましょう。

Googleタグマネージャーの使い方
  1. Googleタグマネージャーとは、複数のタグを一つにまとめるためのツール
  2. コンテナと呼ばれる箱の中に、複数のタグを設定しておく
  3. コンテナのコードをサイトに設置すると、コンテナの中にある複数のタグが有効になる

ご紹介した内容を実践したなら、今よりも効率よくアナリティクスやアドセンスのタグを管理することができるようになったはず。

ブログ運営が長くなるに連れて様々な検証がしたくなったり、他サービスのタグを設置する必要がでてきた時、Googleタグマネージャーを使っているとかなり助かります。

最初のうちはアナリティクスとアドセンスぐらいなのであまり実感がないかも知れませんが、最初のうちから使いこなせるようになっておきましょう。

ブログがうまく書けなくてお困りの方は『意識してますか?読みやすいブログ記事を書くための【5つのポイント】』を参考にしてみてください。

各記事にあるclipをクリックすることで、あとからもう一度読みたい記事をクリップ一覧にまとめておくことができます。

 

 

▼ コメント ▼

タイトルとURLをコピーしました