Web計測タグの基礎 #GoogleTagManager

計測タグについて

オンラインビジネス拡大のために不可欠なもの。
たとえば、以下のような外部ツールを使ってオンラインでの受注増加や顧客満足度の改善を行いたいときには計測タグの導入が必須となる。

これらの施策で効率よく成果改善に繋がるためには、正しい計測タグの設定と適切な管理が重要となる。

Web計測ツールのタイプ

Webサイトの計測を行うツールは大きく以下の3種類に分かれる。

Webビーコン型
サーバーログ取得型
パケットキャプチャリング型

Webビーコン型の計測ツールはWebサイトに「計測タグ」を導入することによって手軽・低コストで利用できるため人気が高い。
https://webtan.impress.co.jp/e/2009/09/24/6386

計測タグの形式

計測タグとはWebビーコン型の計測ツールに情報を送るためのもので、
HTMLのimgタグかscriptタグの形式で提供されることが多い。(稀にPHP形式のものもある)

imgタグ(画像タグ)形式

計測タグで最もシンプルなタイプ。このタグを自分が管理するサイト内のページに貼ることで、サイト訪問者がページを開いたとき、不可視の透過画像がページ内に表示されるようになる。

この画像はWeb計測ツールのサーバーからブラウザに読み込まれるようになっているため、画像が読み込まれるときに
画像読込元のWebページのURL、Cookie、グローバルIPアドレス、User Agentなどの情報がアクセスログとしてWeb計測ツールのサーバーに記録される。

計測タグ発行元のツールでは、このアクセスログを使ってサイト訪問者の行動分析や、オンライン広告の効果測定などを行うことができる。

A8.netのimgタグ版計測タグ

<img src="https://px.a8.net/cgi-bin/a8fly/sales?pid=s00000000012345&so=order00023&si=1000.1.1000.a8" width="1" height="1">

imgタグ形式の計測タグとCookie

imgタグタイプの計測タグには動作するために3rd-Party Cookieに依存しているものが多い。
だが近年のブラウザは3rd-Party Cookieの送受信をブロックするものが増えたため、以前はimgタグ形式の計測タグを発行していたサービスでも現在ではscriptタグ形式に移行したところが多く、imgタグ形式の計測タグをあまり見なくなった。

サードパーティークッキー問題について | 伊藤みゆきブログ

scriptタグ形式

計測タグで最も一般的なタイプ。
JavaScriptのプログラムによってWeb計測に必要な情報収集・通信を行うことで柔軟で複雑な動作を行うことができる。

プログラムであるため、導入手順書やヘルプに書かれた仕様を無視して「同じページ内に同じサービスから発行された同種の計測タグを二重に動かす」等すると正しく動作しないことがある。

A8.netのscriptタグ版計測タグ

<span id="a8sales"></span>
<script src="//statics.a8.net/a8sales/a8sales.js"></script>
<script>
a8sales({
  "pid": "s00000000012345",
  "order_number": "order00023",
  "currency": "JPY",
  "items": [
    {
      "code": "a8",　
      "price": 1000,
      "quantity": 1,
    },
  ],
  "total_price": 1000,
});
</script>

また、各Webサイトの環境に合わせてカスタマイズが必要な計測タグの場合、JavaScriptの理解がないと取り扱いが難しい。

scriptタグとimageタグが融合した計測タグ

script形式の計測タグはブラウザ設定でJavaScriptの動作をブロックしているサイト訪問者のブラウザ上では動作しないため、計測タグの提供元によってはimgタグ形式の計測タグと一体化させているケースがある。
このとき、imgタグをnoscriptタグで囲うことにより、JavaScriptが動かない訪問者にのみimgタグが読み込まれるように作られていることが多い。

Facebookの計測タグ

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '0123456789');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=0123456789&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

計測タグが必要になる状況の例

アクセス解析の実施
Web施策の成果測定、結果の比較
サイト訪問者への広告出稿（あるいは配信除外）
成果報酬型アフィリエイト施策の実施
Webサイト上でチャットボットツールを利用する

Webサイトを使ったプロモーションを行う場合、PDCAを回すためには何らかの計測タグが必ず1種類以上必要になる。

計測タグの種類（代表的なもの）

計測タグには複数の種類があるので、タイプ別に分類してそれぞれ紹介する。

※ 実際の計測タグに明確なタイプ分けや共通して定まった名称がある訳ではないので、人やサービスによって分類の仕方は必ずしも一致しない。

コンバージョントラッキングタグ

他の呼び方

コンバージョンタグ、CVタグ、成果タグ

用途

どの施策が成果に繋がったのか、どんな見込み顧客に施策が響いたのか、成果の件数と費用対効果を確認することができる計測タグ。

設置先ページ

基本的にサンクスページ(成果が発生したときに表示されるページ)に設置して使用する。
サンクスページ訪問発生時以外にもサイト訪問者が以下のような行動を行ったときに発火するよう設定することもある。

サイト訪問者が電話発信リンクがタップされたとき
PDFをダウンロードするためのリンクがタップされたとき

Google Tag Managerのようなタグマネージャーのタグも「ワンタグ」の一種。

設置先ページ

基本的にプロモーション対象のWebサイトの全ページに設置して使用する。

ベースタグ

他の呼び方

ベースコード、グローバルサイトタグ、ローダー

用途

ワンタグと似ているが、ベースタグを記述した後に短いコードを追加することで「ベースタグのどの機能をこのページで使うのか」を指定して使うものが多い。
「ベースタグ」と「短いコード」が読み込まれる順序を間違えると正しく動作しないため取り扱いに注意が必要。
JavaScriptについてある程度理解がある人が設定することが望ましい。

Facebook広告、Google広告、Yahoo広告、LINE Ads Platformなど多くの広告サービスの計測タグでこの方式が使われている。

設置先ページ

基本的にプロモーション対象のWebサイトの全ページに設置して使用する。

LPOタグ

他の呼び方

テストタグ、Optimizeコード

用途

Webサイト上でA/Bテストを行うため、実際のhtmlソースを編集することなくサイトの内容をJavaScriptによって上書きしたり、別のURLにリダイレクトしたりするためのタグ。

設置先ページ

A/Bテストの検証対象ページ。合わせて同じツールから発行されるコンバージョンタグを並用することで、どちらのパターンがより成果に繋がる可能性が高いパターンか検証することができる。

計測タグに関わるそのほかの用語

トラッキング

「計測」とほぼ同じ意味で使われることが多い。

発火

計測タグが貼ってあるページをサイト訪問者が閲覧することで
計測タグがブラウザに読み込まれて実行されることを 「計測タグが発火する」 と表現する。
単に「計測タグが実行された」とも表現することもある。

設置

特定のページがブラウザによって開かれたタイミングで計測タグが発火するようにHTMLソースに計測タグを埋め込む、あるいはタグマネージャー上で発火するように設定すること。
「タグを設置する」と同じ意味で「タグを貼る」「タグを設定する」「タグを導入する」のように表現することもある。

計測タグ導入前の注意

各計測ツールの利用規約に目を通し、
個人情報など、送信してはいけない情報が送信されないように気をつける。

また、計測タグを設定したページに訪問した顧客の行動データを外部パートナーに共有することになるので、
計測ツールを利用していることについてオプトアウトの方法と共に必ずプライバシーポリシーに明記する。

計測タグのやり取りについて注意

計測タグは内容が1文字でも違うと正しく動作しなくなるため、テキストファイルで保存してやり取りすることが望ましい。
WordやPDF、チャットツールのメッセージ貼り付けのような方法でやり取りすると以下のようなトラブルが発生する。

一部の記号が消える
半角文字が全角に化ける
謎の空白が途中に挿入される

また、一部のチャットアプリにはコードをやり取りする際、このようなトラブルが発生しないための送信方法が用意されている。

チャットツールでの計測タグのコードが化けない送信方法

それぞれ、以下の方法を使用することにより、文字化けを回避できる。

Skype

{code}●●●{code}のように計測タグを囲う

Chatwork

[code]●●●[/code]のように計測タグを囲う

ついに「codeタグ機能」をリリース！ソースコード表示もより見やすくなりました！ | Chatworkブログ

Facebook・Slack・Typetalk

コードの上下の行をバッククォート3文字で囲む

```
●●●
```

適切な計測タグの設定を行うことができないと…

PDCAの「C」が不完全となるため、現状を誤解した評価を行ってしまい、次の施策の妥当性、精度が落ちてしまう。

適切でないデータから適切でない判断をしてしまい、不適切な施策を実行してしまう
実行すべき施策の優先順位を間違えてしまう
機械学習が組み込まれたツールが不適切な動きをしてしまうことで売上機会を損失する
- 例：Google広告のコンバージョンタグが正しく発火しないことで、成果に繋がる見込みが高い顧客に広告が表示されなくなる。成果に繋がる見込みが薄い顧客に積極的に広告が表示されて広告費を使ってしまう。

オンラインマーケティングで高い成果を効率よく生むためには、適切な計測タグの設定が必要

計測タグをWebサイトに貼る方法

具体的な方法

大きく分けて3種類の設置方法から選ぶことができる。

ハードコーディング（直貼り、直埋め）
カートツールやフォームツールに備わっているタグ管理機能の利用
タグマネージャーツールの利用

ハードコーディング（直貼り、直埋め）

サイトのソースファイルのHTML内にそのまま計測タグを埋め込む方法

メリット

HTML、PHP、JavaScriptなど、サイト制作者なら当然持っている最低限の知識のみで作業可能なので学習コストが少ない。
ソース以外を触る必要がない。ソース以外を見る必要がない。
特定の計測タグを最優先で動かす事が可能なので、リダイレクトが発生するタグやページ内容の書き換えを行うタグを貼るときに向いている。
ハイレベルな技術者が適切な技術を用いて無駄のない完璧な実装を行うことができる場合、少ない通信量で高速に、確実に計測タグを実行できる。

デメリット

タグを貼るページ数が多いと貼り忘れ、剥がし忘れなどの問題が生じやすい。
設定する計測タグの種類が増えるとサイトが重くなる、他の計測タグと干渉を起こす等、タグを原因とした障害に繋がりやすい。
後からソースを見たときにどの計測タグがどこから発行された何のタグなのか分からなくなりやすい。
HTMLソースと直接紐づく形でのタグ設定以外のことがやりたいときに作業が複雑化。
- 「特定のパラメータが付いているときのみ計測タグを発火させたい/させたくない」
- 「特定のサイトから来た人にのみタグを発火させたい/させたくない」
- 「ページを開いて5秒以内に離脱した人には計測タグを発火させたくない」
- 「ログイン中の人だけに計測タグを発火させたい/させたくない」
サイトの完全な編集権限を持つ人しか計測タグの設置作業ができない。
計測タグの設定時に誤ってソース内の他の個所を触ってしまう事故のリスクがある。

カートツールやフォームツールに備わっているタグ管理機能の利用

メリット

フォーム以降のページへの計測タグ埋め込みが管理画面内で完結する。
計測タグへの動的な情報の受け渡し、埋め込みを直感的に楽々行える。（購入した商品、売上金額、受注番号など）

デメリット

タグの発火対象ページ、発火条件などの融通が効かないことが多い。
管理性が落ちやすい。
- 管理画面UIの関係で設定するタグの総数が10件以上になる場合
- 同じタグをカートページ以外のページ(トップページや商品詳細ページなど)にもタグを設定する必要があるとき、ハードコーディングやタグマージャーも並用しなければならなくなる。

タグマネージャーツールの利用

メリット

タグを設置するページ数が膨大でも問題なし

タグを設定するページ数が1,000件を超えても

「すべてのページにタグを設置」
「URLに/thanks.htmlを含むページにタグを設置」
「URLに/sp/を含むページにタグを設置」

のような設定が柔軟に可能なため、管理が容易。

また、正規表現が使えるのであれば更に柔軟なタグ設置ルールを定義できる。

タグの総数が増えても管理性が落ちづらい

設定しているタグを見やすく一覧表示・絞り込み表示することができるので、
命名規則さえしっかり守れば計測タグの数が大量に増えても管理性が落ちない。
たとえば、同一サービスから発行されたタグを一括で一時停止・再開するときも楽々。

ほとんどの作業がタグマネージャーツール内で作業が完結

ブラウザからアクセスできる管理画面を通して計測タグを設置することになるため、HTMLやFTPを理解できない人でもブラウザから数クリックでタグの設置ができる。
ソース側には最初にタグマネージャーのワンタグのみ全ページに貼っておけば基本的に追加作業が不要。

権限の柔軟な共有

タグマネージャーの閲覧権限や編集権限を共有することでサイト自体の編集権限を渡さなくても協力会社などに作業を委託できる。
また、HTMLを直接触る権限を渡さなくて済むので、計測タグを設定する場合に「誤ってHTMLを壊してしまう」ような致命的な失敗を犯すリスクを減らせる。

テストが簡単に実行できる

タグマネージャーツールの「プレビュー機能」を用いることで、検証したい計測タグが「タグマネージャーツールの管理者がWebサイトにアクセスしたときのみ」動作するように設定することが簡単にできる。Webサイトのソースを編集したりテスト環境を用意する手間が不要。
また、万が一計測タグを原因とした問題が生じても数クリックで元の状態に戻すことができる。

計測タグと管理情報の一体化

タグに管理用の名称を登録したり、メモ機能などを活用したりすることで、
「●●代理店運用アカウントのCVタグ」のような、「管理には必要だがサイトには出力したくない情報」をタグとセットで保存できる。

高度なタグ発火タイミングの指定が楽々

タグ発火条件として以下のような条件も楽々指定できる。

特定のパラメータが付いているときのみタグを発火させる／させない
特定のCookieを持っている人にのみタグを発火させる／させない
60%以上スクロールした人のみタグを発火させる／させない
特定のリンクから移動してきた人にタグを発火させる／させない
ページ内のある画像がスクロールにより視認されたらタグを発火させる
30秒以上ページにとどまった人にタグを発火させる
これらの条件のand orによる複雑な組み合わせ

デメリット

タグマネージャーの使い方を学習する必要がある。
タグマネージャー提供元のサーバーがダウンすると計測タグの稼働に失敗する。
タグマージャー提供元のサーバーとの通信がアドブロッカーなどで阻止されるとすべての計測タグが動かなくなる。
タグマネージャーの管理アカウントを悪意のある人物に乗っ取られるとWebサイトに不正なコードを仕込まれる恐れがある。

乗っ取られると怖いツールなので、管理アカウントには必ず二段階認証を設定する。また、信頼できる相手にのみ編集権限を共有する。

タグマネージャーツールを使うべき状況とは

現在、もしくは将来的に以下のような状況が想定される場合、最初からタグマージャーを利用していた方が、管理性向上・工数削減・事故率低減という部分でメリットがある場合が多い。

2ページ以上のタグ設置対象ページが存在するとき
2種類以上の計測タグが存在するとき
タグの発火条件を細かく制御したいとき

⇒　ほとんどの状況でタグマネージャーツールに頼った方が最終的な工数を削減できる

タグマネージャーが使えない状況とは

よほど特殊な状況を除いてほとんど無いものの、head内で他のタグが読み込まれるより早く読込・実行完了させる必要があるときはハードコーディングが必要。

その他、

CMSの制約によりタグマネージャーを設定することができないとき
アプローチしたい顧客のブラウザがタグマネージャーによる通信を拒否するようになっているとき
企業のセキュリティポリシーの関係でタグマネージャーツールの導入が許されないとき
ハイレベルな技術によってサイトの妥協を許さない徹底的な軽量化を図りたいとき

今すぐタグマネージャー活用にトライしよう！