- Googleタグマネージャーって何に使うの?
- アドセンスとかアドセンスとか、貼り付けるコードが多くて管理が大変
- Googleタグマネージャーを使ってみたいけど、難しそう
こんなお悩みを解決します。
この記事ではサイト運営をより効率よく楽にしてくれるGoogleタグマネージャーの使い方について解説。
前半ではGoogleタグマネージャーの簡単な仕組みを解説し、その次に各手順で画像を使いながら詳細に使い方を解説していきます。
記事のとおりに進めるだけでタグマネージャーを使えるようになるので、ぜひ最後まで頑張りましょう!
Googleタグマネージャーとは?
Googleタグマネージャーとは、サイトに貼り付ける様々なタグをひとまとめにして管理を簡単にするためのツールです。
頭文字を取って【GTM】ともよく言われます。
大まかな仕組みのイメージとしてはこんな感じ。
- 【コンテナ】と呼ばれる箱の中に、サイトに設置したいタグを詰め込む
- 【コンテナ】と呼ばれる箱のタグ一つをサイトに設置する
- 箱の中身全てのタグが有効になる
例えばブログを運営する上で、多くのブロガーが設置するタグと言えば下記2つ。
- Googleアナリティクス(アクセス解析ツール)
- Googleアドセンス(クリック型報酬広告)
これらを普通に設置するならそれぞれのタグをサイトに設置する必要があります。
しかしGoogleタグマネージャーでまとめて管理しておけば、設置するタグはGoogleタグマネージャーのタグ一つで済むため、管理が楽になります。
アカウント・コンテナを作成
Googleタグマネージャを初めて使う場合は初期設定が必要です。
以下手順どおりに進めてください。
画像赤枠内をクリック。
- アカウント名:お好みのアカウント名を付けてください
- 国:利用国を選択してください
- コンテナ名:コンテナは今後複数作成する可能性もあるため、区別しやすいように分かりやすく付けてください。
- ターゲットプラットフォーム:【ウェブ】を選択
- 左下のチェックマークを付けてデータ処理規約に同意
- 右上『はい』をクリックしてGoogle タグマネージャーの利用規約に同意
画像の通りコードが表示されたら、アカウントとコンテナの作成が完了です。
表示されたコードは閉じずにそのまま次の項目に進んでください。
Webサイトにコード貼り付け
作成されたコンテナの専用コードをWebサイト構成ファイル(header.php)の指定された箇所に設置する(貼り付ける)ことで、コンテナ内に登録する各タグが有効になります。
Webサイトにコードを設置する方法は以下3つ。
- テーマに用意された入力欄
- プラグイン
- header.phpに直接入力
上から難易度が低い順になっています。
順に解説していきますね。
テーマに用意された入力欄
最も簡単な設置方法。
無料テーマの【cocoon】を使って解説します。
WordPress管理画面メニューから【Cocoon設定 – アクセス解析・認証】へ進みます。
『Googleタグマネージャ設定 – タグマネージャID』に、以下画像を参考にタグマネージャコード内のIDを入力。
入力したら『変更をまとめて保存』をクリックで完了です。
プラグイン
Googleが開発・提供しているWordPress用無料プラグイン『Site Kit by Google』を利用します。
テーマに入力欄が用意されてなければ、プラグインを利用するかheader.phpに直接入力する必要がありますが、個人的におすすめなのは『header.phpに直接入力』です。
プラグインを使うとサイト表示速度が遅くなってしまうため、SEO対策の観点からできればheader.phpに直接入力する方をお勧めします。
ただ、直接入力はちょっとだけ難易度が上がるため、「SEOのことよりも何も考えずちゃちゃっと済ませたい」という方に限りプラグインを使ってください。
header.phpに直接入力
『header.php』ファイルに直接入力するには、2つの方法があります。
- サーバーにFTP接続して直接編集
- WordPress管理画面から編集
今回は簡単な方法『WordPress管理画面から編集』で解説していきます。
WordPress管理画面メニューから【外観 – テーマエディター】へ進み、右側の項目から『テーマヘッダー(header.php)』をクリック。
この中の「<head>
」「<body>
」の直後に先程Googleタグマネージャーで表示された各コードを設置していきます。
Googleタグマネージャーに戻ってまずは上段のコードをコピー(コード右上のマークをクリックするとコピーできます)。
説明に『このコードは、次のようにページの <head>
内のなるべく上のほうに貼り付けてください。』と記載されてるので、説明どおりに設置します。
<head>
タグの下に、コピーしておいたコードを貼り付けます。
他の行の余白に合わせて見た目を整えたい場合は、寄せたい行を全て選択して『Tabキー』を押してください。
Googleタグマネージャーに戻って次に下段のコードをコピー(コード右上のマークをクリックするとコピーできます)。
説明に『開始タグ <body>
の直後にこのコードを次のように貼り付けてください。』と記載されてるので、説明どおりに設置します。
<body>
タグの下に、コピーしておいたコードを貼り付けます。
コードを貼り付けたら最後に【ファイルを更新】をクリックして、コードの設置は完了です。
あとはGoogleタグマネージャーに様々なタグを登録することで、コードを設置した箇所で自動的に各タグが有効になります。
トリガーを作成
トリガーとは『きっかけ』を意味し、『●●がされたら▲▲をする』という「●●」の設定のこと。
つまり、「サイト内で何をされた時にタグを有効にするか」というきっかけになる設定を作ります。
例えばアナリティクスのアクセス解析を例にすると、「ページを見られた時にアクセス解析を発動する」という流れになりますが、この「ページを見られた時」というきっかけを設定するのが「トリガー」の作成です。
タグを作成
次は実際に動作させたいタグを作ります。
先程作成したトリガーと組み合わせることで「●●(トリガー)が発生したら▲▲(タグ)を実行する」という動作が可能になります。
アナリティクスのアクセス解析を想定して解説していきますね。
左メニューから【タグ】へ進んで「新規」をクリック。
分かりやすいようにタグの名前を付けてください。
今回はアナリティクスのアクセス解析用タグを作るので、「アナリティクス-UA」と付けました。
名前を入力したら大きい赤枠内(タグの設定)をクリック。
『Googleアナリティクス:ユニバーサルアナリティクス』を選択。
【このタグでオーバーライド設定を有効にする】にチェックを入れ、アナリティクスのトラッキングIDを入力してください。
入力したら大きい赤枠内(トリガー)をクリック。
【All Pages】を選択。
【保存】をクリックでタグの設定は完了です。
タグを公開
タグを作成したら最後に【公開】して完了です。
【公開】というのは、言い換えると作成したタグを有効にするということ。
タグを作成しても最後に【公開】をしてなければ、作成したタグはサイトに設置してあるコードに反映されないので注意してください。
右上の【公開】をクリック。
- バージョン名:変更履歴(公開履歴)が分かりやすいように名前を付けてください。
- バージョンの説明:簡易説明を入力してください。
それぞれ入力したら右上の【公開】をクリック。
以上でGoogleタグマネージャーを使ったタグの設置は完了です!
まとめ:Googleタグマネージャーの使い方
最後に、ご紹介した内容をおさらいしておきましょう。
- Googleタグマネージャーとは、複数のタグを一つにまとめるためのツール
- コンテナと呼ばれる箱の中に、複数のタグを設定しておく
- コンテナのコードをサイトに設置すると、コンテナの中にある複数のタグが有効になる
ご紹介した内容を実践したなら、今よりも効率よくアナリティクスやアドセンスのタグを管理することができるようになったはず。
ブログ運営が長くなるに連れて様々な検証がしたくなったり、他サービスのタグを設置する必要がでてきた時、Googleタグマネージャーを使っているとかなり助かります。
最初のうちはアナリティクスとアドセンスぐらいなのであまり実感がないかも知れませんが、最初のうちから使いこなせるようになっておきましょう。
ブログがうまく書けなくてお困りの方は『意識してますか?読みやすいブログ記事を書くための【5つのポイント】』を参考にしてみてください。
▼ コメント ▼