中小企業診断士の試験、マーケティング、動画制作、地域の魅力について記録を残しています

WordPressでGoogleタグマネージャーを導入する方法と3つのメリットを解説

WordPressでGoogleタグマネージャーを導入する方法と3つのメリットを解説

こんにちは!グシオです!

以前投稿した『【2022年最新】ホームページの分析・改善に使えるオススメ無料ツール』でホームページの改善に使える無料ツールをいくつか紹介しました。そのなかでGoogleタグマネージャーについても触れましたが今回はこのGoogleタグマネージャーについて詳しくお話しします。

Googleタグマネージャーは初見だと使い方がややこしいのですが、ある程度使い方を理解するとWebマーケティングの業務効率化にかなり役立つオススメのツールです。中小企業でWebマーケティングを担当することになった方はもちろん、中小企業支援をしている中小企業診断士・経営コンサルの方もクライアントへの提案に使えると思います。

今回は中小企業の多くが利用していると思われるWordPress(以下、ワードプレス)で作成したホームページにGoogleタグマネージャーを導入する方法を解説したいと思います。

関連記事:『WordPressで無料のヒートマップ「Clarity」を導入する方法と3つの特徴

そもそもGoogleタグマネージャーってなに?

Googleタグマネージャー公式ホームページ
Googleタグマネージャー公式ホームページ

Googleタグマネージャーはタグをコード編集なしで一元管理できる無料ツールです。タグというのは、簡単に言うとGoogleアナリティクスなどのツールを使えるようにするためにホームページに埋め込むプログラミングコードのことです。

たとえば、Googleアナリティクスでホームページのデータを分析したい場合、以下のようなコードをウェブページの<HEAD>内に記載する必要があります。分析したいすべてのページに記載が必要なので中々面倒くさいです。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX');
</script>

Googleアナリティクスだけならまだいいのですが、Google広告をやる場合は①コンバージョンリンカータグ ②リマーケティングタグ ③コンバージョンタグという3つのタグを利用します。その他にもGoogleオプティマイズやヒートマップツールなどホームページを分析・改善するうえで欠かせないツールのタグを埋め込まなければいけない状況も少なくありません。

たくさんのタグをいちいちプログラミングコードをHTMLファイルに入力して更新するのは非常に時間が掛かりますしタグの管理も簡単ではありません。万が一HTMLファイルを更新したときにエラーが発生したらホームページ全体に影響を及ぼすという恐怖もあります。

このような面倒くさい作業を効率化するためにGoogleタグマネージャーが役立ちます。繰り返しになりますがGoogleタグマネージャーであれば、タグを一元管理できてブラウザ上でタグの追加・編集ができるのでHTMLファイルを開いてプログラミングコードを入力する必要もありません。

ホームページをワードプレスで作っている場合、プラグインを利用することによって分析ツールを使用できる場合も多くあります。ただ、プラグインではなくGoogleタグマネージャーを使用する利点としては僕が思いつく限り以下があります。

  • タグの動作条件を細かく設定できること
  • タグの発火(きちんと動作しているか)を確認する機能があること
  • プラグインのないツールを利用できること

また、プラグインを沢山使用するとホームページの動作が重くなり結果としてSEOで不利になったり、ワードプレスやプラグインがアップデートされた時に不具合が発生するリスクがあったり、プラグインの管理も煩雑になる場合があります

そういうのを嫌う人はワードプレスを使う場合でもGoogleタグマネージャーでタグを管理します。僕もGoogleタグマネージャー派です。

Googleタグマネージャーを使う3つのメリット

一部繰り返しになりますがGoogleタグマネージャーを使うメリットは以下が挙げられます。

メリット1:全てのタグをコード編集なしで一元管理できる

Googleが提供するサービスのタグに限らず第三者タグ、ウェブサイト用タグからモバイルアプリタグまで全てのタグをコード編集なしで一元管理できます。そのため、HTMLのプログラミング知識がない担当者でもタグ管理ができます。ホームページに設定されているタグの把握がしやすくなるので人為的なミスが発生するリスクを低減することもできます。

メリット2:作業の効率化に繋がる

タグを追加または修正したい場合、通常は該当する全てのページのHTMLコードにタグの情報を反映させてアップロードしなくてはいけません。

しかし、Googleタグマネージャーのタグを一度ホームページに設置すれば、Googleタグマネージャー上でタグの追加や修正が可能になるためホームページそのものを更新する必要がなく作業の効率化に繋がります。

また、動作確認テストやエラーチェックも出来るのでタグを追加・修正したときに問題があった生じた場合もすぐに対処できます

メリット3:組織内の共同作業がしやすい

任意の人にGoogleタグマネージャーのアクセス権限を付与できます。グマネージャーを更新したときの履歴やメモの残せるので共同作業や管理もしやすいです

Googleタグマネージャーの導入方法・使い方解説

最初にお話ししたように今回はワードプレスで作成したホームページを想定してGoogleタグマネージャーを導入する方法を解説します。事前に用意が必要なものとしては以下が挙げられます。今回は事例としてGoogleアナリティクスのタグをGoogleタグマネージャーに紐づけて解説しますのでGoogleアナリティクス(GA4)のアカウントもご用意頂けると分かりやすいと思います。

  • Googleアカウント
  • WordPressで作成したホームページ
  • Googleアナリティクス(GA4)アカウント

それでは一緒に設定していきましょう!

Googleタグマネージャーの導入手順

Googleタグマネージャー公式ホームページ

Googleタグマネージャーの公式ホームページにアクセスします。画面右上の「無料で利用する」をクリックします。Googleアカウントでのログインを求められるので任意のアカウントでログインします。

Googleタグマネージャーのアカウント作成

ログインしたら上記の画面が表示されます。

画面右側にある「アカウントを作成」をクリックします。

Googleタグマネージャーのアカウント作成をして登録

Googleタグマネージャーを設置したいホームページのアカウント情報を登録していきます。

  • アカウント名:自分が分かりやすい任意の名前を入力します。
  • 国:自分の国をプルタブから選択します。多くの場合、日本だと思います。
  • コンテナ名:任意入力ですが、慣習としてホームページのURLを入力します。
  • ターゲットプラットフォーム:Googleタブマネージャーを埋め込む媒体を選択します。今回はホームページに利用するので「ウェブ」になります。

Googleや他の人と匿名でデータを共有」は、チェックボックスを入れるとベンチマークサービスを利用できるようになります。ベンチマークサービスでは、サイトの特定につながるすべての情報を削除したうえで、自分のデータとその他の多くの匿名サイトのデータを合わせて総合的な傾向が分かるようになります。これは任意選択ですが僕の場合は毎回チェックを入れています。

GoogleタグマネージャーのIDをメモ

アカウントを作成すると、上図のような画面になります。

画面右上にある「GTM-XXXXX」をメモまたはコピーしておいてください。

次にワードプレスの管理画面を開きます

Googleタグマネージャーのプラグインを探す

ワードプレスの管理画面左メニューの「プラグイン」を選択し、「新規追加」をクリックします。

Googleタグマネージャーのプラグインをインストール

画面右上の検索ウィンドウで「google tag manager」と入力してプラグインを検索します。

検索結果に表示された「GTM4WP」を「今すぐインストール」して、インストール後プラグインを「有効」にします。

Googleタグマネージャーのプラグインをsetting

管理画面左メニューの「プラグイン」の中にある「インストール済プラグイン」を開いて、GTM4WPの「Settings」をクリックします。

GoogleタグマネージャーのIDを追加

Google Tag Manager ID」の項目に先ほどコピーまたはメモしたIDを入力して「変更を保存」します。

これでホームページにGoogleタグマネージャーを導入できました。

タグの追加手順

次にGoogleタグマネージャーを使ってGoogleアナリティクスを導入していきます。昔からあるユニバーサルアナリティクスは2023年に使用できなくなることを踏まえて今回は新型のアナリティクスであるGA4を使用します。

GAのIDをメモ

GA4のGoogleアナリティクスに最初ログインすると上図のような画面になります。「G-XXXXX」をメモまたはコピーしておきます。

Googleタグマネージャーのアカウント画面に戻ります。

Googleタグマネージャーの新規追加

左メニューの「タグ」を選択し、「新規」をクリックします。

Googleタグマネージャーのタグを設定

画面左上の名前入力欄にツール名など任意の名前を入力します。その後、「タグの設定」をクリックします。

GoogleタグマネージャーでGA4を連携

右側にタグタイプを選択という画面が表示されるので、その項目のなかにある「Googleアナリティクス:GA4設定」を選択します。

GA4のID入力

測定ID」に先ほどメモまたはコピーしたIDを入力します。その後、「トリガー」をクリックします。

All Pagesを選択

トリガーの選択が表示されるので「All Pages」を選択します。

Googleタグマネージャーを保存

右上にある「保存」をクリックします。

これでGoogleアナリティクスのタグをホームページに導入できました。

タグが正しく動作するか確認する

Googleタグマネージャーでは、タグをただ登録しただけではまた実際に稼働せず公開設定をする必要があります。

公開前にタグの動作チェックをしましょう。

プレビューを選択

アカウント画面右上にある「プレビュー」をクリックします。

urlを入力

Your website’s URL」の項目にテストしたいホームページのURLを入力して「Connect」をクリックします。URLを入力したページが表示されるので適当に動かします。

サマリーを確認

テスト結果の「Tags Fired」に先ほど登録したタグが表示されていれば無事に実装できたということになります。

先ほど「プレビュー」をクリックした画面に戻ります。

句会

画面右上の「公開」をクリックします。

バージョン情報登録

次の画面で何を更新したか(バージョン情報)を任意に入力することができます。これは複数名でタグを管理する場合に役立ちます。

バージョン情報を必要に応じて入力(無記入でも可)したら再び画面右上の「公開」をクリックします。その後続行」をクリックすることでタグが公開されます。

これで無事にタグを実装できました。

まとめ

最初は戸惑うことも多いかもしれませんが、慣れるととても便利なツールなのでGoogleタグマネージャーを皆さんも機会があればぜひ利用してみてください。

何かお困りのことがございましたらお気軽にご質問ください。Webマーケティングに関するお仕事のご相談も大歓迎です!

ご相談・お問い合わせはこちら