はじめに
SPA形式のWebサイトに対して、Adobe AnalyticsなどのWeb行動計測ツールを入れるのは
今までのWebサイトの導入時と違い、ちょっと調整や技術調整が必要になります。
理由として、ページのリフレッシュが起きない事による今までの仕組みの違いがあります。
SPA形式のWebサイト制作をするに当たっては、AngularやReact、Vueなどいくつかのフレームワークが存在します。
今回はそのうちの一つ、Angularで作ったSPAサイトに対してAdobe Analyticsを導入する時に使えるAngulartics2というパッケージについて少し考慮するべきポイントをまとめました。
angulartics/angulartics2: Vendor-agnostic analytics for Angular2 applications.
Angulartics2について
Angulartics2は、AngularでSPAアプリケーション開発をする際に様々な分析ソリューションを簡単に入れられるようにする為のPackageです。Adobe Analyticsを始め、他の製品にも多く対応しています。
以下はAngulartics2のgitページより。
Angulartics2を使ってAdobe Analyticsを導入する方法
Angulartics2を使ってAdobe Analyticsを導入する簡単な方法ですが、サポートしてるリストにもあるタグマネージャーのAdobe Launchを導入し、Adobe Launch経由でAdobe Analyticsを入れるのが一番簡単です。
Angularアプリケーションコードに追加
Angulartics2の導入自体についてはAngulartics2の以下のページを参照してください。
なお、事前にAdobe LaunchでPropertyを作成し、タグマネージャーのJavaScriptコードを吐き出してください。
angulartics2/src/lib/providers/launch at master · angulartics/angulartics2
- ベースとなるHTMLに対してAdobe LaunchのScriptタグを入れる
- Angularアプリケーションに対して上記に記載されているコードを導入
Adobe Launchの設定を追加
設定したAdobe LaunchのPropertyに対して設定を行います。
Angulartics2ではページ遷移のルーティング処理が入った時とカスタムリンククリック処理が入った時に自動でAdobe Launch側で設定できるDirect Ruleをコールするような形となります。
| Direct Call名 | 概要 |
|---|---|
| pageTrack | ページのルーティング処理をした時に実行(PV数を加算) |
| eventTrack | クリック等の任意のユーザーアクションが行われた時に実行 |
上記の様なDirect Call名が実行されるので、Adobe Launch側で設定をします。
Adobe LaunchのRule設定画面(pageTrackの時)
これで基本的にルーティング処理(ページ遷移)がされる度にこのRuleが動くので、このときにAdobe Analyticsが動くようにActionの設定をすれば計測することが可能です。
注意点について
上記のような形でSPAサイトでも簡単にAdobe Analyticsを導入することは可能です。
しかし、いくつか計測実装をするときに注意しておく必要があるポイントがあります。
アプリケーション内で保持する情報を計測する場合
SPAのアプリケーション内で保持している様々な情報を取得するときには注意が必要です。例えば...
- ECサイトなら表示している商品IDや表示カテゴリ、検索キーワード…
- 検索サイトなら検索している条件情報など…
のように、アプリケーションの内部で保持しているような情報を取得したい場合には、window Object配下に必要なデータをDataLayer形式等で書き出してもらう必要があります。
この書き出しタイミングは必ず、pageTrackが実行されるよりも前に書き出す必要があります。
Angularアプリケーションの書き方によってはタイミングが前後してしまう場合があり、必ず動作させてタイミング通りにデータがとれるかは確認をしてください。