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

本記事の元となった、自分で記述したWordのPDFを貼り付けておきます。

HTMLだと、しかもWordPressのエディッターを介すと、
思うように表示編集することは
わたしには難しくてできませんし、
できたとしてもかなり面倒なことです
(HTMLって、なんでこんなにメンドイんじゃい!
内容を編集するよりも、表示形式の編集に手間ばかりかかりやがる!)。


はじめに

Webページのクリック数は、
Googleアナリティクスのイベントトラッキングを利用して計測するのが一般的です。

計測する箇所ごとにGoogleアナリティクスのタグを埋め込まなければなりませんから、
計測する箇所が多いと埋め込むタグの数もそれだけ多くなってしまいます。

埋め込むタグの数が多いと、次のような問題がでてきます。

・ 埋め込まれているタグの状況を把握しきれない
 
・ Webページによってタグが異なる場合がありややこしい
 
・ HTMLの編集を第三者に依頼している場合、
即座にタグの追加や削除ができない
 
・ 外部のコンサルタントなどに
現在のタグの利用状況を正しく伝えるのが難しい

ひと言でいってしまうと「管理が大変」ということです。

埋め込むタグの数が多いと、上に示したような問題がでてきます。
これらの問題についてはあきらめるしかないのでしょうか?
新しいタグを追加するたびに複雑化していくHTMLを、
受け入れるしかないのでしょうか?

いいえ。 不便ならば、それを解決するための手段を使えばいいのです。
それが「タグマネジメント」という考え方です。

上記の問題は、そのタグマネジメントを実現するためのツールを使うことで、
いずれも大幅に改善することができます。

本記事では、そんなタグマネジメント・ツールの1つである
Googleタグマネージャー」を利用してのイベントトラッキングの方法をお伝えします。

本サイトにおけるGoogleタグマネージャーの導入と簡単な使い方に関する記事は、
下に示すよう3つのページから成る3部構成となっています。

1. Googleタグマネージャーの導入

2. Googleタグマネージャーでタグを配信する(2020/12月頃アップ予定)

3. 自動イベント・トラッキング(2020/12月頃アップ予定)

本ページでは、Googleタグマネージャーについて、
その導入方法と
三大要素であるタグ」、トリガー」、そして「変数」について説明します。

これら「タグ」、「トリガー」、そして「変数」については、
しっかり理解できないと、
Googleタグマネージャーを使いこなすのは難しいと言えるでしょう。

なお、Googleタグマネージャーを始めとするGoogleのツールは、
頻繁にWebページの画面が変更されています。
みなさまがご覧になられる時には、
本記事の図とは少し違っているのかもしれないことを
予めお断りしておきます。

【参考: Googleタグマネージャー以外のタグマネジメント・ツール】
Googleタグマネージャー以外にも、無料で利用できるものとしては、
Yahoo!タグマネージャーがよく知られています。
他にも有料で多数のベンダーが提供していますが、
本記事では特に挙げたり言及したりすることはありません。

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

Googleタグマネージャーを利用するのに、まず一番最初にすることは、
Googleタグマネージャーのアカウントを作成することです。

Googleタグマネージャーのアカウントを作成するためには、
その前にGoogleアカウントを用意しておく必要があります。

誤解されている方が多いのでは?と思いますので、
あえて述べさせていただきます。

です。

Gmailアカウントは、
Googleアカウントの一部(部分集合)なのです。

Gmailが不要であれば、
既存のメールアドレスでGoogleアカウントを作成することができます。

https://accounts.google.com/signupwithoutgmail

Googleアカウントを用意できたら、
あとはGoogleタグマネージャーの公式ページに行き、
画面の指示に従って進めていくだけです。

https://marketingplatform.google.com/intl/ja/about/tag-manager

なお、本記事で示すTag Managerページのスクリーンショットは、
2016年01月当時の古いものであり、
2020年11月現在のものとは多少異なっています。
でも、それほど内容が異なっているわけではありません。

ⅰ) 公式ページ・トップの右上に表示される「無料で利用する」をクリックします。

ⅱ) 図1.1.2のような画面が表示されたら、
Add a New Account」で
各項目を下表に示すよう入力して、
ページ最下部の「Create」をクリックします。

ⅲ) Googleタグマネージャー利用規約」が表示されますので、
はい」をクリックします。

# 図1.1.2が英語表記で、図1.1.3では日本語表記かいな?
# わかってまんがな!
# 無駄な突っ込みはせんといてーな!
# 自分用は設定済で、またスクリーンショット撮り直すの、メンドーなんだもん。

ⅴ) 図1.1-4に示すようにGoogleタグマネージャーのタグが表示されます。
これをコピーし、ウェブサイトの全てのページの<body>の直後に貼り付けます。

Googleタグマネージャーのタグは、
Googleタグマネージャー管理画面の下に示すページからでも取得できますので、
ここで今直ぐ貼り付けをしなくても大丈夫です。

アカウント[コンテナ選択]管理コンテナ
Googleタグマネージャーをインストール

後でゆっくり落ちついてやった方がよいでしょう。

1.2 WordPressへのGoogleタグマネージャーのインストール

WordPressへGoogleタグマネージャーをインストールするには、

Google Tag Manager

というプラグインがありますので、これを利用するとよいでしょう。

図1.2-1 プラグイン/Google Tag Manager

インストールすると、
サイドメニュー一般に「Google Tag Manager ID」という項目が
表示されるようになります。
ここにコンテナIDを入力します。

図1.2-2 Google Tag Manager IDの設定

コンテナIDは、図1.2-3に示すように
Googleタグマネージャー・ページのログイン直後の画面に表示されます。

2 Googleタグマネージャーの管理画面

Googleタグマネージャーにログインすると、
アカウントの一覧とそのアカウントで管理しているコンテナの一覧が表示されます。

Googleタグマネージャーでの各種設定は、コンテナ単位で行います。
コンテナ名をクリックすると、そのコンテナの管理画面が表示されます。

コンテナの管理画面は、大きく3つに分かれていて、
上部の「画面上」ブロックと、
薄い灰色の線で区切られた「画面左」ブロック、
そしてもっとも大きな面積を占める「画面右」ブロックがあります。

それぞれの役割は、次のようになっています。

(1) 「画面上」ブロック

主にアカウントの管理に関わるメニューがまとめられている。

(2) 「画面左」ブロック

いわゆる機能的なメニューが並んでいる。
このメニューを選択すると、画面が切り替わり
詳しい内容が見られるようになっている。


各種設定の概要を見られる「サマリー」、
そしてGoogleタグマネージャーの三大要素といえる
タグ」、「トリガー」、「変数」が並んでいる。

(3) 「画面右」ブロック

メニューごとに詳細が表示される広いスペースとなっている。

3 大要素「タグ」「トリガー」「変数」

Googleタグマネージャーにおいて、
タグ」、「トリガー」、「変数」は、
特に重要な要素です。

これらをきちんと理解しておかないことには、
Googleタグマネージャーを使いこなすのは難しいといわざるをえません。

3.1 タグ

タグ」は文字通り、
Googleタグマネージャーで管理する「タグ」そのものを指します。

たとえば、Googleアナリティクスのページビュー計測タグや
Google AdWordsのコンバージョンタグなど、
他のツールが発行した各種タグを登録したものが
タグ」なわけです。

これらのタグは、それぞれ個別に登録しておく必要があります。

3.2 トリガー

タグ」を配信する条件のことを、「トリガー」と呼びます。

たとえば
『Googleアナリティクスのページビュー計測タグを「全ページ」で配信する』場合であれば、
この「全ページで」の部分がトリガーにあたります。

一方、『商品の「購入完了のみ」にGoogle AdWordsのタグを配信したい』といった場合は、
購入完了ページ」を指定するためのトリガーを作成する必要があります。

本記事は、とりあえずGoogleタグマネージャーで
Googleアナリティクスのイベントトラッキングが使えることが目的としますので、
今回この詳細については説明を省かせていただきます。

3.3 変数

変数」は「動的な値」を意味し、
状況によって変わる可能性のあるもの全般を指しています。

たとえば
Webページが変わればURLやリファラーは当然変わりますし、
そのほか、ユーザーごとに異なるもの(そのときの購入金額など)もあります。

Googleタグマネージャーでは、
こうしたものを総称して「変数」として管理します。

変数」には、組み込み変数カスタム変数があります。

組み込み変数はユーザーが定義しなくとも使える変数で、
カスタム変数はユーザーが定義する変数です。

図3.3-1表3.3-1に、
Googleタグマネージャーの組み込み変数を示します。

なお、組み込み変数は、初期状態では無効になっています

イベントトラッキングで参照する変数は
図3.3-1に示すようにチェックを入れて有効にしておかなければなりません

カスタム変数の定義の仕方については、別の機会に譲りたいと思います。

# 2020年11月15日現在、EXCEL表取り込みを試験!

3.4 プレビューと公開

Googleタグマネージャでは、
設定内容の動作確認用の機能として「プレビューモード」が用意されています。

設定した内容で、
正しく意図通りにタグが配信されているかを確かめるために使います。

管理画面の右上にある「公開」ボタンをクリックするとメニューが表示されるので、
その中から「プレビュー」を選択するとプレビューモードになります。

プレビューモードをオンにした状態でWebページにアクセスすると、
画面下部にタグの一覧が表示されるようになります。

そのため、
設定したタグが想定通りにきちんと配信されているかを
視覚的に確認することができるようになっています。

プレビュー中にタグの設定などを変更した場合は、
図3.4-2中の左下にある「更新」をクリックすると、
変更をすすぐに反映させることができます。


以上