動的なサイトの計測も簡単に！Yahoo!タグマネージャーでのSiTestトラッキングコード設定方法 ｜ SiTest (サイテスト) ブログ

SiTestはYahoo! Tag Manager(以下YTM)の公式ベンダーであり、YTMを導入しているサイトには簡単にトラッキングコードを導入することができます。
通常のトラッキングコードを導入するのは簡単でもサイトによっては設定を一工夫することもあります。
今回はYTMでのSiTestのトラッキングコードの運用方法について書いていきたいと思います。

SiTestには管理画面上3種類トラッキングコードが用意されています。
それぞれ
– 通常コード
– 動的ページ用トラッキングコード
– 名前を付けるページ用コード
となります。

簡単に説明させていただきますと、
「通常コード」はPC、スマートフォンに関わらず同じコンテンツを表示するページに対して使用するトラッキングコードです。
難しいかもしれませんが、下記の「動的ページ用コード」と「名前を付けるページ用コード」以外という認識で大丈夫です。

続いて「動的ページ用コード」ですが、ページにリダイレクトがかかっているケースで使用します。
例えばPCとスマートフォン用のページをユーザーエージェントでそれぞれのバージョンへリダイレクトしているサイト、
ログインが必要でログインせずにアクセスするとトップページに戻されてしまうサイトなどが該当します。

最後に「名前を付けるページ用コード」です。
これは下記のパターンが考えられます。

• パラメータでコンテンツを出し分けている
  このページが該当します。
  WordPressのデフォルト設定ですとこのパターンになるかと思います。
  この場合パラメータの一部を名前として使用し別ページとして扱うことができます。

• サーバーがユーザーエージェントによって出力するコンテンツを出し分けている
  リダイレクトに似ているのですが、ユーザーエージェントで判定を行ないますが、URLが切り替わらずスマートフォン版のページを表示する場合が該当します。
  この場合ユーザーエージェントに応じてPC、SP 等の名前を付けることでページを分けることができます。

では設定方法を見ていきましょう。
まず共通の設定ですが、これができれば通常コードの設定は完了となります。

前提としてYTMアカウントが使用可能で、サイトの全ページにユニバーサルタグが適切に設置されているのを確認してください。

1） ページの追加
最初にページを追加します。
YTMで言うページとは通常のウェブページの概念とは異なり、条件に一致しかつアカウントのユニバーサルタグの設置された全ページが対象となります。
そのためドメイン単位でサイト全体をページとして設定することも可能です。
条件が緩いとマッチする全ページでタグが実行される危険もありますのでご注意ください。

設定方法ですが、YTMにログインしダッシュボードに入ってください。
サイドバーに「ウェブサイト」の項目があるので選択しページ一覧を表示します。
画面右上に「ページを追加ボタン」があるのでクリックし移動します。

ページ名は任意のものです。
URLパターンですが、ここにトラッキングコードを入れたいサイトのURLを入れます。
作成時は一つしか設定できませんが、後程編集で複数設定も除外指定も可能です。
「ワイルドカード」を使用して1つの条件で複数ページやサイト全体を指定することも可能です。

SiTestを例にしますとsitest.jp/**
でドメイン下の全ページを指定します。

続いてこのブログを除外します。
sitest.jp/blog/**
でblog以下全てのページを除外することが可能です。

以上でページの設定は完了です。

2) タグの設定
タグの設定です。
簡単な設定方法から行きます。
サイドバーのサービスタグ管理からサービスタグの追加ボタンをクリックします。
検索ボックスにSiTestと打って表示されるリンクのうち「SiTest Tracking Tag (Javascript）」をクリックするとタグ設定画面に入ります。
名前とSiTest管理画面から手に入るプロジェクトIDを入れ”サービスタグを保存”を押せば保存完了です。
その他の項目は通常タグでは設定しません。

3) タグの適用
続いてタグの設定です。
単純に設定済みのタグを設定する場合、
サイドバーのウェブサイト→(ページ一覧が表示されるので)ページを選択→上部タブのサービスタグ設定と進んでください。
設定済みのタグ一覧があるので有効にしたいタグの左側のチェックボックスにチェックを入れ操作ボタンから有効にするを選べば設定完了です。

以上が簡単な流れになります。

ここから一つ踏み込んだ設定になります。
少しプログラミングの知識が必要となります。

1) データバインディングエクスプレッション(DBE)の設定
DBEとは簡単に言うとJavaScriptにより取得できるデータをYTM管理画面上に登録し使える状態にしたものです。
サイドバー データディクショナリ→ データエレメントを追加
から名前を付け保存します。

データバインディングの追加からウェブサイトを選びます。

設定画面が開きます。
ここでDBE(JavaScript)と適用するページを設定します。
今回は本ブログのパラメータを取得し追加してみます。

本ブログは記事ページではp=200のようにpをキーとするパラメータでコンテンツを出し分けています。

そこでYTM上でそのp=から始まるパラメータを名前として計測するために

DBEに下記コードを記述します。
※^p$の部分をパラメータのキーにしてください。
page=1のようなパラメータで出し分けている場合は^page$となります。

location.search.split("?")[1].split("&").filter(function(it){return it.split("=")[0].match(/^p$/)})

他にスマートフォンとPCでユーザーエージェントからコンテンツを出し分けるパターンがあります。
その場合は

navigator.userAgent.match(/(android.*mobile|iphone|ipod|mobile\ssafari|iemobile|opera\smini|windows phone)/i)? "sp": "pc";

こちらの設定でPCとスマートフォンで名前を出し分けできます。

2) タグの設定
手順は通常のタグの設定と同じです。
違う部分は

• ダイナミックにチェックを入れる(必須)
• URL名に先程設定したDBEを設定する

DBEの設定ですが、URL名の箇所にフォーカスすると右側にボタンが出るのでそこから先程設定したDBEを選択します。

3) タグの適用
適用に関しては共通の設定と同じです。

YTMを使用するにあたってDBEは非常に便利な機能でCMSやスマートフォン対応でコンテンツを出し分けている場合でもサーバーサイドのコードを記述することなくページの情報をタグに渡すことができます。
まずはご自身のサイトがどのパターンに入るのか調べる所から始めてみましょう。