ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

おすすめ情報

おすすめ情報

2017年1月11日

超基本!googleタグマネージャーの設定方法

ultra-basic-how-to-set-up-google-tag-manager
サイトのどこがどのように見られているのか、
目標とするページにどの程度達しているのかを可視化するために、
アクセス解析は今や必須と言っても過言ではありません。
そのアクセス解析を行う過程で外すことのできないのが、
タグの設置・設定です。

ひとえにタグと言ってもその種類は実に多く、
使用しているツールの数に依存します。

一つのサイトに設置するタグの数が多ければ多いほど、
管理も大変になっていくのですが、
googleタグマネージャーを使用することによって、
管理がとても楽になります。

今回は、様々なタグの中から
googleタグマネージャーを用いて、
アクセス解析ツールとしては最も一般的なgoogleアナリティクス、
ネット広告出稿媒体では代表的なgoogleアドワーズと
yahoo!プロモーション広告の基本タグを
設置する方法をご説明致します。

googleタグマネージャーを理解する

まず初めに、googleタグマネジャーとはどのようなものなのかを
理解しておく必要があります。

簡単に言うと、複数のタグを一元管理できるツールです。
といっても初めての方は中々イメージがつかないと思います。
おすすめ①
イメージとしては上図のような感じでしょうか。
この様々なタグが入っているgoogleタグマネージャーという箱を
WebページのHTML内に記述するだけで、
入っているタグも全て一括で管理することができます。

通常ですと、目標到達ページを計測したい場合には
そのページに各出稿媒体のコンバージョンタグを
入れるなどとページ毎に入れるタグを変更しなければなりません。

しかしこのgoogleタグマネージャーは、このタグ一つを
サイト内のすべてのページに入れておくだけで
良いという優れものです。

そんな優れたタグの一元化ツールですが、
若干特殊なツールですので初めて導入される方は
何がどうなっているのかを理解するのに苦しむかと思います。

では、そんな悩みの解決に向けて導入から初期設定までの
超基本的な流れを見ていきましょう。

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

まず初めに、googleタグマネージャーを導入する
ためにはgoogleアカウントを持っていないといけないので、
アカウントの取得を済ませましょう。

googleアカウントでgoogleタグマネージャーにログインした後は、
管理画面左上から「アカウント」を作成しましょう。
アカウント名には企業名や会社名を入れると良いでしょう。

その次は「コンテナ」を作成します。
コンテナとは実際にタグ管理する箱のようなものです。
このコンテナ毎に固有のコードが発行されますので、
Webサイトの名前やURLを入力しておきましょう。

最後にコンテナを使用する場所を選びます。
一般的なサイトに埋め込む場合は「ウェブ」で大丈夫です。

アカウント作成の例を挙げると、
A´という会社があり、その会社が運営しているサイトが
A,B,Cと三つあるのなら、
アカウント名はA´
コンテナ1はA
コンテナ2はB
コンテナ3はC
こんな感じになりますね。

アカウント開設後は管理する画面に入ってみましょう。
画面内上部の「ワークスペース」から実際の作業を行います。

googleタグマネージャーの設定

さて、アカウント開設した次は実際に設定に入っていきます。
googleアナリティクス、googleアドワーズ、
yahoo!プロモーション広告の三つに分けて見ていきます。

googleアナリティクス編

まずはアクセス解析を行うために必要な
googleアナリティクスのタグを設定します。

ワークスペース左側の「タグ」という項目を選択すると、
開設直後なので、まだ一つもタグが無い状態です。
「新規」と書かれている赤いタブをクリックすると、
名前、タグの設定、トリガーを設定する画面が開きます。
名前には自分が分かりやすい名前を入力しましょう。

次にタグの設定をクリックすると、
右側にタグタイプを選択する欄がでてきます。
今回のタグはgoogleアナリティクスタグなので、
一番上の「ユニバーサルアナリティクス」を選択します。

選択後はまず、トラッキングIDを入力するのですが、
これはgoogleアナリティクスのプロパティ設定から
確認ができるので、それを入力します。
UA-XXXXXXXXXで表記されているコードですね。
トラッキングタイプはデフォルト設定の
「ページビュー」で問題ありません。

タグの設定の後は、トリガーを設定します。
トリガーとはこのタグを発動させる条件を決めるもので、
今回の場合はサイト全体を計測したいので、
デフォルトで設定されている
「All Pages」を配信トリガーとします。
nimbus-tagmanager.google.com-2017-01-17-07-32-42
上図のような感じでgoogleアナリティクスにおける設定は
以上なので、最後に保存をクリックしましょう。

googleアドワーズ編

次はgoogleアドワーズのタグを設定します。
アドワーズのタグは二種類あり、設定方法も異なります。

まずはユーザーリストを蓄積するためのタグを
設定します。いわゆるリマーケティングタグと呼ばれるものです。

新規タグをクリックし、タグの設定のタグタイプ選択で
「AdWwordsリマーケティング」を選択します。

すると「コンバージョンID」を記入する欄がありますので、
リマーケティングタグに記載されている
id=以下の数字を入力します。

あとは配信トリガーをデフォルトのAll Pageで設定し、
保存で完了です。下図のようになっているでしょうか。
nimbus-tagmanager.google.com-2017-01-17-07-46-07
次はコンバージョンタグの設定ですが、
今回はタグタイプ選択で「adwords コンバージョントラッキング」
を選択します。複数項目が出てくるのですが、
コンバージョンIDとコンバージョンラベルの二つを入力します。
コンバージョンラベルにはlabel=以下の数字・文字を含む
コードを入力しましょう。

さて、さきほどのトリガー設定では、All Pageを選択しましたが、
今回は異なります。
コンバージョントラッキングの意はユーザーが目標ページを
閲覧した場合に発動させたいので、トリガーの設定をそれに
合わせる必要があります。

トリガー選択から新しいトリガーを追加します。
タグと同様にトリガーの名前を付けて、
トリガーのタイプはページビュー、
トリガーの発生場所は一部のページビューを選択します。

最後に重要なのが、
どのタイミングでタグを発動させるかの設定です。
今回はサイトの目標ページURLを
www.example.com/contact/doneとしましょう。

設定方法は複数パターンあるのですが、
Page URL、含む、contact/doneと3項目設定した後に、
トリガーを保存し、
先ほどのタグのトリガーとして設定すれば完了です。

トリガー設定完了画面
nimbus-tagmanager.google.com-2017-01-17-08-06-43
タグ設定完了画面
nimbus-tagmanager.google.com-2017-01-17-08-09-46

yahoo!プロモ―ション広告編

yahoo!プロモーション広告の場合も流れは
googleアドワーズとほとんど一緒なのですが、
異なる部分としては、
タグタイプの選択にyahoo!が無いということです。ですので、
yahoo!の場合は「カスタムHTML」というタグタイプを
選択します。

カスタムHTMLではyahoo!プロモーション広告の管理画面で
表示されるリマーケティングタグ、コンバージョンタグを
そのままコピーして貼り付けます。そして、
「document.writeをサポートする」にチェックを入れます。
あとはgoogleアドワーズと同様に、
リマーケティングならトリガーをAll Pageに、
コンバージョンタグなら先ほど作成したトリガーを紐づけます。

これで保存をすれば完了です。
nimbus-tagmanager.google.com-2017-01-17-08-23-14

googleタグマネージャーをサイトに設置する

ここまではgoogleタグマネージャー内での設定でしたが、
次はこの大元となるタグをサイトに設置していきます。

ワークスペース右上にコンテナ毎のコードが表示されているので、
それをクリックしてタグを表示させます。

するとコードが二種類表示されるので、
画面の指示通り、内と内にタグを設置します。
推奨はそれぞれの直下に設置するのが望ましいですが、
サイトの構成上どうしてもやむを得ない場合は
直下でなくてもかまいません。

また、以前はこのコードは一種類でしたが、
仕様変更により、現在では2種類となっています。

プレビューとデバックで検証する方法

さて、実はこれで終わりではありません。
実際にタグが正常に稼働しているのかを、
確認する作業が残っています。

画面右上の「公開」より「プレビューとデバック」を行います。
コードを埋め込んだサイトにアクセスします。
するとページ下部に現在のページで稼働しているタグの
一覧が出てきますので、発動してほしいタグが動いているのを
確認できれば大丈夫です。

「Tags Fired On This Page:」の部分に表示されているタグが
そのページで発動しているタグになります。
リマーケティングのタグやgoogleアナリティクスのタグなど、
基本的にAll pageで発動させるタグはこの項目で確認
ができれば良いです。

「Tags Not Fired On This Page:」の部分が
そのページで発動していないタグを表しています。
コンバージョンタグなど特定のページで発動するタグは
発動していないのが正しくなります。

このプレビューモードでタグの発動を確認できれば、
最後にワークスペース右上の「公開」を絶対に行いましょう。
この作業を行わないとタグが正常に反応しませんので
気を付けて下さい。

まとめ

複数のタグを一元管理できるこのgoogleタグマネージャー。
一見複雑に見えますが、基本的な設定であれば、
簡単に行うことができます。

また、今回はプレビューモードを活用しての
タグの設置確認を行いましたが、googleアナリティクスならば、
リアルタイムでの確認を、
各媒体のコンバージョンタグならば実際にテストメールを送信する
などしての確認を行った方が、より設定に確信が持てるでしょう。

このエントリーをはてなブックマークに追加
メルマガ登録