Googleタグマネージャーの使い方|導入&アナリティクス連携!

BLOG SEO

Webサイトを分析したい人「サイトのアクセス解析を効率的にしたい。Googleタグマネージャーって便利と聞いたけど、どんなメリットがあるんですか?良さそうなら活用したいので、導入方法や使い方もあわせて教えてください」

こういった疑問に答えます。

本記事の内容

  • Googleタグマネージャーを使うメリット
  • Googleタグマネージャーの導入手順と使い方

記事の信頼性

本記事を書いている私はブログ歴2年以上。記事数は350を超えました。アナリティクスをはじめ、SEOに関する記事も多数アップしています。

今回は、Googleタグマネージャーの導入手順と使い方を解説します。

Googleタグマネージャーを使えば、Googleアナリティクスでのアクセス解析を、「より高度に」「より簡単に」行うことができます。

とはいえ、最初はどこから手をつけていいかわからないですよね?

そこで本記事では、Googleタグマネージャーの導入手順や使い方をわかりやすく解説しました。

アクセス解析のスキルをレベルアップしたい方は、ぜひご覧ください。

※前提として、Googleアナリティクスを導入している必要があります。まだの方は、Googleアナリティクス4(GA4)の導入方法と初期設定【2022年版】をご覧のうえ、先に導入しておいてください。

目次

Googleタグマネージャー(GTM)とは?

Googleタグマネージャー(略称:GTM)とは、Googleから無料で提供されているタグマネジメントツールです。「タグマネ」と略して呼ぶ人もいます。

サイトのアクセス分析には、Googleアナリティクスを使ってる方が多いでしょう。このGoogleアナリティクスで、「リンクのクリック数」や「資料のダウンロード数」などを計測するには、タグ(HTMLコード)をWebサイトの対象ページへ埋めこむ必要があります。

しかし、タグの追加の度にHTMLを編集するのはとっても面倒…。

そこで毎回HTMLを編集しなくても済むよう、ツールの管理画面上から「どのページへ」「どのタグを埋め込む」をカンタンにできるようにしたのがGoogleタグマネージャーです。

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

  • 無料&サイト規模の制限なし
  • 色んなタグを一元管理できる
  • HTML編集なしでタグ追加できる
  • タグ増えてもサイトが重くならない
  • プレビューモードで事前確認できる
  • トラブル時にバージョンを元に戻せる
  • Googleアナリティクスとの相性が良い

上記のとおり、Googleタグマネージャーを使えばいいことだらけ。

その証拠に、上場企業のWebサイト3,636社のうち、約44%はGoogleタグマネージャーを導入しています(※2020年12月の調査、引用元)。

デメリットをあえて挙げるなら、最初は少しとっつきにくいこと。私もそうでした。でも使っていくうちに慣れてきますので、ご安心ください。

というわけで、Googeアナリティクスを使ったアクセス解析を、「より簡単に」「より効果的に」行いたい方は、ぜひGoogeタグマネージャーを使いましょう!

ひとつ補足すると、Googleタグマネージャーの導入時だけは、HTMLにタグを埋め込む作業が必要です。その導入手順を以下で説明します。

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

Googleタグマネージャーの導入手順を解説します(導入が済んでる方は、使い方にスキップ)。

まず、Googleタグマネージャーにアクセスしましょう。
» Googleタグマネージャー

右上の[タグマネージャーにログイン]をクリックします。

[アカウントを作成]をクリックします。

ここからアカウントの作成です。
まずアカウントの設定。
①アカウント名は、わかりやすい名前を入力します。個人サイトならサイト名とか。後でも変更可能です。
②国は[日本]を選びます。

次にコンテナの設定。
コンテナとは、Googeタグマネージャーにおける管理の箱。コンテナを設置すれば、その中で自由にタグの出し入れが可能になります。

③コンテナ名にはドメイン(あくまで名前です)を入力します。
④ターゲットプラットフォームには、Webサイトに設置するなら[ウェブ]を選びます。
最後に[作成]をクリックします。

利用規約が表示されるので、[はい]をクリックします。

コンテナの作成が完了すると、そのそのコンテナを利用するために必要なタグが表示されます。表示されたタグをコピーして、導入したいサイトのHTML(header.phpなど)に貼り付けます。貼り付ける場所は、上段は内に、下段は直後です。

先ほどのタグが表示された画面で[OK]をクリックすると、ワークスペース(管理画面)が表示されます。

※なお、先ほどのタグは、上図の右上にあるコンテナIDをクリックすると同じものをみれますよ。

以上で、Googleタグマネージャーの導入手順は完了です。

Googleタグマネージャーの使い方(タグの設定)

今回は例として、「記事内に貼られた特定のリンクを何回クリックされたか?」を計測できるように設定します。

具体的には、当サイトのAmazon Audibleの無料体験を紹介したページ内にある、「無料体験への登録リンク」をクリックした回数を計測してみます。

Googleタグマネージャーを使ったタグの設定は3つありまして、以下の順で進めていくとわかりすいです。

  1. 変数の確認:使う変数があるか確認する
  2. トリガーの作成:タグが発動する条件を指定する
  3. タグの作成:実行されるコードの内容を設定する

では設定方法を順にみていきましょう。

手順①:変数を確認する

まずは、Googleタグマネージャーで使う変数があるかを確認します。
Googleタグマネージャーでよく使う変数は以下の3つ。

  • Page URL
  • Click URL
  • Click Text

上記が設定されているかを確認します。すでに設定されていれば何もすることはありません。

まず、左メニューから[変数]をクリックし、右上の[設定]をクリックします。

以下の3つにチェックをつけます。※それ以外にチェックがついててもOK
・Page URL
・Click URL
・Click Text

これで変数の設定は完了です。

手順②:トリガーを作成する

左メニューから[トリガー]をクリックし、右上の[新規]をクリックします。

左上の[無題のトリガー]をクリックして、わかりやすい名前に変更します。今回は「特定URLのクリック」としました。そして、[トリガーの設定]をクリックします。

表示されたトリガータイプの中から、[クリック] > [リンクのみ]を選びます。

※番号は、下の方にある図中の番号と同じ
①計測を正しく行うために、[タグの配信を待つ]にチェックをつけます。②上限の数値はこのままでOK。
③[PageURL]、[正規表現に一致]を選び、半角で[.*]を入力します。[.*]は何かしらの文字があることを意味しており、この設定によって、あなたのサイトの全ページでこのトリガーが発動することになります。
④[一部のリンククリック]を選びます。
⑤[Click URL]、[等しい]を選び、クリック回数を計測したいリンクのURLを貼り付けます。今回の例では、「無料体験への登録リンク」のURLですね。
⑥最後に、右上の[保存]をクリックします。

すると、今回追加したトリガーが表示されてます。

以上でトリガーの作成は完了です。

手順③:タグを作成する

最後に、このトリガーを発動するタグを設定します。
左メニューから[タグ]をクリックし、右上の[新規]をクリックします。

左上の[名前のないタグ]をわかりやすい名前に変更します。今回は「特定URLのクリック」としました。次に[タグの設定]をクリックします。

[ユニバーサルアナリティクス]を選びます。

※番号は、下の方にある図中の番号と同じ
①[トラッキングタイプ]を[イベント]にします。
②[カテゴリ]にはわかりやすい名前を入力ます。
③アクションは[+]マークをクリックし、[Page URL]を選ぶと、{{Page URL}}が自動で入ります。
④ラベルは[+]をクリックし、[Click Text]を選びます。{{Click Text}}の後に、半角全角どちらでもいいので、コロン(:)を入力しましょう。[+]をクリックし、[Click URL]を選びます。
⑤[値]⑥[非インタラクションヒット]⑦[Googleアナリティクス設定]はそのまま。
⑧[このタグでオーバーライド設定を有効にする]にチェックをつけます。
⑨測定するサイトのGoogleアナリティクスのトラッキングID(UA-xxxxxxx-x)を入力します。

※トラッキングIDを忘れた方は、アナリティクスの左メニューから[管理]をクリックし、[プロパティ] > [プロパティ設定]をみれば記載されてます。

これで、タグの入力は完了です。

続いて、下にある[トリガー]をクリックし、先ほどの手順②で作成したトリガーを選びます。

これで設定が完了なので、右上の[保存]をクリックします。

すると管理画面に、以下のようなタグができあがりました。

以上、Googleタグマネージャーでタグを設定する方法でした。

※上記以外のタグ設定例は、Googleタグマネージャーでクリック数やページビューを計測する方法にて紹介していますので、参考にしてください。

Googleタグマネージャーの使い方(プレビュー&公開)

Googeタグマネージャーでタグを作れたら、公開前に動作チェックをしましょう。公開前の動作チェックは「プレビュー機能」を使います。便利なのでぜひ使ってください。

プレビューをする前に

Googeタグマネージャーでプレビューするには、「Tag Assistant」というGoogle Chromeの拡張機能が必要です。Cromeウェブストアにいき、追加しておきましょう。

プレビューする方法

まず管理画面の右上にある[プレビュー]をクリックします。

すると、以下のような新しいウィンドウが起動します。プレビューするURLを入力して、[Connect]をクリックします。

すると、先ほど入力したURLのページが自動で立ち上がります。今回の例では、当サイトの「Amazon Audible紹介ページ」のURLを指定したので、以下のページに遷移します。

Tag Assistantのページに戻ると、以下のような画面になっているので、[Continue]をクリックします。

この時点では、今回設定したトリガー(特定URLのクリック)はまだ発生していないので、[Tags Not Fired]のところに表示されています。

ここで、今回設定したトリガー(Amazon無料体験リンクのクリック)を自分で発生させてみます。

Tag Assistantのページに戻ると、今回設定したタグ(特定URLのクリック)が、[Tags Fired]に移ってます。この[Tags Fired]に表示されれば、今回の設定が正しく動作した証拠です。

こんな感じで「プレビュー機能」を使って、公開前の動作チェックをしましょう。

プレビューを終了するときは、Tag Assistantページの左上のx印をクリックします。

[Stop debugging]をクリックします。

以下のような画面になります。

以上、公開前にプレビューで確認する方法でした。

公開する方法

では、作成したタグを公開しましょう。右上の[公開]をクリックします。

[バージョン名]と[バージョンの説明]にわかりやすい名前と説明を入力し、右上の[公開]ボタンをクリックします。

以下のような表示がされます。

左上の[ワークスペース]をクリックしてみましょう。右上の「ワークスペースの変更:0」になっていれば、作成したタグは公開されてます。バージョンも上がってますね。

以上で、作成タグの公開は完了です。

Googleタグマネージャーの使い方(アナリティクスで確認)

では最後に、今回作成したタグが、Googeアナリティクスに反映されているかを確認しましょう。

Googeアナリティクスを開き、左メニューから[リアルタイム] > [イベント]をクリックします。
この時点では、[イベントカテゴリ]や[イベントアクション]には何もデータがないことを確認します。

つぎに、今回設定したトリガーを自分で発生させてみます。
私の場合ですと、当サイトの「Amazon Audibleへの登録ページリンクがあるページ」を開き、登録ページリンクをクリックします。

再び、Googeアナリティクスに戻ります。
すると[イベントを発生させたアクティブユーザー]が0から1に変わってますね。[イベントカテゴリ]には今回作成した「申し込みURLクリック」が表示され、[イベントアクション]にはイベントが発生したページURLが記載されてます。

これで、今回Googleタグマネージャーで作成したタグと、Googleアナリティクスのひもづけが正常であることを確認できました。

なお、少し時間が経った後は[リアルタイム]ではなく、左メニューの[行動] > [イベント] > [概要]をクリックして、イベントカテゴリやイベントアクションを確認しましょう。

おつかれさま(^^)/

まとめ:Googleタグマネージャーを使うとワンランク上のアクセス解析ができる

Googleタグマネージャーとは?から始まって、導入手順や使い方までを解説しました。

たしかにGoogleタグマネージャーは最初はとっつきにくいかもしれませんが、使っていくうちにすぐに慣れます。

そしてそのうち、「Googleタグマネージャーなしではやっていけない」に変わるはずです。

サイトをさらに改善したい方は、Googleアナリティクスに加えて、ぜひGoogleタグマネージャーも使いこなしていきましょう。

今回紹介した以外のタグ設定例は、Googleタグマネージャーでクリック数やページビューを計測する方法で紹介してますので、そちらも参考にしてください。

今回は以上です。