Googleタグマネージャー/第2章 Googleタグマネージャーの導入



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

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

特に、「タグ」、「トリガー」、そして「変数」の概念については、
しっかりとご理解されなければなりません。





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

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

その前に、誤解されている方が多いのではと思いますが、

Gmailアカウント ⊆ Googleアカウント

です。

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


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

https://accounts.google.com/signupwithoutgmail



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

http://www.google.co.jp/tagmanager/

ⅰ) 「今すぐ登録」をクリックします。

GoTag201

図2.1-1 Googleタグマネージャー公式サイト



ⅱ) 図2.1-2の「アカウントの設定」で「アカウント名」に、
ご自分が区別できる適当な名前を入れ、「続行」をクリックします。

GoTag202

図2.1-2 アカウントの設定



ⅲ) 「コンテナの設定」で「コンテナ名」にタグマネジメントするサイトの
ドメイン名を入力し、
コンテナの使用場所として「ウェブ」、「iOS」、「Android」の中からいずれ
かを選択し、最後に「作成」をクリックします。

GoTag203

図2.1-3 コンテナの設定



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

GoTag204

図2.1-4 Googleタグマネージャ利用規約


ⅴ) 図2.1-5に示すようにGoogleタグマネージャのタグが表示されます。

これをコピーし、ウェブサイトの全てのページの<body>の直後に貼り付けます。

Googleタグマネージャのタグは、

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

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

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

GoTag205

図2.1-5 Googleタグマネージャのタグ


なお、WordPressの場合、
Google Tag Manager」というプラグインがありますので、
これを利用するとよいのかもしれません。

GoTag206

図2.1-6 プラグイン/Google Tag Manager


Google Tag Manager」というプラグインをインストールすると、
サイドメニュー一般に「Google Tag Manager ID」という項目ができます。

ここにコンテナIDを入力しなければなりません。

GoTag207

図2.1-7 Google Tag Manager IDの設定






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

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

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

GoTag210

図2.2-1 管理画面(アカウント)

 

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

GoTag211

図2.2-2 管理画面(コンテナ)

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

(1) 「画面上」ブロック
主にアカウントの管理に関わるメニューがまとめられている。



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

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



(3) 「画面右」ブロック
メニューごとに詳細が表示される広いスペースとなっている。





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

タグ」、「トリガー」、「変数」は、特に重要な要素です。

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

GoTag212



2.3.1 タグ

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

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

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



2.3.2 トリガー

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

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

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

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



2.3.3 変数

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

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

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

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

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

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

4 Googleアナリティクスのイベントトラッキングにおいて示す「タグを作成」する時、
イベントトラッキングで参照する変数は
図2.3-1においてチェックを入れて有効にしておかなければなりません。

よくおわかりになられない場合は、
次のカテゴリの変数は全部有効にしておくことをおススメします。

ページ
クリック
ユーティリティ
フォーム

カスタム変数の定義の仕方については、本レポートでは省かせていただきます。

GoTag213

図2.3-1 Googleタグマネージャの組み込み変数

※ クリックすれば、図が拡大します。
表2.3-1 Googleタグマネージャの組み込み変数
表 Googleタグマネージャの組み込み変数





2.4 プレビューと公開

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

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

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

図2.4-1 プレビューの設定

図2.4-1 プレビューの設定

 

GoTag216

図2.4-2 プレビュー中の表示

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

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

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

GoTag217

図2.4-3 プレビュー/タグの表示

※ クリックすると、図が拡大します。

GoTag218

図2.4-4 プレビュー/変数の表示

※ クリックすると、図が拡大します。



【参考図書】

実践 Google タグマネージャ入門 増補版
畑岡 大作(アユダンテ株式会社)
インプレス
売り上げランキング: 17,681




スポンサーリンク

コメントを残す

このページの先頭へ

Top