新時代に備える！AngularJSにリマーケティングタグを実装する方法

LINE Engineering2014-08-03

LINE Engineering Blog official account

皆様お久しぶりです。
LINEの天然男子。UITチームのキョウです。

最近、AngularJSで構築したコンテンツに様々なトラッキングコードを入れて
計測を強化する対応を行ったのでご紹介します。

はじめに

現在、様々なJSフレームワークがでていますが「やはりJavaScriptはSEOに弱い」と言う
風潮の影響で、実業務で積極的に使えないのが現状でした。

しかし、2014年5月にGoogleからJavaScriptのインデックスを強化していると言う話が出ています。

少しずつですが、SEOにとらわれずAngularJSやBackbone.jsを使って
サイト構築ができる未来が近づいています。

今回の話は、そんなJS新時代が到来した時の為に知っておきたい
トラッキングコードの導入方法について説明いたします。

1. 要件

AngularJSを使い実装されたコンテンツに下記のトラッキングコードを導入する。

Google Analytics
Adwords リマーケティングタグ
Adwords コンバージョンタグ

2. 対応方法

AngularJSのトラッキングコード実装用拡張モジュールであるAngularticsと
トラッキングコード管理ツールGoogleタグマネージャを使用し対応。

※ GoogleAnalyticsだけであれば、Googleタグマネージャを使用する必要はありません。
参考記事→「AngularJSでGoogle Analyticsなどをいい感じで扱えるようにするAngulartics」

3. AngularJSにトラッキングコードは設置できないの？

コンテンツの設計に左右されますが、トラッキングコードを設置しただけでは計測できません。

なぜか？AngularJSにはルーティング機能があります。使っている方も多いと思います。

ルーティングを一言で説明すると、URLが変わったら対応したページ(HTML)を表示すると言う制御機能です。

通常はサーバ側でリクエストを判別して対応したHTMLを表示しますが、それをJavaScriptでできるのがAngularJSの特徴の1つです。つまり、AngularJSを使えばサーバ側の開発コストをある程度フロントエンジニアに分散できます。

ただし、この機能…

1ページ内でJavaScriptを使い擬似的に画面を切替えています。

つまり…

トラッキングコードを貼っても初回の1回しかリクエストが送られません。
リンクやボタンを押して画面を切替えてもデータは送られません。

※AngularJSでルーティング機能を使っていなければ通常の設置方法でも計測可能です。

4. Adwordsのリマーケティングタグが実はやっかい!

この話を聞いてピンと来た方も多いと思いますが、「Analyticsならコンテンツを切替えたタイミングでページビューを送るようにカスタマイズすればOKでしょ？」と。

GoogleAnalyticsはそれで問題ありません。
しかし、Adwords系のトラッキングコードはそれができません。

当初はリクエストしてるURLをJavaScriptで強制的に生成してに入れて、リクエスト飛ばそうと無謀なチャレンジを試みましたが（笑）

と言う事で

トラッキングコードを一つに統合して、JavaScriptを使いリクエストを送る事ができる「Googleタグマネージャ」と、補助モジュールである「Angulartics」を利用する事にしました。

5. AngularJSとGoogleタグマネージャを連携する方法

では、導入手順について解説します。

5-1. Angularticsの設定

1. Angularticsをダウンロード。

2. 下記の2つのscriptファイルを読み込む。

angulartics.js
angulartics-gtm.js

3. 下記のようにmodule指定時に"angulartics"と"angulartics.google.tagmanager"を定義する。

var hogeApp = angular.module("hogeName", ["hogehoge","angulartics","angulartics.google.tagmanager"]);

4. html内に「Googleタグマネージャ」で生成したトラッキングコードを設置。

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-W3WCVP"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

JavaScriptの作業は以上です。
ここまでは簡単ですが、この後が手間だったりします。

5-2. Angularticsの仕様

「Googleタグマネージャの設定」をする前に"angulartics.google.tagmanager"の挙動を
頭に入れておく必要があります。View切替え時にリクエストと共に下記のデータが送信されます。

項目	名称	値
event	content-view	-
データレイヤー変数	content-name	$routeProviderで設定したパス

あとは、Googleタグマネージャ側でデータを取得する設定をすればOKです。

5-3. Googleタグマネージャの設定

■Googleタグマネージャの使い方

Googleタグマネージャの基本的な使い方に関しては、
下記の記事が参考になります。

>> GoogleタグマネージャーでGoogle AnalyticsやAdWordsのタグを一元管理する | Tips Note

私もそうですが…
初見で諦めそうになったので、エンジニア向けにニュアンス変えて用語説明しておきます。

単語	説明	例
アカウント	カテゴリ（権限管理等に使える）	プロジェクト名等設定
コンテナ	アイテム（この単位でトラッキングコードが発行される）	サイト名を入れるのが一般的だが、AngularJSの場合機能名等でよさそう。
タグ	使用するGoogleサービス(リクエスト)を登録	GA01,リマーケティング01等
ルール	使用する条件分岐を登録	-
マクロ	使用する変数を登録	-

■設定方法

1.マクロ（変数）の追加

AngularJSの$routeProviderで設定しているパス(#/hoge/hoge)を取得する為のマクロを作成。
コンテナで「新規作成＞マクロ」を選択し、下記の内容で入力。

マクロ名（任意）	Angularコンテンツパス
マクロタイプ	データレイヤー変数
データレイヤー変数名	content-name
データレイヤーのバージョン	バージョン2
デフォルト値	未指定

2.ルール(条件分岐)の作成

画面切替え時にリクエストを実行する為に設定。
コンテナで「新規作成＞ルール」を選択し、下記の内容で入力

ルール名（任意）	Angularコンテンツ切替え
条件1	{{event}} 等しい content-view

ルール名（任意）	完了ページ
条件1	{{event}} 等しい content-view
条件2	{{Angularコンテンツパス}} 含む {完了ページのパス}

3.タグ（リクエスト）の作成

あとは下記のようにタグとルールを紐付けます。

タグ名	ルール
GA ページビュー	Angularコンテンツ切替え
Adwords リマーケティング	Angularコンテンツ切替え
Adwords コンバージョン	完了ページ

タグの設定値は下記を参考にしていただければと思います。
コンテナで「新規作成＞タグ」を選択し、下記の内容で入力◇GAページビュー

タグ名（任意）	GAページビュー
タグの種類	ユニバーサルアナリティクス
トラッキングID	{GAのトラッキングIDを指定} UA-xxxxxx-xx
トラッキングタイプ	ページビュー
詳細設定 > ドキュメントパス	{{Angularコンテンツパス}}

◇Adwords リマーケティング

タグ名（任意）	Adwordsリマーケティング
タグの種類	AdWords リマーケティング
コンバージョンID	{トラッキングコードに書いてあるID}

◇Adwords コンバージョン

タグ名（任意）	Adwordsコンバージョン
タグの種類	AdWords コンバージョントラッキング
コンバージョンID	{トラッキングコードに書いてあるID}
コンバージョンラベル	{トラッキングコードに書いてあるラベル}
コンバージョン値	{トラッキングコードに書いてある数値}

4.その後、テストを行って公開すれば完了です。

■[注意事項]パスに注意

GAページビューで設定している「詳細設定>ドキュメントパス」は注意が必要です。

 http://example.com/form/
 http://example.com/confirm/
 http://example.com/complete/
 http://example.com/angularpage/
 http://example.com/angularpage/#/confirm/
 http://example.com/angularpage/#/complete/

例えば上記のような構成のサイトがあり、「http://example.com/angularpage/」に
今回の方法でGoogleAnalytics設定すると、「http://example.com/angularpage/#/complete/」が
「http://example.com/complete/」としてデータが送信されます。

URLが衝突する為、「http://example.com/complete/」のアクセス数が増えてしまいます。

その場合「詳細設定>ドキュメントパス」の設定を"/angularpage{{Angularコンテンツパス}}"に変更する。もしくはAngularJS側に設定してある$routeProviderのパス名を変更すれば解決できます。

6. 最後に

今回紹介した「AngularJSとGoogleタグマネージャーを連携させる」ですが、
普通に開発を行う分には必要の無い対応なのかもしれません。

しかし、いざ「AdwordsやGoogle製では無いトラッキングコードを導入する！」となった際に、導入ができずにトラブルになる可能性があります。

その際に参考にしていただければと思います。

長い記事でしたが、読んで頂きありがとうございます。

Blog