WEB集客対策

【WEB集客】理屈と動作が分かれば簡単!Googleタグマネージャーの設定方法と使い方

Googleタグマネージャーの使い方 WEB集客対策

こんにちは!

川口でWEB制作を行っているテダスクのSeitoです。

テダスクではGoogleアナリティクスのレクチャーとあわせて、Googleタグマネージャーの使い方のレクチャーを行っていますが、先日も特にGoogleタグマネージャーの使い方のレクチャーしました。

Googleタグマネージャーの設定記事はたくさん有りますが、何を設定しているのかの説明があまりされていないため、レクチャーをした方も設定はしたけど、使い方が分からないといった状態でした。

最近行ったタグマネージャーのレクチャーでは、分かりやすい!と言っていただけたので、レクチャーで伝えたことを元に、今回はGoogleタグマネージャーの使い方を出来る限り丁寧にご説明したいと思います。

GoogleタグマネージャーとGoogleアナリティクスの違い

私にご相談いただくお客様の半分くらいは、このタグマネージャーとアナリティクスの違いが分からない方がいらっしゃいますので、図を元に簡単にご説明します。

Googleタグマネージャー

タグマネージャーというのは、言葉の通りタグ管理するためのGoogleのサービスです。

そのタグの中には、大雑把な言い方になりますが、アナリティクスの計測も含まれます。

つまり、Googleタグマネージャー自体にPV数などを計測する機能があるわけでは無く、Googleタグマネージャーで、アナリティクスの計測をするための条件や設定などを管理するという位置関係になります。

Googleタグマネージャーが必要となるとき

先程の図を元にもう少し説明を続けます。

Googleアナリティクスを利用するとき、専用のトラッキングコードが発行されますね。

そのトラッキングコードをホームページやWordPressに埋め込めば計測が始まります。

もし、アナリティクスでセッション数やページビュー数などを計測するだけであれば、タグマネージャーを使う必要は無いかも知れません。

 

タグマネージャーを使った方が良いと思う理由の一つにイベントやコンバージョンの計測が挙げられます。

例えばサイト内に資料ダウンロードというボタンがあって、そのPDFをダウンロードするまでに経由したページや、どこの地域の企業がダウンロードしたかなど、経緯を詳しく知りたい場合はイベントのを計測が必要になります。

このイベントの計測をするためには、サイト内にJavaScriptというプログラムコードを入れて、ダウンロードボタンがクリックされたと同時に、アナリティクスにイベント計測用のデータを送信する必要があります。

しかしながら、もしタグマネージャーを導入していれば、ホームページやWordPressなどにJavaScriptコード埋め込まずにイベント用データの送信ができるようになります。

それが、最初の図の右側「タグの中身」の「アクション(私が勝手にそう読んでいるだけですので注意)」にあたるものとなります。

 

タグの中身には、アクションの部分と、トリガー(アクションを起こすための条件)の二つを設定します。

例えば、アナリティクス計測を例に動作を理解しましょう。

トリガーの部分で設定することは、「サイトを見たら」という条件ですね。

アクションの部分で設定する事は条件が達成されたら起こしたいアクションです。

アナリティクス計測の場合は、「Googleアナリティクスにページビューがあったことを通知(送信)する」です。

この二つを覚えてた上で、タグマネージャーのタグを新規で設定してみます。

タグマネージャーでアナリティクス計測で設定する項目は3つだけ

まずタグマネージャーはサイト上に埋め込まれている前提で進めます。

埋め込み方については、別途記事を用意しますので、他の方の記事を参考にして下さい。

Googleタグマネージャーの使い方

いきなり出鼻を挫かれそうな管理画面ですが、先程の説明を元に設定すれば大丈夫です!

設定する項目をここでまとめて書きます。今は理解していなくて大丈夫です。

  • タグ:アナリティクスへのデータ送信
  • トリガー(条件):サイトを見たら
  • 変数:アナリティクスのトラッキングコード

それでは、新規でタグを作成しますので、左メニューのタグをクリックします。

 

Googleタグマネージャーの使い方

上の画面ではすでにいくつか設定されているのですが、初めてに人は何も表示されませんので心配しないで下さい。

右上の「新規」をクリックします。

 

Googleタグマネージャーの使い方

そうすると、画面右側からスライドする形で設定項目が表示されます。

先ずこの画面をよくみてください。

最初に出てきた図と同じ位置関係で、上のボックスの「タグの設定」にあたる部分が私が勝手に名付けた「アクション」の部分で、下の「トリガー」が「トリガー(アクションを起こさせる条件)」となります。

これを意識しつつ設定していきましょう。

左上のタイトルの所には、このタグは何をするタグなのかが分かる様に名付けます。ここでは「アナリティクス計測用タグ」としています。

次に、「タグの設定」のボックスにカーソルを当ててクリックして、設定をしていきます。

 

Googleタグマネージャーの使い方

するとまた画面右側からスライドで、選択項目が出てきます。

ここで選ぶべきは、トリガーが達成したらデータを送りたいアクションの送信先」です。

つまり、Googleアナリティクス:ユニバーサルアナリティクスですよね。

もし、お使いのアナリティクスがGA4(最新版のGoogleアナリティクスアナリティクス)の場合はそちらを選んでください。

 

Googleタグマネージャーの使い方

すると、こんな画面になります。

「トラッキングタイプ」というのが、さきほどから言っている「アクション」にあたる部分です。

タグマネージャーがアナリティクスに送信するデータは何かを選択します。

今回はページビューデータを送るので、ページビューを選択します。

もしイベントのデータを送信をしたい場合は、「イベント」を選びます。(イベント送信については、アナリティクス測定の設定の後に別途設定します。)

 

さて、この状態だとアナリティクスにページビューデータを送る設定はできましたが、どのトラッキングコードに送るかは設定していませんね。

そのトラッキングコードを設定する項目が「変数」になります。

Googleタグマネージャーの使い方

「アナリティクス設定」のドロップダウンメニューをクリックして、「新しい変数」を選択して、設定したいアナリティクスのトラッキングコード用の変数を作成します。

 

Googleタグマネージャーの使い方

変数の設定では、まずタイトルにトラッキングコードであることが分かる様に名前を付けます。

理想はサイト名+トラッキングコードという命名の方が良いかもしれませんので、適宜つけてください。

トラッキングIDには、アナリティクスのトラッキングコードを入れましょう。

入力が終わったら、右上の「保存」をクリックします。

 

ちなみまだアナリティクスのプロパティを作成していない場合は先にアナリティクスプロパティを作成してしまいましょう。

【2021年最新版】WordPressにGoogleアナリティクスを導入する方法
こんにちは! 埼玉県川口市でWEB制作を行っています テダスクのToshiです。 2020年の10月頃にGoogleアナリティクスのバージョンが上がりました。 今まで使っていた人はバージョンが上がったことで、...

※タグマネージャーを使う場合は、「WordPressプラグインAll in one SEO使ってアナリティクスの導入」移行の作業は不要です。

 

Googleタグマネージャーの使い方

「Googleアナリティクス設定」が先程作成した変数の「アナリティクストラッキングコード」である事を確認します。

これで、指定したトラッキングコードのアナリティクスに、ページビューデータを送信するまで完成しました。

最後にページビューを送信するための条件を作成します。

トリガーのボックスにカーソルを合わせて、クリックします。

Googleタグマネージャーの使い方

画面右側から、トリガーとして設定できるものが出てきました。

ここで選ぶのは「All Pages」です。

このAll Pagesという名前が分かりにくいのですが、「どのページを見ても」と解釈して下さい。

つまり、このタグマネージャーを導入しているサイトのどのページを見ても条件達成という事になります。

 

Googleタグマネージャーの使い方

これで全ての設定が完了しました。

改めて、最初の図を見ていただきたいのですが、これと見比べてどうでしょうか。

上のボックスがアクションして欲しいことで、下が条件です。

設定している内容を言語化すると

・(このタグマネージャーを導入しているサイトの)どのページを見ても(条件)、ページビュー設定しているトラッキングコード(変数)のアナリティクスに送信(アクション)する

となります。

 

なんとなく分かりましたか?

この理屈を理解して設定するとそんなに難しい事ではないと思いませんか?

それでは、保存をクリックして先に進みます。

 

Googleタグマネージャーの使い方

最後に、忘れてはいけないのが「公開」です。

タグマネージャーはバージョン管理をしていて、今までの作業や変更などが記録されるようになっています。

そのため、タグを作成した際や更新の際は必ず公開しなければ、サイトに反映されないので気を付けましょう。

 

Googleタグマネージャーの使い方

公開をクリックすると、バージョン管理のためにバージョン名と説明を適宜入れます。

そして「公開」をクリックして完了です!

この後は、設定したトラッキングのアナリティクスを見て、リアルタイムで計測が出来ていれば無事設定の完了です!

タグマネージャーでクリックイベントを送信する設定

さて、今まではアナリティクスにページビューを送信するためのタグを設定してきましたが、今度は資料ダウンロードを想定した、クリックイベントを送信する設定を行っていきましょう。

先程の理屈を振り返りながら設定すればイベント送信も難しくありません。

まず最初にどういうアクションをタグマネージャーにさせるかを言語化しましょう。

今回のアクションとトリガーは
ダウンロードするためのボタンをクリックしたら(条件)→イベントのデータ設定しているトラッキングコード(変数)のアナリティクスに送信(アクション)する
ですね。
これを意識して、設定していきましょう。
Googleタグマネージャーの使い方

先程同様に、タグのメニューで「新規」をクリックします。

Googleタグマネージャーの使い方

アクション部分です。

まとめて入力していますが、一つずつ項目を確認していきます。

「タグの種類」はデータの送信先ですので、先程と同様にGoogleアナリティクスですね。

「トラッキングタイプ」はアクションにあたる部分(イベントのデータ)なので、今回は「イベント」を選択します。

「イベントトラッキングパラメータ」はイベントと合わせて送りたいデータの中身※になります。

※因みに、このデータの中身が冒頭で説明した本来はJavaScriptコードで直接ファイルに記述して送信させるイベントデータです。

このイベントというのは、Googleアナリティクスの「行動」→「イベント」もしくは「リアルタイム」→「イベント」でここで設定して送信したデータの中身が反映されるようになります。

Googleタグマネージャーの使い方

もしアナリティクスで「目標(コンバージョン)」の設定をする場合はこのカテゴリー名やアクション名、ラベル名を合わせる必要があるので、それも意識して設定しましょう。

タグマネージャーの画像の例では次の様に設定しました。(これはあくまで例ですので、自社の規則を作って作成しましょう)

「カテゴリー」:document1

「アクション」:download

「ラベル」:{{Page_URL}}→これは、入力欄右側の「+」ボタンをクリックすると表示される変数のひとつで現在アクセスしているURLをラベルに設定するという意味です。

「Googleアナリティクス設定」:アナリティクストラッキングコード(先程作ったトラッキングコード用の変数)

アナリティクスでコンバージョンの設定をする場合
「すべてのウェブサイトのデータ」→「ビュー」→「目標」→「新しい目標」
①:カスタム
②:イベント
③:目標の詳細(イベント条件)→ここにタグマネージャーで送信するデータを条件にすると目標達成を計測できます。
アナリティクスのイベント条件

これで、アクションにあたるイベントのデータアナリティクスに送信するの設定が完了です。

次は、送信するための条件を設定しましょう。

アナリティクスのイベント条件

 

トリガー(条件)を振り返ると

「ダウンロードするためのボタンをクリックしたら」

ですね。

アナリティクスのイベント条件

しかしながら、トリガーの選択にはクリックの条件がないので自分で作ります。

アナリティクスのイベント条件

トリガーに何のためのトリガーか分かるように名前を付けて、「トリガー設定」のボックスをクリックします。

アナリティクスのイベント条件

項目が沢山出てきましたが、クリック条件は二つだけで、「全ての要素」か「リンクのみ」です。

すべての要素かリンクのみかは、htmlタグのaタグでリンク先(href)を設定しているかどうかで決めて良いと思いますが※、今回の場合pdfをダウンロードするためのリンクを用意する想定なので、リンクのみで設定します。

※aタグ以外のクリックイベントがあるとしたら、メール送信時のsubmitボタンのクリックなどがありますので、その場合は全ての要素を選択します。

Googleタグマネージャーの使い方

さて、ここでアクションを発生させる条件を設定する事になりますが、下のようなhtmlタグで資料のダウンロードをしてもらう場合で考えてみましょう。

<a id="pdf1" class="pdf-dl" href="/wp-content/upload/test.pdf">資料ダウンロードする</a>

まず、このトリガーの発生場所等については「一部のリンククリック」にしています。

もし、「すべてのリンククリック」だとどうなるかというと、リンク(aタグ)をクリックする度に、イベントが発生してしまうので、それではダメですよね。

 

次に条件指定です。

一旦先程の設定例を無視して考えます。

例えば、Click IDClick Classesで設定する場合はどうなるでしょうか?(ANDは且つと読み替えてください)

まずClick IDの場合は

「Click ID」 AND 「含む」 AND 「pdf1」

これは、言葉で説明すると、pdf1というIDが設定されている(含まれている)リンクをクリックしたら

となります。

先程のHTML例の場合条件が当てはまるため、リンクをクリックしたら条件達成となり、イベントデータがアナリティクスに送信されます。

 

Classesの場合は

「Click Classes」 AND 「含む」 AND 「pdf-dl」

で、これもHTMLの例ではクリックしたら条件達成となります。

 

そして、画像で設定した例ではClick URLなので、href(リンク先)の内容を指定します。

「Click URL」AND「含む」AND「/wp-content/uploads/test.pdf」

/wp-content/uploads/test.pdfが設定されているリンクをクリックしたら

となり、例のHTMLをクリックシタ場合は、条件達成となります。

 

このように、ここで指定した条件をトリガーとすることで、ダウンロードクリックイベントデータを送信することができます。

設定が完了したら、保存して完了します。

 

Googleタグマネージャーの使い方

こんな感じで設定できれば完了です。

このタグを言葉で説明すると、ダウンロードURLをクリックしたら(トリガー)で、指定したアナリティクスへ、イベントデータカテゴリーにdocument1、アクションはdownload、ラベルはダウンロードしたページURL)を送信する。

というタグを作成した事になります。

この後は、保存して、忘れずに公開をクリックして、無事イベントデータ送信タグの完了です。

イベントの確認方法

Googleタグマネージャーの使い方

イベントが動作していているかどうかは、ホームページ上でイベントを発生させた後に、アナリティクスの「リアルタイム」→「イベント」→「イベントタブ(直前の30分前)」で動作を確認できます。

 

まとめ

これでタグマネージャーの基本的な使い方の説明を終わります。

何を設定して、Googleタグマネージャー上で何が動いているかが分かるとそんなに設定は難しくないかなと思います。

もし、どんな設定をしているかふと忘れてしまったらまたこの記事を読んで思いだしていただければと思います。

 

タグマネージャーは広告のコンバージョン取得など、とにかくかなりの機能がありますので、もっと複雑な設定が必要な場合は先ずはこの基本思い出してから、チャレンジしてみてください。

テダスクでは、このGoogleタグマネージャーの使い方やGoogleアナリティクスのレクチャーも承っていますので、難しいと感じた場合はお気軽にお問い合わせください。

 

以上で、「【WEB集客】理屈が分かれば簡単!Googleタグマネージャーの設定方法と使い方」でした!

 

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ300件以上、タイムチケットのWEB部門4年連続販売数1位!
WordPressのカスタマイズからWEBアプリ制作、ホームページ制作までWEBの事ならなんでもお気軽にご相談下さい。
》相談する

Toshi Seitoをフォローする

いいね!をしてWordPressの
お役立ち情報を受け取る!

WordPress専門ホームページ制作事務所

コメント

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