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

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

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

<br />

はじめに

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!タグマネージャーがよく知られています。
他にも有料で多数のベンダーが提供していますが、
本記事では特に挙げたり言及したりすることはありません。

Contents

１　Googleタグマネージャーの導入
- １.１　Googleタグマネージャーのアカウントを作成する
- １.２　WordPressへのGoogleタグマネージャーのインストール
２　Googleタグマネージャーの管理画面
３　大要素「タグ」「トリガー」「変数」

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

１.１　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タグマネージャーをインストール

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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