WNT-Column-20131219
Column

【図解】はじめてのGoogleタグマネージャ

【図解】はじめてのGoogleタグマネージャ

こんにちは。プランナーの川村です。今回は、WEBマスターならぜひ活用したいツール「Googleタグマネージャ」のキホンを、図解と用語解説を交えて、できるだけ簡単に紹介してみたいと思います!


Googleタグマネージャって?

企業のWEBマスターの方も、制作会社のディレクターの方も、ここ数年でGoogleアナリティクスでWEBサイトのアクセス解析をしたり、Adwordsで広告出稿を管理をしたり、といった機会が増えているのではないでしょうか。
これらのツールを使う際には、WEBページのhtml内に専用のタグを記載していると思いますが、記載するタグが増えてくると、タグの差し替えやページごとの出し分けが必要になったときに、都度htmlの更新作業が必要になり、管理も煩雑で、地味に面倒だったりしませんか?

そんな時に便利なのが、Googleが提供しているGoogle Tag Managerです。
Googleタグマネージャを使えば、WEBサイトで使用している様々なタグを、1つの管理画面上でまとめて管理することができるようになります。

これはちょっと便利そう!ということで、ビーワークスWEB制作部でもさっそく導入してみたのですが、いざやってみると何やら新しい用語が出てきたり、概念を理解したりするのに、意外と苦労したので…今回は、私なりにできるだけわかりやすく、Googleタグマネージャの主な機能を、図解と用語解説を交えてご紹介してみたいと思います!
これからGoogleタグマネージャを導入される方にとって、少しでもお役に立てれば幸いです。

※ この記事ではすべての設定方法については触れていませんので、詳しい設定方法については、Googleタグマネージャの公式ヘルプをご参照ください。

Googleタグマネージャでできること

例えば、あるWEBサイトにおいて、「Googleアナリティクス」はすべてのページに入れるけれど、「Adwordsリマーケティング」は商品ページと資料請求ページに、「Adwordsコンバージョントラッキング」は資料請求ページだけに入れたいという場合、基本的には、各ページのhtmlごとにタグの記述を分ける必要があります。
Googleタグマネージャを使わない場合
Googleタグマネージャを使えば、「コンテナ」という入れ物をhtml内に組み込んでおいて、その入れ物の中に、どの「タグ」をどんな「ルール」で入れるかを、WEBブラウザ上で設定・管理できるようになります。
Googleタグマネージャの概念図


コンテナ、タグ、ルール、マクロ…?

さっそく、「コンテナ」「タグ」「ルール」など複数の用語が出てきました。これらを中心に、Googleタグマネージャでよく出てくる用語を、簡単に解説します。

「コンテナ」と「コンテナスニペット」

コンテナ」とは、「タグ」を入れる入れ物のようなもので、必要に応じて複数作成することができます。

コンテナ

この「コンテナ」をhtmlに配置するときに記述するのが「コンテナスニペット」です。「コンテナスニペット」をhtmlに記載することで、そのWEBページを Googleタグマネージャで管理できるようになります。

コンテナスニペットのコード例

※コンテナスニペットをhtmlに記述する際は、Googleアナリティクスなど個別のタグはhtmlから削除します。

「タグ」

タグ」はWEBページ上で実行され、情報を取得・送信するhtmlコードです。
1つの「コンテナ」の中に「Googleアナリティクス」や「Adwords コンバージョントラッキング」「Adwords リマーケティング」など、複数の「タグ」を作成し、配信することができます。これらはすべて管理画面上で作成・設定変更ができ、htmlに個別のコードを直接記載する必要はありません。
タグ

「ルール」

ルール」は「タグ」を配信する条件のことです。
例えば、

  • 全てのページ
  • URLに”/product/”を含むページのみ

など、ページ単位で配信条件を分けることができます。
さらに、設定次第では、

  • 流入元が facebook の場合
  • 購入金額が 1万円以上 の場合

など、特定の条件で「ルール」を作成することもできます。

「マクロ」

冒頭の図には出てきませんでしたが、「マクロ」とは、先程の「ルール」でいうところの、“URL”“流入元”“購入金額”などにあたる部分です。つまり、「○○○が□□□の場合」の、“○○○”の部分です。

“URL”“流入元”など、よく使いそうないくつかの「マクロ」は、最初から用意されていますので、自分で設定する必要はありません。「購入金額が1万円以上の場合」などの独自ルールを使いたい場合は、“購入金額”という新しい「マクロ」を定義することができます。


Googleタグマネージャの画面を見てみる

では、さっそくGoogleタグマネージャの画面を見てみましょう。
Googleタグマネージャの画面
上記は「WebNAUT」という「コンテナ」のサマリー画面です。左カラムのメニューとメインカラムの中央に、「タグ」「ルール」「マクロ」という項目があり、それぞれの下に、作成された項目が格納されています。

ルールの編集画面

次に、「ルール」の編集画面を見てみましょう。
ルール」は「タグ」を配信する条件であり、どの「タグ」にも必ず「ルール」を指定する必要があります。
特に出し分けが必要なく、すべてのページに配信したい場合は、「すべてのページ」という「ルール」を適用することになります。
ルールの画面
「すべてのページ」という「ルール」の場合、条件は

【{{url}}】【正規表現に一致】【.*】

と定義されています。
つまり、この「ルール」が適用されれば、どんなURLのページでも「タグ」が配信されることになります。

さきほど例に上げた、「流入元がfacebookの場合」というルールの条件は、

【{{referrer}}】【含む】【facebook.com】

と定義することができます。

【{{  }}】の部分に、用意されている項目以外の指定をしたい場合は、新しい「マクロ」を作成する必要があります。(マクロの設定については、今回は割愛します。詳しく知りたい方はGoogleタグマネージャ公式ヘルプのマクロの項目をご参照ください。)

タグの編集画面

例として、Googleアナリティクスの「タグ」を作成してみましょう。
タグの画面

タグ編集画面の入力項目
①タグ名
自分でわかりやすいように任意の名前をつけます。
今回は「Googleアナリティクス」と設定しています。
②タグの種類
Googleアナリティクス」を選びます。
③ウェブ プロパティ ID
Googleアナリティクスのプロパティごとに発行される「トラッキング ID」を記入します。
④トラッキング タイプ
ページビュー」を選びます。
⑤配信のルール
すべてのページ」を指定します。これにより、コンテナスニペットを入れたすべてのページでGoogleアナリティクスの「タグ」が配信されるようになります。
配信先を限定したい場合は、その条件を定義した「ルール」を作成して「タグ」の設定画面で該当する「ルール」を適用します。

このように、管理画面上でさまざまな種類の「タグ」を作成することができます。タグの種類や詳細な設定方法についてはGoogleタグマネージャ公式ヘルプのタグの項目をご参照ください。


プレビューとデバッグで確認して、公開

作成した「タグ」を「コンテナ」に配信してみましょう。
と、その前に、Googleタグマネージャには、作成した「タグ」が問題なく配信され、機能するかどうかを確認できるプレビューとデバッグの機能が備わっています。
プレビューとデバッグを選択した画面
この状態で、対象のWEBサイトをブラウザで確認すると、ページ下部に「Googleタグマネージャ」というウィンドウが表示されます。
さっそくWebNAUTのトップページを見てみましょう。
ウィンドウが表示された画面
ページ下部に「Googleタグマネージャ」ウィンドウが表示されているのが確認できます。
ここで、配信したいタグのステータスが「配信: タグマネージャ読み込み」になっていれば、問題なく配信されている証拠です。

問題ないこと確認したら、いよいよ公開です。
コンテナのサマリー画面に「バージョンを作成」というボタンがあるので、これをクリックします。すると、ここまで設定した状態が、1つの「バージョン」として保存されます。
タグの画面
バージョン」を作成すると、「バージョンを作成」ボタンが「公開」ボタンに変化しますので、これをクリックします。
公開設定画面
以上の作業で、設定したタグがコンテナに配信されます!
ちなみに「バージョン」は、設定を変更する度に増やしていくことができるので、例えば前の状態に戻したい場合は、過去のバージョンを選択して公開することができます。


まとめ

いかがでしたでしょうか。Googleタグマネージャは一見、用語や構造が複雑に思えるかもしれませんが、複数のタグを管理しているWEBサイトほど、一度設定してしまえばその後の管理が楽になると思います。この記事が、少しでもそんなWEBサイトを管理されているWEBマスターの方のお役に立てれば幸いです。

thumbnail_b_direction_131216

記事が気に入ったらシェアしよう

この記事を書いたメンバー

川村 佳乃 プランナー/ディレクター

自分たちが生みだすモノや仕組みで、誰かをもっとワクワクさせたい。
そんな仕事のために、大事にしているのはお客様の商品を愛すること、だけど冷静にズケズケも言うこと。

成果につながるWeb制作を

成果につながるWeb制作を
ビーワークスのミッションは「デザインで世の中を動かすこと」。
出版物、販促ツール、WEBサイト、ゲームアプリなど、多用な領域でクライアントのビジネス拡大に貢献するデザインを提供する制作会社です。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 蠍座
  • 射手座
  • 山羊座