[AEP Mobile SDK × EdgeNetwork]アプリのAdobeAnalytics計測 ReactNative編
目次[非表示]
- 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.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) の場合で書いていきたいと思います。今回は ReactNative(JavaScript)になります。
Expo の場合でも、Native CLI の場合でも 実装コード自体は変わらないため、どちらの場合でも参考いただけるかと思います。インストールだけ多少手順が変わりますが、それは後ほど言及します。
以下、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. 必要なインストール
ReactNative自体は使える状態になっている前提でお話します。
基本的に以下の4つをインストールしていれば問題ないです。
（必要であれば aepedgeconsent なども入れます）
aepedgeidentity | react-native
なお、本記事では、Identity と Assurance の説明は割愛しております。
基本的なコード部分、最低限計測できるところまでのご紹介となります。
さて、実際にインストールするには以下を実行します。
1 | npm install @adobe/react-native-aepcore @adobe/react-native-aepedge @adobe/react-native-aepedgeidentity @adobe/react-native-aepassurance |
yarn を使っている場合は yarn add でも問題ないです。
CocoaPodsについて
Native CLIで開発している場合は、CocoaPodsのインストールおよび pod install の実行が必要です。
1 | cd ios && pod install && cd .. |
Expoの場合、CocoaPods自体は内部で使用されていますが
expo run:ios や eas build を利用する場合は自動的に実行されるため
通常は手動で pod install する必要はありません。
ただし、Expo Bare環境で Xcode から直接ビルドする場合は、手動で pod install を実行する必要があります。
Expo-build-propertiesについて
Expo で Managedで開発している場合、または Bare であっても Podfileや Gradleを直接編集せずネイティブ設定を管理したい場合は、expo-build-properties を利用します。
expo-build-properties パッケージのインストール
1 | npx expo install expo-build-properties |
その上で app.json （または app.config.js ）に以下の設定を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 | { "plugins": [ [ "expo-build-properties", { "ios": { "useFrameworks": "static" } } ] ]} |
Firebase(Google Analytics) などを導入している場合は、既に同様の設定が追加されているケースがあります。
4.コードの記載
4-1. import と 初期化
4-1-1. import
必要なものを import します。
1 2 | import { MobileCore, LogLevel } from "@adobe/react-native-aepcore";import { Edge, ExperienceEvent } from "@adobe/react-native-aepedge"; |
ここで初期化を行います。
古い方法では ネイティブ側の初期化などが必要でしたが、それは不要です。
MobileCore.initialize() ですべて勝手にやってくれます。(プラグインのバージョンが 6.0.0以上）
1 2 3 4 5 6 7 8 9 10 | const AEP_ENVIRONMENT_ID = "<2-4 でコピーした Environment の FileID>";useEffect(() => { MobileCore.setLogLevel(LogLevel.DEBUG); MobileCore.initializeWithAppId(AEP_ENVIRONMENT_ID).then(() => { console.log("AEP SDK Initialized Complete"); }); }, []); |
もしくは、MobileCore.initialize(initOptions) というメソッドも使えますが、その場合は initOptions を定義する必要があります。
よく使われるとしたら lifecycleAutomaticTrackingEnabled のオプションですが、デフォルトで true なので、基本的にはinitializeWithAppId を使うで良いと思います。
サポートされている initOptions ：
項目 | 説明 |
|---|---|
appID | Adobeサーバーからリモート構成を取得するために使用されるアプリID。(2-4でコピーした FileID。） |
lifecycleAutomaticTrackingEnabled | 自動ライフサイクル追跡を有効または無効にするブール値フラグ。デフォルトは true。 |
lifecycleAdditionalContextData | ライフサイクル開始イベントとともに送信される追加のコンテキストデータを含むマップ。 |
appGroup（iOSのみ） | アプリ拡張機能とメインアプリケーション間でデータを共有するためのアプリグループ識別子を表す文字列。 |
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 32 33 | const trackScreenView = (screenName: string) => { const xdmData = { eventType: "web.webpagedetails.pageViews", web: { webPageDetails: { name: screenName, pageViews: { value: 1, }, }, }, }; const dataObj = { __adobe: { analytics: { events: "event1,event6", prop5: screenName, prop6: "ReactNative-prop6", eVar5: "ReactNative-eVar5", eVar6: "ReactNative-eVar6", }, }, }; // ExperienceEventオブジェクトを作成 const event = new ExperienceEvent({ xdmData: xdmData, data: dataObj }); // イベントを Edge Networkに送信 Edge.sendEvent(event).then(() => { console.log("Adobe Event Send Complete"); });}; |
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 | function trackAction(screenName: string) { const xdmData = { eventType: "web.webInteraction.linkClicks", web: { webInteraction: { name: "My Custom Action", type: "other" }, }, }; const dataObj = { __adobe: { analytics: { events: "event2,event3", prop5: "ReactNative-action-prop5", prop6: "ReactNative-action-prop6", eVar5: "ReactNative-action-eVar5", eVar6: "ReactNative-action-eVar6", }, }, }; // ExperienceEventオブジェクトを作成 const event = new ExperienceEvent({ xdmData: xdmData, data: dataObj }); // イベントを Edge Networkに送信 Edge.sendEvent(event).then(() => { console.log("Adobe Event Send Complete"); });} |
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などマーケティングツールを幅広く扱っております。
お問い合わせはこちらからどうぞ。
