【2019年版】初めてでもなんとなくわかるGoogleタグマネージャーの使い方を解説

先日、あるプロジェクトでアクセス解析をGoogleタグマネージャー(以下GTM)を設定しました。0からいろいろと調べたことをシェアします。実際に設定したクリックイベントなども簡単に紹介します。

Googleタグマネージャーとは?

最初に「そもそもタグマネージャーってなんだ!」という話ですが、

タグマネージャーとは一言で言うと「Webサイトの運用で計測などに利用するタグを一箇所で管理するツール」のことです。

メリットと背景

GoogleAnalyticsなどのアクセス解析ツール、DSPなどの広告、レコメンドツールなどWebサイトを運用していると必要になるタグは増える一方です。

タグマネージャー導入前はWebページに直接タグを埋め込む必要があり、新しいタグを増やしたり減らしたりする度にいちいちHTMLを修正する必要がありました。しかも、マーケターが直接やるのではなく、エンジニアに頼んで修正を依頼することが基本的に多かったと思います。

タグマネージャーを導入するとタグマネージャーの管理画面上でタグの設置や削除が完結するためいちいちHTMLを修正して、サーバーにアップして、、、という手間が無くなります。また、「このページのときだけこのタグを有効にする」といった細かい条件も指定することが可能です。

また、実際にタグを本番環境へ反映する前にプレビューでタグが反映されるのかどうかテストすることも可能になります。

さらに、バージョン管理といってタグ修正前後で履歴を残すことができるので管理が簡単になります。

 

引用:Googleタグマネージャの概要と導入方法(2017年最新版)
http://www.asobou.co.jp/blog/web/gtm

導入方法

GTMの導入方法方法についてはこちらのブログに詳細が乗っているため説明は譲ります。

Googleタグマネージャの概要と導入方法(2017年最新版)
http://www.asobou.co.jp/blog/web/gtm

基本的には

アカウントを登録→GTMタグ発行→全ページにタグ設置という流れです。

GTMの設定で必要なタグ、トリガー、変数

GTMの大きくタグ、トリガー、変数の3つに分かれています。

タグ

タグはその名の通り「どのタグを設置するのか」を設定する箇所。GoogleAnalyticsとかAdWordsなどタグの種類を指しています。タグのタイプはさまざまあり、Googleサービスのタグ以外もカスタムHTMLで設定が可能です。

トリガー

トリガーは「いつタグを有効にするのか」を設定するところ。なので「タグ」と「トリガー」はひも付きます。

例えば、コンバージョンタグはお問い合わせ完了ページだけに設置したいので完了ページのURLを指定したトリガーを作成して紐づける。

そうすることで他のページにはコンバージョンタグは有効になりません。

変数

変数はユーザーの行動によって値が変わる空の箱のようなものです。組み込み変数とユーザー定義変数があります。基本的には組み込み変数でことは足りると思います。

具体的には以下のVideoPrividerやVideoURL,ScrollDirectionなどが変数です。新規作成ボタンを押すとこんな項目が出てきます。

ユーザーが見ているページや動画によってVideoURLやVideoTitleなど変数の中身は異なってきます。

ただ変数として箱を用意してあげることが最初に必要なので箱を作っておくということです。わからなかったらとりあえず全部チェックをつけとけばいいかと思います。

クロスドメイントラッキング

今回、複数ドメイン間に設置をしたためクロスドメインの設定が必要でした。

GTMだとその設定も簡単で管理画面上

「タグ>ユニバーサルAnalytics>詳細設定>設定するフィールド」に以下の値を

フィールド名:値

allowLinker:true

cookieDomain:auto

「タグ>ユニバーサルAnalytics>詳細設定>クロスドメイントラッキング>自動リンクドメイン」に

対象のドメインを設定します。これで完了です。

クリックイベント

また、今回は特定のリンクへのクリック数を計測したかったのでクリックイベントを設定しました。GTMを使わない場合はHTML上のソースを編集する必要がありましたが、GTMではこちらも管理画面上で簡単に設定可能です。

タグ>新規作成に進み

  • タグタイプ→ユニバーサルAnalytics
  • トラッキングタイプ→イベント
  • カテゴリ→任意(この場合はClick)
  • アクション→任意(この場合はtop-banner)
  • ラベル→{{Click URL}} ※変数の{{Click URL}} にチェックを忘れずに。
  • 非インタラクションヒット→真
  • このタグでオーバーライド設定を有効にする→チェック
  • トラッキングID→任意のもの
    ※カテゴリ、アクション、ラベルは任意のものを設定してください。

トリガー>新規作成

  • トリガーの種類→リンクのみ
  • このトリガーの発生場所→すべてのリンクor一部のリンク
  • 一部のリンクをクリックした場合→条件設定

と設定をしてタグとトリガーを紐付けることでクリックイベントが計測されるようになりました。

スクロールの距離

コンテンツ評価の一つとしてそのページがどの程度読まれているのか=どの程度スクロールされているのかに置き換えて計測することにしました。

GTM上の設定ではタグに

  • タグタイプ→ユニバーサルAnalytics
  • トラッキングタイプ→イベント
  • カテゴリ→任意(この場合はスクロール)
  • アクション→任意(この場合は{{Page URL}})
  • ラベル→任意(この場合は{{Scroll Depth Threshold}}{{Scroll Depth Units}})※変数の{{Scroll Depth Threshold}}{{Scroll Depth Units}}にチェックを忘れずに。
  • 非インタラクションヒット→真
  • このタグでオーバーライド設定を有効にする→チェック
  • トラッキングID→任意のもの
    ※カテゴリ、アクション、ラベルは任意のものを設定してください。

トリガーには

  • トリガーの種類→スクロール距離
  • 縦方向スクロール距離→割合かピクセル数(それぞれ割合か絶対数のピクセル数で計測するのか。割合の場合はしきい値を設定することができます。この場合50%,75%,90%)
  • 発生場所すべてor一部のページ(一部のページなら条件を設定)

で何%ユーザーがそそのページの長さに対してスクロールをしたのか計測することができます。注意点は短いページは表示された時点で90%になってしまうということ。

また、しきい値を例で最大90%にしているのは実際のWebページはフッターなどがあるため。100%スクロールするユーザーはほとんどいないと考えることができます。

Youtube動画再生状況

最後にYoutubeの動画がどの程度見られているのかを計測することも可能です。

まず、ユーザー定義変数>カスタムJavaScriptに以下のスクリプトを設定します。名前は後で利用するのでVideo Actionで保存。

function() {
var status = {{Video Status}};
switch (status) {
case 'start':
return 'Play';
case 'pause':
return 'Pause';
case 'seek':
return 'Seeking';
case 'progress':
return + {{Video Percent}} + '% Watched';
case 'complete':
return '100% Watched';
}
}

タグには

  • タグタイプ→ユニバーサルAnalytics
  • トラッキングタイプ→イベント
  • カテゴリ→任意(この場合はYoutube)
  • アクション→{{Video Action}}(先程作ったユーザー定義変数の名前)
  • ラベル→{{Video Title}}
  • 非インタラクションヒット→真
  • このタグでオーバーライド設定を有効にする→チェック
  • トラッキングID→任意のもの

です。これで再生されたYoutube動画のタイトルがVideTitleのところには入っていきます。

トリガーの設定は

  • トリガーの種類→Youtube動画>すべてにチェック
  • 進捗状況→しきい値を設定
  • すべてのYoutube動画にJavaScriptAPIサポートを追加するを設定
  • このトリガーの発生場所→すべてor一部の動画

としてタグとトリガーを結びつけることでどのYoutube動画がどの程度再生されているのかを見ることが可能になります。

以上、備忘がてらGTMの設定について荒いですが紹介しました。慣れるまではいろいろプレビューモードで試行錯誤することが有ると思いますが、慣れてくると簡単に設定が終わるので便利だと思います。

今回参考にしたURL

https://ayudante.jp/column/2017-09-15/17-41/
https://support.google.com/analytics/answer/1033068?hl=ja&topic=1033067&ctx=topic
http://www.kagua.biz/tagmanager/youtube-triggers-and-variables.html#GTMYouTube
https://support.google.com/tagmanager/answer/7182738?hl=ja&ref_topic=7182737
https://ayudante.jp/column/2017-10-24/13-04/
http://www.kagua.biz/tagmanager/gtmclick-keisoku.htmlhttps://www.simoahava.com/analytics/the-youtube-video-trigger-in-google-tag-manager/

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です