tagmane

【2017年最新版!】Googleタグマネージャ導入のメリットと使い方


こんにちは!nex8事業部営業担当の岡本です。

近年、サイトの規模にかかわらず、Webサイトの運営にはGoogleアナリティクスによる効果測定や、ネット広告の出稿が欠かせない存在になってきているのではないかと思います。
これらのサービスを導入するためには、HTMLソース内へのタグ設置が必須ですね。

しかしながら、日々さまざまな新サービスがリリースされる中、あれもこれもと試しているうちに「あれ?これ何のタグだっけ…?」となる方も多いのではないでしょうか。

上記のようなタグをきちんと管理することを「タグマネジメント」といい、タグマネジメントに使うツールを「タグマネージャ」といいます。

今回は数あるタグマネージャの中からGoogleタグマネージャについてご紹介していこうと思います。

タグマネージャとは?

冒頭ですこし触れさせていただきましたが、タグマネージャは、その名前の通り「タグの管理(タグマネジメント)」ができるツールです。
対象のサイト内にタグマネージャのコードを設置すると、そのコード1つでさまざまなタグの役割を果たしてくれます。

この記事でご紹介しているのは「Googleタグマネージャ」ですが、それ以外にも「Yahoo!タグマネージャー」やロックオンの「TAGエビス」、Adobeの「Dynamic Tag Management」などがあります。

これらのタグマネージャを利用することで、Googleアナリティクスなどの計測ツールタグや、広告用のリターゲティングタグ、コンバージョンタグ、FacebookやTwitterで使用するJavaScriptタグなど、それまでHTMLソース内に個別で設置していたタグを一元管理することができます。

タグマネージャを導入するメリット、デメリットって何?

では、タグマネージャを導入するメリットとはなんでしょうか?
ざっくりですが、タグマネージャを導入するメリットは大きく分けて3つあります。

■タグの管理が簡単になる
■Webページの読み込み速度が速くなる
■Web担当者のできることが増える

この3つについてそれぞれもう少し詳しく説明していきます。

■タグの管理が簡単になる
繰り返しにはなりますが、今まで個別にHTMLソース内へ設置してきたタグをタグマネージャの管理画面から一括で管理できるようになります。
たとえば、個別で設置していたタグを変更する場合、全ページのタグをそれぞれ修正する必要がありましたが、タグマネージャを利用すると、このような変更作業も簡単に行えます。

■Webページの読み込み速度が速くなる
個別でタグの設置をすると、利用するサービスの分だけサイト内にタグを設置する必要がありました。
タグマネージャを利用すると、複数あったタグがタグマネージャのコード1つになるので、もともと設置してあったタグの数にもよりますが、サイトの読み込み速度が複数のタグを設置していた時よりも速くなります。
サイトの読み込み速度はユーザーにストレスを与えるだけでなく、SEOにも影響があるので、多くのタグを設置している場合は、ぜひタグマネージャを利用して1つにまとめたいですね。

■Web担当者のできることが増える
たとえばサイトの管理を外部に委託している場合、タグを変更するにも、一度外部に確認して、依頼して、変更して、確認して・・・というように多くの時間やコストが発生していることが多いのではないでしょうか。
このようなとき、タグマネージャを利用すると、サイトを直接変更しなくても、タグマネージャの管理画面からタグの変更が行えるので、今まで時間をかけて依頼していた修正も、担当者の方が直接行えるようになります。

 

これだけ聞くと、タグマネージャって導入しない理由がないように聞こえますね。
しかし、もちろん万能というわけではなく、いくつかデメリットも存在しますので、これらを理解したうえで導入していただければと思います。
デメリットは大きく下記の3つです。

■リスクの集中
■すべてのタグに対応しているわけではない
■移行作業に手間がかかる

■リスクの集中
タグが一括管理になって便利な反面、タグマネジメントのシステムに障害が起きた場合、すべてのタグが機能しなくなります。
ただ、こちらに関しては外部のファイル管理でも同じリスクとなります。
また、よほど心配な場合GoogleやYahoo!などでは有償のサービスにはなりますが、SLA(サービス品質保証制度)も行っています。

■すべてのタグに対応しているわけではない
今まで、さまざまなタグが一元管理できるとお伝えしてきましたが、同期処理が必要なタグ(Googleアナリティクスのウェブテスト機能等)や、ページ構造にかかわるタグ(SNSのシェアボタンを生成するJavaScript等)といった、ごく一部のタグは現在も対応しておらず、直接HTMLソース内に設置する必要があります。

■移行作業に手間がかかる
タグを一元管理するために、まずはタグマネージャのコードをサイト内に設置しなくてはなりません。
その後、現在サイト内に設置されているサービスタグを一回外し、タグマネージャで設定し直す必要があります。
これらの作業は、現在使っているサービスが多ければ多いほど移行作業に時間がかかります。
タグマネージャは利益に直結するサービスではないため、この手間が導入のネックになるかもしれません。
しかし、長い目で見ればサイトの管理がしやすくなりコスト(運用工数)減にもつながるので、サイトリニューアル等と一緒に移行作業をしていただくのがおすすめです。

これらのメリット、デメリットを理解してタグマネージャの導入を検討していただければと思います。

タグマネージャ導入タイミングの見極め方

タグマネージャの導入検討に際しては、メリットとデメリット以外にも、必要な場合とそうでない場合という観点で考えることが出来ます。

たとえば、計測ツールと広告サービスを複数導入しているサイトがあるとします。
今後もいくつか新しい広告を試してみたいし、計測ツールもよいものがあれば入れ替えようかな…なんて考えている場合、タグマネージャを利用した方が、今までよりもタグの管理が簡単になると思います。

一方で、現在全く広告は出していないし、今後も出す予定ないし…当分Googleアナリティクスだけでいいかな…というサイトの場合、タグマネージャを使っても使わなくても、タグの管理にかかる手間はほとんど変わりません。
むしろ、タグマネージャに置き換える作業が無駄になってしまいます。

自分のサイトは今挙げたどちらに当てはまるのかをよく考えて、導入のタイミングを判断しましょう。

GTMを実際に設定してみよう!

では実際にGoogleタグマネージャ(GTM)を使って、どうやって導入・設定するのか下記で説明していきます。

導入前の準備をする

【タグマネージャのアカウントを開設しよう】

まず、Googleタグマネージャのアカウントを開設する必要があるのでその説明からします。
(※Googleのアカウントを持っていない場合はそちらを事前に作成しておいてください。)
https://www.google.com/intl/ja/tagmanager/

1

上記URLをクリックしページが表示されたら、「今すぐ登録」を押してください。

【アカウントの設定をしよう】
次に、アカウントの設定を進めていきます。

2

登録後上図のようなページが表示されます。
アカウント名は特に決まりはありませんが、通常は企業名等を設定することが多いです。
また、このときアカウント名の下にある「Google や他の人と匿名でデータを共有」というチェックボックスにチェックを入れると、匿名でデータを共有する代わりに、ベンチマークサービス(自社サイトのデータを他社サイトと比較できるサービス)を利用できるようになります。

【コンテナの設定をしよう】

3

アカウントの設定が終わったら、コンテナの設定を進めていきましょう。
「コンテナ」とはGTMにおける管理の単位です。

コンテナ1つに対して、1つの管理画面が作成されます。
この管理画面の中で複数のタグを管理することになります。
基本的に、タグの管理はそのサイトごとに行う場合が多いかと思いますので、「1サイトにつき1コンテナ」と考えていただいて問題ありません。
複数サイトがある場合は、サイトごとにコンテナを作成していただくと管理が簡単になります。

また、1つのサイトを複数のコンテナに分ける場合もありますが、これは応用編になりますので、今回は「1サイトにつき1コンテナ」で進めていきます。

コンテナ名もアカウント名と同様、特に決まりはありませんが、複数サイトがある場合はサービス名などで設定すると管理がしやすくなるかと思います。

コンテナの使用場所は、それぞれ設置する場所に合わせて選択してください。
今回はWebサイトですので、「ウェブ」を選びます。

【スニペットを設置しよう】

4.

利用規約同意後、上図のような画面が表示されます。
GTMでは、この「スニペット」を利用してタグを一元管理していきます。
「スニペット」とはGTMのコードのことを指します。
このタグを上記の案内に従い、サイト内のすべてのページの<head>>タグ内と、<body>タグ直後に設置していきます。

この設置が終わったら、導入準備は完了です!

タグの設定をする

では、GTMの管理画面からタグを設定してみましょう。

今回はリターゲティング広告のタグ設定をしてみたいと思います。
リターゲティングタグの場合、一般的には、「リターゲティングタグ」と「コンバージョンタグ(CVタグ)」の2種類を設定します。
nex8のスタティックリターゲティングでもこの2種類を使うので、これを例に見ていきたいと思います。

【リターゲティングタグを設定してみよう】

ワークスペース.

リターゲティングタグから設定したいと思います。
管理画面の、ワークスペースタブから「新しいタグを追加」を選択してください。

6.

すると、上図のようなページが表示されます。
「タグ」と「トリガー」を設定することでGTMを通じたタグの設置が完了します。

まずは「名前のないタグ」を「リターゲティングタグ」等、何のタグなのかわかる名前に変更しましょう。
続いて「タグの設定」を選択します。

7

選択すると上図のような画面が表示されるので、この中から今回はカスタムHTMLタグを選択してください。

8

タグを入力する画面が出てきますので、予め用意したタグを入力します。

9.

次にトリガーの設定をしていきます。
トリガーとはタグが読み込まれるための条件のことです。

10

今回の設定でのリターゲティングタグは、ユーザーがサイトに訪れたタイミングであればどのページでも読み込みを行いたいので、「All Pages」(すべてのページビュー)をトリガーとして指定しています。
指定のページでのみタグの読み込みを実施したい場合についてはCVタグのところで説明します。

これで保存をすれば、リターゲティングタグの設置は完了です。
とっても簡単ですね!

【CVタグを設定してみよう】

では、CVタグの設定もしていきましょう。
途中までは上記でご説明したリターゲティングタグと同じで、管理画面のワークスペースタブから、「新しいタグを追加」を選択、名前を付けて、タグの設定をクリックします。

13

先ほどと同じようにHTMLカスタムタグを選択し、予め用意していたCVタグを設置します。

次にトリガーの設定ですが、リターゲティングタグの場合は、すべてのページへのアクセスをタグが読み込まれるための条件にしたかったので、「All Pages」をトリガーとして設定しました。
しかしCVタグの場合、購入完了ページにユーザーが訪れた場合のみタグを読み込む条件としたいので、購入完了ページへのアクセスを新たなトリガーとして作成し設定する必要があります。

新しいトリガー

「トリガー」を選択し、右上の+マークをクリックします。

トリガー設定.

「トリガー設定」が表示されるので、クリックして下さい。

15

ここでトリガーのタイプを選択します。
今回は指定したページを見た時(ページビュー)をトリガーとして設定するので、「DOM Ready」、「ウィンドウの読み込み」、「ページビュー」の中から選択します。
「どうして同じページビューなのに3つも分かれてるの?」と思った方もいるかと思います。
これは、それぞれページビューとみなすタイミングが違うためです。

読み込み表

「ページビュー」が最も早く、「ウィンドウの読み込み」が最も遅く反応します。
ここでは「ページビュー」を選択しています。

16

トリガータイプを指定すると、トリガーの設定画面が表示されます。
トリガーのページを指定するために、「一部のページビュー」にチェックを入れます。

購入完了ページへのアクセスをトリガーとして指定するので、「Page Path」を選択します。
「Page Path」とは、ドメイン以降のページや、ディレクトリ部分を指定するときに利用します。
つまり、上記の設定は、「ドメイン以降のURLが○○(指定の値)と等しいものを指定する」という意味になります。

たとえば、購入完了ページのURLが「http://nex8.com/buy/thanks.php?step=finish」だった場合、「/buy/thanks.php」の部分を入力します。

これで右上の保存を選択すれば、CVタグの設定も完了となりますので、すべてのタグの設定が完了となります。

動作確認をする

設定が完了したら問題なくタグとトリガーが動作するかの確認を必ず実施してください。

プレビュー画面.

管理画面右上にある公開タブからプレビューを選択してください。

debak

選択すると、「プレビューモード」となり、上図のような画面が表示されます。
この状態のままログアウトせずに、GTMでタグを設置したサイトに同じウェブブラウザからアクセスすることで、タグの稼働状態を確認できるようになります。

ページビュー、プレビュー

ログインしたままGTMでタグを設置したサイトにアクセスすると、上図のようにタグの稼働状態が見えるようになります。
右側がタグの稼働状況で、「Tags Fired On This Event」は現在閲覧しているページで稼働しているタグ、「Tags Not Fired On This Event」が稼働していないタグをそれぞれ表しています。

また左側の項目は、ページの状態を表していて、設定したトリガータイプによって表示のされ方が異なります。
先ほど「ページビュー」でトリガーを指定したので、「PageView」の項目でのみ稼働していると表示され、残りの「Window Loaded」、「DOM Ready」では稼働していないとされます。

よって上図の画像をまとめると「ページビューでリターゲティングタグが稼働しており、CVタグは稼働していない」という状態にあるということです。

今回は、リターゲティングタグをすべてのページで稼働するようにトリガーを設定したので、Topページのプレビューでタグが稼働していれば、その他のページでも問題なくタグが稼働していると考えることが出来ます。
リターゲティングタグと同じ要領で、CVタグも稼働の状況を確認し、問題がなければいよいよタグの公開を行いましょう。

公開

管理画面右上の公開タブから「公開」を選択すると上図のようなページが表示されます。
これまで設定した内容がわかるように、名前と説明文を記載し、右上の「公開」を選択すると本番環境にタグが反映され、タグの設置は完了です。

まとめ

いかがでしたか?
Googleタグマネージャの導入メリットと、設定方法についてご紹介しましたが、Googleタグマネージャ、使いたくなってきましたか?

最初の設定は少しだけ面倒なところもあったりしますが、一度導入してしまえば、今まで面倒だったタグの管理や設置工数などが削減できる、とっても便利で頼もしいツールなので、計測ツールやリターゲティング等、新しくタグを設置する機会があれば、ぜひトライしていただけるとうれしいです。


nex8のリターゲティングをもっと詳しく

このブログは株式会社ファンコミュニケーションズでリターゲティングサービスを提供しているnex8事業部のメンバーが中心に運営しているメディアです。
中小EC向けに役立つ情報を分かりやすくお届けしています。
nex8に関して少しでも興味を持っていただけましたら、こちらよりお気軽にお問い合わせください。

The following two tabs change content below.

岡本ひかる

nex8事業部営業の岡本です。美大を出て、人材会社に入り、nex8にやって来ました。 好きなものはスノーボードとお絵かき。苦手なものはパクチーと自己紹介です。

こちらの記事も読まれています

「【2017年最新版!】Googleタグマネージャ導入のメリットと使い方」への2件のフィードバック

コメントは停止中です。