[AEP Mobile SDK × EdgeNetwork]アプリのAdobeAnalytics計測 Flutter編
目次[非表示]
- 1.1. はじめに
- 2.2. UIの設定
- 2.1.2-1. AdobeDataCollectionでプロパティを作成
- 2.2.2-2. extensinsを追加
- 2.3.2-3. Datastreamの設定
- 2.3.1.2-3-1. そもそもDatastreamとはなにか？
- 2.3.2.2-3-2. Datastreamの設定
- 2.4.2-4. AEP ExtensionのDatastreams設定
- 3.3. 必要なインストール
- 4.4. コードの記載
- 4.1.4-1. import と 初期化
- 4.1.1.4-1-1. import
- 4.1.2.4-1-2. 初期化
- 4.2.4-2. イベントを送信するコード
- 4.2.1.4-2-1. コードを書く前に
- 4.2.2.4-2-2. ページビュー（スクリーンビュー）を送るコード例
- 4.2.3.4-2-3. リンクトラックを送るコード
- 4.2.4.4-2-4. 解説
- 4.2.4.1.XDMの場合
- 4.2.4.2.dataオブジェクトの場合
- 5.5. まとめ
1. はじめに
アプリにおける AdobeAnalyticsの設定はそこまで複雑ではありませんが、世の中にあまり情報がありません。
また、設定方法も複数あるため、情報が古かったり、「この解説はどの方法での設定だ？」となることも少なくありません。
英語になりますが Adobeのこちらのページを見ると現在3つの方法が存在することが分かります。
https://developer.adobe.com/client-sdks/solution/adobe-analytics/migrate-to-edge-network
出典：Migrate from Analytics mobile extension to Adobe Experience Platform Edge Network
上図の一番下の「Analytics extension」を使う方法は弊社の過去のブログをご覧ください。(ReactNative/Android)
※古い方法ですので今から新しく設定する場合はこの方法はお勧めいたしません。
今回は最新かつAdobeも推奨している 「Edge Network extension」を使用した方法を紹介します。
何回かに分けて、Android(Kotlin) /iOS(Swift) / Flutter(dart) / ReactNative(JavaScript) の場合で書いていきたいと思います。今回は Flutter(dart)になります。
以下、UIの設定はすべて共通になりますので、既に他の記事でご覧になった方は飛ばして大丈夫です。
2. UIの設定
2-1. AdobeDataCollectionでプロパティを作成
まずはmobile用のプロパティを作成します。
Platformで 「Mobile」を選びましょう。
2-2. extensinsを追加
初期段階で「Mobile Core」と「Profile」という Extensionが入っています。
EdgeNetworkの方法ではここに
Adobe Experience Platform Edge Network
AEP Assurance
Identity
を追加します。（必要なら Consent も）
※本記事では Identity, Assurance, Consentの説明はいたしません。
この時点では中身は何も設定しなくてOKなので、初期Buildだけしておきましょう。
2-3. Datastreamの設定
2-3-1. そもそもDatastreamとはなにか？
ざっくりいうと「交通整理係」です。
アプリのSDKから送信されたデータは EdgeNetworkを通って運ばれます。
そしてDatastreamに到着すると、Datastreamが「このデータは AdobeAnalyticsに送るね」「こっちのデータはAdobeTargetに送るね」などの交通整理をしてデータを飛ばし先を決めていきます。
本記事は設定方法にフォーカスしているので、座学の詳細は省きますが、上記のようなイメージを持っていれば大丈夫だと思います。
2-3-2. Datastreamの設定
AdobeDataCollectionもしくは、AdobeExperiencePlatformのUIからデータストリームに進みます。
右上の「New Datastream」からDatastream作成画面に進みます。
この画面では Name だけ入力すればOKです。(Adobe Analyticsで使うだけなら）
Name入力して「Save」を押しましょう。
「Add Service」をクリック
Serviceで AdobeAnalytics を選び、Report Suite IDを入力します。
そして、「Save」。
最終的にこんな画面になったら完了です。
本番環境と開発環境などでレポートスイート分かれている、などの場合はそれぞれでDatastreamを複数作りましょう。
一覧画面に戻ると作成したDatastreamが表示されています。
2-4. AEP ExtensionのDatastreams設定
DataCollectionに戻り、「Adobe Experience Platform Edge Network」のExtensionの Configureを開き、Datastreamの設定をします。
先程作成した Datastreamを設定します。
環境ごとに設定したい場合はそれぞれでDatastreamを変更してください。
これで、DataCollectionおよび Datastreamの設定は完了です。
最後に、EnvironmentsのFileIDは後々使うのでメモしておきましょう。
3. 必要なインストール
Flutter本体やDartのインストールは済んでいる前提でお話いたします。
基本的に以下の4つをインストールしていれば問題ないです。
（必要であれば aepedgeconsent なども入れます）
flutter_aepcore | Flutter package
flutter_aepedge | Flutter package
flutter_aepedgeidentity | Flutter package
flutter_aepassurance | Flutter package
なお、本記事では、Identity と Assurance の説明は割愛しております。
基本的なコード部分、最低限計測できるところまでのご紹介となります。
さて、実際にインストールするには以下を実行します。
1 2 3 4 | flutter pub add flutter_aepcore flutter pub add flutter_aepedge flutter pub add flutter_aepedgeidentity flutter pub add flutter_aepassurance |
まとめて書いても問題ないです。
1 | flutter pub add flutter_aepcore flutter_aepedge flutter_aepedgeidentity flutter_aepassurance |
4. コードの記載
4-1. import と 初期化
4-1-1. import
必要なものを import します。
1 2 3 4 | import 'package:flutter_aepcore/flutter_aepcore.dart'; import 'package:flutter_aepedge/flutter_aepedge.dart'; import 'package:flutter_aepassurance/flutter_aepassurance.dart'; import 'package:flutter_aepedgeidentity/flutter_aepedgeidentity.dart'; |
4-1-2. 初期化
ここで初期化を行います。
古い方法ではネイティブ側で初期化が必要でしたが、それは不要です。
MobileCore.initialize() ですべて勝手にやってくれます。(flutter_aepcore プラグインのバージョンが 5.0.0以上）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Future<void> _initializeAEPMobileSDK() async { final environmentFileId = "<2-4 でコピーした Environment の FileID>"; MobileCore.setLogLevel(LogLevel.debug); try { InitOptions initOptions = InitOptions( appId: environmentFileId, lifecycleAutomaticTrackingEnabled: true, ); MobileCore.initialize(initOptions: initOptions); print("Adobe Experience Platform Mobile ADK was initialized"); } catch (e) { print("Failed to initialize Adobe Experience Platform Mobile ADK: $e"); } } |
もしくは、MobileCore.initializeWithAppId(appId) というメソッドも使えて
その場合は options を定義する必要がないのでもっとシンプルに以下のように書けます。
lifecycleAutomaticTrackingEnabledはデフォルトで true なので、基本的にはinitializeWithAppId を使うで良いと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Future<void> _initializeAEPMobileSDK() async { final environmentFileId = "<2-4 でコピーした Environment の FileID>"; MobileCore.setLogLevel(LogLevel.debug); try { // これだけで lifecycleAutomaticTrackingEnabled: true と同じ動きになります await MobileCore.initializeWithAppId(appId: environmentFileId); print("Adobe Experience Platform Mobile SDK was initialized"); } catch (e) { print("Failed to initialize Adobe Experience Platform Mobile SDK: $e"); }} |
4-2. イベントを送信するコード
4-2-1. コードを書く前に
コードを書く前にすこーーーしだけ軽く座学を。
EdgeNetworkを利用する方法ではパラメータの持ち方が特殊です。
WEBのAdobeAnalyticsを WebSDKで設定したことがある方なら聞いたことはあると思いますが
基本的には「XDM スキーマ」という形式に則りイベントデータを生成します。
WebSDKやMobileSDK は AdobeAnalyticsだけではなく、CustomerJourneyAnalytics(CJA)や Real-Time CDP(RTCDP) などでも共通して使用されるため、統一した形式を整備しています。
※Adobeの思想としては、様々な業界や業種に渡って顧客体験データを共通のルール（モデル）で標準化して Adobe Experience Platform全体で意味を持つようにする仕組みを作ろうといった感じです。
詳細はAdobeのドキュメントを参照ください。
https://experienceleague.adobe.com/ja/docs/experience-platform/xdm/home
https://experienceleague.adobe.com/ja/docs/analytics/implementation/aep-edge/xdm-var-mapping
・・・
と、ここまでXDMの話をしていたのですが、AdobeAnalytics（とAdobeTarget）は特殊で
XDMを意識しなくても、 WebSDKや MobileSDK を使いEdgeNetwork経由で計測が可能です。
具体的には「dataオブジェクト」を使うことで、Appmeasurement.js での記述に近しい書き方で定義することができます。
https://experienceleague.adobe.com/ja/docs/analytics/implementation/aep-edge/data-var-mapping
XDM と dataオブジェクトの両方を併用することも可能です。
以下、せっかくですので両方を使用したパターンで記述してみます。
4-2-2. ページビュー（スクリーンビュー）を送るコード例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | Future<void> trackScreenView(String screenName) async { final Map<String, dynamic> xdmData = { "eventType": "web.webpagedetails.pageViews", "web": { "webPageDetails": { "name": screenName, "pageViews": {"value": 1}, }, }, }; final Map<String, dynamic> dataObj = { "__adobe": { "analytics": { "events": "event3,event4", "prop3": "flutter-prop3", "prop4": "flutter-prop4", "eVar3": "flutter-eVar3", "eVar4": "flutter-eVar4", }, }, }; final ExperienceEvent event = ExperienceEvent({ "xdmData": xdmData, "data": dataObj, }); List<EventHandle> result = await Edge.sendEvent(event); print("Adobe Event Send Complete: $result");} |
4-2-3. リンクトラックを送るコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | Future<void> trackAction() async { final Map<String, dynamic> xdmData = { "eventType": "web.webinteraction.linkClicks", "web": { "webInteraction": { "name": "My Custom Action", "type": "other", }, }, }; final Map<String, dynamic> dataObj = { "__adobe": { "analytics": { "events": "event1,event2", "prop1": "flutter-click-prop1", "prop2": "flutter-click-prop2", "eVar1": "flutter-click-eVar1", "eVar2": "flutter-click-eVar2", }, }, }; final ExperienceEvent event = ExperienceEvent({ "xdmData": xdmData, "data": dataObj, }); List<EventHandle> result = await Edge.sendEvent(event); print("Adobe Event Send Complete: $result");} |
4-2-4. 解説
上記の xdmData で定義しているオブジェクトが 「XDMスキーマ」
dataObj で定義しているオブジェクトが「dataオブジェクト」になります。
「dataオブジェクト」は Appmeasurement.js で sオブジェクトに eVar や prop を定義する形に近いですね。
さて、ここで疑問に思う人もいるかもしれません。
WEBの Appmeasurement.js であれば「s.t()」と「s.tl()」がありました。
旧来のアプリ実装でも「trackState()」と「trackAction()」のメソッドが用意されていました。
しかし、上記の例を見てみると、screen_view であってもリンクトラックであっても
最終的に使っているメソッドは同じで「Edge.sendEvent(event)」になっています。
「メソッドが同じなのにどうやって2種の分類をしているのか？」
と当然気になるところかと思います。
Adobe：「メソッド分かれてないです」
我々：「えっ！？」
Adobe：「ないです！」
我々：「Oh…」
・・・
となるところですが安心してください。
これにはルールが決まっており、詳しくはAdobeのドキュメントをご覧ください。
Adobe Analytics の Edge Network イベントタイプ | Adobe Analytics
簡単に説明します。
XDMの場合
①『xdm.web.webPageDetails.name or xdm.web.webPageDetails.URL が存在し
かつ
xdm.web.webInteraction.typeが存在しない』
⇒ ページビュー（s.t(), trackState() 相当）になります。
②『xdm.eventType に web.webpagedetails.pageViews を設定している』
⇒ ページビュー（s.t(), trackState() 相当）になります。
③『xdm.web.webInteraction.type が存在する』
⇒ リンクトラック（s.tl(), trackAction() 相当）になります。
④『xdm.web.webPageDetails.name、xdm.web.webPageDetails.URL 、xdm.web.webInteraction.type のいずれも存在ない』
⇒ データは無視されます
dataオブジェクトの場合
⑤『data.__adobe.analytics.pageName or data.__adobe.analytics.pageURL が存在し』
かつ
『data.__adobe.analytics.linkType が存在しない』
⇒ ページビュー（s.t(), trackState() 相当）になります。
⑥『data.__adobe.analytics.linkType が存在する』
⇒ リンクトラック（s.tl(), trackAction() 相当）になります。
⑦『data.__adobe.analytics.pageName 、data.__adobe.analytics.pageURL、data.__adobe.analytics.linkType のいずれも存在しない』
⇒データは無視されます
つまり、オブジェクトを構成するペイロードの中身によって
scree_viewとして扱われるか、リンクトラックとして扱われるか、破棄されるかが変わるということです。
ここは意識して設定をするようにしましょう。（※これはWebSDKによるウェブの実装でも同様です）
上記の例では・・・
スクリーンビューのコードでは ①、②を満たしているので s.t(), trackState() 相当になります。
リンクトラックのコードは ③ を満たしているので s.tl(), trackAction() 相当になります。
5. まとめ
以上となります。
ライフサイクルなどを追う場合は、DataCollectionの方でも追加の設定が必要だったりしますが、
基本的な設定は本記事で出来ていて計測ができるようになると思います。
XDMの話などは深く知ろうとすると沼にハマる部分もあるのですが
設定自体はそこまで複雑ではなく実装できそうですよね！
実際は、設定したあとに「検証」のフェーズになると思います。
検証方法としては、てっとり早いのはAdobeAnalyticsのリアルタイムレポートを見ることです。
細かいリクエストヒットなどを見たい場合は「Experience Platform Assurance」を使うことをお勧めします。
（本記事では解説はしていませんが、記事序盤で Assurance はインストールはしています）
Assuranceの設定をすると、以下のようにEdgeNetwork経由でのヒットや AdobeAnalyticsへ実際に送信されるときのヒットなど細かくみることができます。
MobileSDKで使用するにあたっては、アプリ側でディープリンクの挙動制御の設定などが必要ですので
本記事での説明は割愛させていただきます。
Assuranceについても詳しく知りたいなどのご要望があればぜひ教えてください。
弊社ではAdobeAnalyticsやGoogleAnalyticsのカスタム実装をはじめKarte、ContentSquare、サーバーサイドGTMなどマーケティングツールを幅広く扱っております。
お問い合わせはこちらからどうぞ。
