一休のAMPトラッキングの取り組み

一休で最近試しているAMPのあれこれ
という内容で話したトラッキングの10分程度のセッション

Transcript

1. 一休のAMPトラッキングの取り組み 株式会社一休 デジタルマーケティング部 田中勇樹 Twitter: @FG6318
2. 今公開しているAMPページ AMP AMP canonicalAMP / SXG AMPstory
3. 検索から訪れる主な経路 AMP cache Origin AMP Origin AMP SXG cache ... Other Provider cache ... AMP cache WEB Page Origin AMP Search
4. 基本導線 AMP cache / Origin AMP 例）観光AMP Google検索など検索エン ジンからのLP、また広告掲 載しているAMPページへの 直LP。 Origin AMP 例）観光AMP 観光ページを回遊する場合 はAMPページを行き来す ることになる。 WEB Page 例）施設ページ 既存の施設WEBページ
5. これ以外にも。。。
6. 利用ユーザ • 再検索のユーザ ◦ 一度訪れたユーザのセッションは途切れていないか • デバイス違いのユーザ ◦ Safari (itp とか、iosは大丈夫か) ◦ Chrome • 検索サイトの違い ◦ Yahoo検索 ◦ Google検索
7. みんなで網羅テストを実施
8. テストして分かったこと • AMPのclientIDは繋がって無いことがあった • SignedExchangeでも一部取れてない？ • セッションが繋がってなかった • 不自然な直アクセス（Direct）がある など。。。
9. AMPページの利用 AMPをランディングページやAMP内を回遊することもあり、 AMPにユーザが触れる機会が増えてきたサイトにとっては ユーザ行動をしっかりとトラッキングする必要があります。
10. GoogleTagManger を使ったトラッキング
11. 導入の為にやったこと • GoogleAnalyticsのRollUpプロパティの作成 • clientID用APIの作成 • amp-analytics コンポーネントの呼び出し
12. Rollupプロパティの構成 AMP/nonAMP cidで結合 nonAMP 既存ページ /sd/00000007/ 施設ページ /sd/tokyo/ エリアページ AMP AMPページ /sd/0000007/amp/ 施設AMPページ /kankou/kyoto/ 観光AMPページ CustomDimensionの紐づけ設定 参照除外リストの確認
13. amp-analytics config属性にAPIのエンド ポイントを設定する origin end point 独自の加工をするためgtmAPI をproxyしたエンドポイントを用意 gtm.json fetch gtmAPIからJSONを取得 api response (CORS) cookieにcidあれば使う、無ければ任 意のドメイン上にcidを生成する collect トラッキング情報を送信する ClientID用のAPI
14. Proxy gtm.json ' GoogleTagManagerよりamp.jsonを取得 Private Function GetAmpAnalyticsJson(cid As String) As Object 　 ' gtm api のエンドポイント 　Dim url As String = "/amp.json?gtm.url=www.ikyu.com/kankou/kyoto/" 　' gtm.jsonを取得 　Dim jsonStr = "{var: .... }" 　' _ga が既にあればそれを使用、 　' なければAMPで発行されたAMP_ECID_GOOGLEを使用 　' Client IDがある時は変数をその IDに置換する 　If Not String.IsNullOrEmpty(cid) Then jsonStr = Replace(jsonStr, "CLIENT_ID(AMP_ECID_GOOGLE,,_ga)", "${clientId}") 　End If 　' 修正したしたgtm.jsonをデシリアライズ 　Dim obj_data = JavaScriptSerializer.Deserialize(Of AmpJsonModel)(jsonStr) 　' extraUrlParamsを使う加工など 　　obj_data.extraUrlParams.Add("cm", "organic") 　Return obj_data End Function
15. <amp-analytics> Adobe AnalyticsやAlexa Internetといった 各種ベンダに対応した AMPの トラッキング用コンポーネントです <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"> </script> . . . <amp-analytics config="APIエンドポイント" data-credentials="include"> </amp-analytics>
16. 広告掲載にoriginAMPを使う 広告でAMPランディングした際、 • ドキュメントリファラ • キャンペーンソース などを引き継がせる必要がある
17. extraUrlParams リクエストに含まれる追加の パラメータを指定することができます ''' 広告時のみExtraUrlParamsを適用させる Private Sub AdsGtmParamEdit(obj_data As AmpJsonModel) If Me.HasAdParams Then Me.DocumentReferrer = Me._params("referrer") If Me._params("ikCo") <> String.Empty Then obj_data.extraUrlParams.Add("cm", "cpc") obj_data.extraUrlParams.Add("cs", Me._params("ikCo")) obj_data.extraUrlParams.Add("dr", Me.DocumentReferrer) End If End If End Sub
18. extraUrlParams 実際に広告のoriginAMPにLPした際の レスポンス例です こうすることで次のページに情報が 引き継がれるので不自然な directを回避できる { "requests": { ... }, "triggers": { ...}, "vars": { "clientId": "180725546.1562807215" }, "transport": { "beacon": false, "xhrpost": false, "image": true }, "linkers": {}, "optout": "_gaUserPrefs.ioo", "extraUrlParams": { "cm": "cpc", "cs": "google", "dr": "https://www.google.com/" } }
19. amp-pixel を使ったトラッキング
20. <amp-pixel> WEBビーコンを仕込む事のできる AMPコンポーネント これを使うことでcookie操作を することができるため、 社内独自のトラッキングタグや ユーザ識別用のcookieの登録ができる <amp-pixel 　　layout="nodisplay" 　　src="/api/amp/tracking/visited?host=AMPDOC_HOST"> </amp-pixel>
21. URL Variable これを使うことでいろんなパラメータを URL 内に詰めて送ることができます たくさんあるので詳しくは ↓ //github.com/ampproject/amphtml/blob/master/spec/ amp-var-substitutions.md <amp-pixel 　　layout="nodisplay" 　　src="/api/amp/tracking/visited?host=AMPDOC_HOST"> </amp-pixel>
22. amp-pixelを使って解決したこと • 社内独自のタグの発火とcookie操作 ◦ ユーザへのクーポン配信の施策などに影響 • GTMで管理しているcookieの操作 ◦ セッション開始を伝えることでDirect扱いを回避 ◦ セッション時間の更新（３０分）
23. まとめ
24. AMPをトラッキングする際のポイント • プロパティ間の紐付き設定の確認 • extraUrlParamsの活用 • AMPリッチーカードは流入に大きな影響がでるので慎重に • Safariの流入確認もお忘れなく • SignedExchangeの導入（Originドメインでの配信） ◦ Safari ITP対策として準備しておくと良いかも（7/25時点safariのSXGは未対応） • 同様の方法でもYahoo検索のAMPはcidは繋がらない（7/25時点） ◦ amp-linkerなどでの対応検討中
25. とりあえず collectを確認！
26. 正しく計測して より良い開発を