WordPress

初心者も簡単!WordPressにGoogleタグマネージャーを設定する方法

サイト内のタグを一括管理できるツールとして、Google Tag Manager(タグマネージャー)があります。

便利そうだけど、ややこしそう…

そう思われる方のために、Googleタグマネジャーの登録方法やWordPressに設定する方法について分かりやすく解説しています。

Googleアナリティクスは使っているけどGTMはまだという方や、これからサイトを大きくしていきたい思っておられるブロガーの方などはぜひご確認ください。

 

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

Google Tag Manager(以下:GTM)は、サイト内に埋め込むタグを一括管理できるツールで、名前の通り、Googleが一定の機能を無料で提供しています。

サイトを運営していると、Googleアナリティクスなどの分析系タグやGoogle広告などの広告系タグなど、たくさんのタグを対象となるページに埋め込む(HTML編集する)ことが必要になってきます。

こうしたタグが増えてくると、どこにどんなタグを設置したのか分かりづらくなります。また、仕様変更があれば毎回各ページにあるタグを書きかえていく作業が生じます。考えるだけでも大変です。外注に出せばそれだけコストも時間もかかります。

こうしためんどくさいことはやめて、1つのタグ(GTM)だけ埋め込んで一括管理しましょう、というのが基本的な考えです。

イメージとしては、GTMというコンテナ(整理箱)の中に他のタグは全部入れて、このコンテナだけ埋め込んでおけばOKということです。

 

Googleタグマネージャーのメリット・デメリット

メリット

無料で高機能
とにかく無料で主要タグの大半を管理できるというのは魅力です。

Googleの他のツールとの相性が良い
Googleが提供するツールだけあって、Googleアナリティクスなどとの相性がとても良いのが特徴です。

管理画面が分かりやすい
Yahoo!タグマネージャーと比べると管理画面がシンプルで、やりたいことが分かりやすくなっています。

HTMLなどの専門知識がなくても設置が可能
サイトのHTMLを編集しなくても、管理画面上でタグの追加、修正が可能です。

変更履歴(バージョン)を残せる
いつ、どんな更新を行ったかについての変更履歴をバージョンとして記録しています。いつでもバックアップがとれているということです。

サイト読み込み速度が速くなる
GTMで管理しているタグは”非同期タグ”として処理されるため、読み込み速度が速くなることが期待できます。

 

デメリット

初心者の方にとっては使い方が複雑に思える
最初はどんなツールもそうですが、慣れるまではいくらか複雑に感じるかもしれません。初心者の方であればなおのことですね。

すべてのタグに対応しているわけではない
ほとんどのタグに対応しているものの、同期が必要なタグやSNSシュアボタンを生成するJavaScriptなどに対応していません。

GTMに不具合が生じた場合、関係するすべてのタグに影響がでる可能性がある
GTMですべてのタグを管理しているのでGTMそのものに何かトラブルが生じるなら、”道具箱内”のすべてのタグに影響が出ることが考えられます。しかし、そういうことはまず起こりません。

 

Googleタグマネージャーの設定手順

次の3つの手順で設定できます。

1.GTMの登録
2.WordPressへの設定
3.確認

 

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

 

Googleタグマネージャーの登録

公式サイトから登録していきます。

まず「無料で利用する」を選択してください。GTMのアカウント作成画面へ遷移します。

 

この時Googleアカウントへのログインが必要です。Google chromeの場合はすでにログインしているアカウントで設定が進んでいきます。GTMを登録する予定のアカウントになっているかどうか確認してください。右上(赤囲み)の部分から確認できます。

「アカウントを作成」をクリックします。

 

GTMのアカウント設定画面になります。

アカウントの設定

①アカウント名:
社名など分かりやすいものを入力します。

②国
ドロップダウンから選択します。

 

コンテナの設定

③コンテナ名
ドメインを設定することが一般的です。アカウント内に複数のコンテナを持つことができます。

④ターゲットプラットフォーム
ウェブサイトに設置するので、「ウェブ」を選択します。

 

すべてを入力(選択)し、最後に画面左下の⑤「作成」をクリックします。

 

利用規約が表示されます。確認して右上の「はい」を選択します。

次のポップアップが表示されます。

GTMの2つのタグが表示され、どこに貼り付けるべきかが示されています。今回はHTMLを編集する方法ではなく、より簡易的な方法をご紹介します。そのため、ここでは画面右下の「OK」をクリックしてください。

次のような画面に遷移します。

 

「ワークスペース」と呼ばれる編集用のページです。

画面上部に先程設定したアカウント名、コンテナ名が表示されていれば登録できています。そのすぐ下にはコンテナIDも表示されます。「GTM-  」で始まるIDです。

次の画面でも確認できます。画面左上(赤丸囲み)にある「←」をクリックすると表示されます。

 

ここには登録されているすべてのアカウント情報が載せられます。

 

WordPressサイトへの設定

無事にGTMを登録できたら、WordPressで作成したサイトへ設定していきます。

上述の通り、HTMLの編集(タグの貼り付け)を行わずにできる簡単な方法を取り上げます。

テーマを使用

Cocoonの場合:

無料のテーマCocoon(コクーン)の場合、コンテナIDを設定するだけです。

ダッシュボードの左メニュー「Cocoon設定」から「アクセス解析・認証」タグを選択します。「Googleタグマネジャ設定」内の「タグマネジャーID」欄に、先程のコンテナIDを入力します。最後に「変更をまとめて保存」をクリックするだけです。

最近ではテーマレベルでGTMに対応するものが出てきているのは嬉しいことです。

プラグインを使用

ネット上で紹介されているプラグインとして、以下のものがあります。

どちらもインストール後に有効化し、設定から該当箇所にコンテナIDを入力するだけです。

簡単ですが、最終更新が3年前だったり、日本語対応していないことなどを考えると、わたしはあまりお勧めできません。

 

確認

chromeの拡張機能「Tag Assistant」を利用して確認できます。

Tag Assistant(by Google)

 「chromeに追加」をクリックします。

拡張機能として追加されたアイコンをクリックします。この時にGTMを設定したサイトをchromeで開いた状態で行ってください。

右下の「Done」をクリックします。

「Enable」を選択し、その後サイトをリロードしてください。

画像のように表示されれば、無事に機能しています。コンテナIDも表示されていますので確認できます。

 

別の確認方法として、サイト内で右クリックし「ページのソースを表示」させる方法もあります。

正しく設定されているなら、<head>内と<body>直後にGTMタグが追加されていることが分かります。

画像は<body>直後にあるGTMタグです。

 

まとめ

いかがでしたか。

今回は初心者の方でも簡単にできるGoogleタグマネージャーの登録とWordPressサイトへの設定方法をご紹介してきました。基本的にHTMLを直接編集しないで行える方法だけをピックアップしました。

今後は登録できたGTMでGoogleアナリティクスを導入する方法をご紹介いたします。

今回もお付き合いいただきありがとうございました。

 

 

 

 

  • この記事を書いた人
  • 最新記事

Web Director

コアース・デザインのWebディレクターです。WordPressなどCMSでのホームページ制作やブログ運営にかかわるお役立ち情報を、初心者目線で発信していきます。

-WordPress

Copyright© コアース・デザインのブログ , 2021 All Rights Reserved.