[AEP Mobile SDK × EdgeNetwork]アプリのAdobeAnalytics計測 iOS編

catch-img

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/iOS)
※古い方法ですので今から新しく設定する場合はこの方法はお勧めいたしません。

今回は最新かつAdobeも推奨している 「Edge Network extension」を使用した方法を紹介します。

何回かに分けて、 Android(Kotlin)/ iOS(Swift) / Flutter(dart)/ ReactNative(JavaScript) の場合で書いていきたいと思います。今回は iOS(Swift)になります。

以下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. Xcodeでの操作 – インストール

必要なモジュールのインストールをしていきます。

インストール方法には CocoaPods を使う方法を SPM(Swift Package Manager)を使う方法があると思いますが
本記事では SPM で追加していきます。

というわけで、Adobe Experience Platform Mobile SDK の各 Extension を SPM で追加しましょう。

このあたりが必要です
https://github.com/adobe/aepsdk-core-ios
https://github.com/adobe/aepsdk-edge-ios
https://github.com/adobe/aepsdk-edgeidentity-ios
https://github.com/adobe/aepsdk-assurance-ios

3-1. Core

Xcode の File > Add Package Dependencies をクリック

Search or Enter Package URL に 「https://github.com/adobe/aepsdk-core-ios」を入力して Enter.

Add Package をクリック

色々出てきますがすべて追加しておきましょう。

Add to Target を None から目的の Targetに変更して、Add Package を押します

あとはこの作業を繰り返すだけです。

3-2. Edge Network

同様に、Search or Enter Package URL に 「https://github.com/adobe/aepsdk-edge-ios」を入力して Enter.

選択して Add Package

AEPEdge の Target を Noneから変更して Add Package

3-3. Edge Identity

※上述の通り本記事では Edge Identity の使い方や実装コードの話はいたしません。
インストール方法だけここで説明します・・・といっても他のと同様にやるだけですが。。

Search or Enter Package URL に 「https://github.com/adobe/aepsdk-edgeidentity-ios」を入力して Enter.

選択して Add Package

AEPEdgeIdentity の Target を None から変更して Add Package

3-4. Assurance

※こちらも上述の通り本記事では Assurance の使い方や実装コードの話はいたしません。

Search or Enter Package URL に 「https://github.com/adobe/aepsdk-assurance-ios」を入力して Enter.

選択して Add Package

AEPAssurance の Target を None から変更して Add Package

これでインストールは完了です。
あとは実装するだけ!

4. Xcodeでの操作 – コードの記述

4-1. 初期化

AppDelegateクラスを編集していきます。

SwiftUIの場合はデフォルトでは AppDelegate.swift がないと思いますので作成しましょう。

すでに FirebaseSDKなどを実装していれば、AppDelegate.swift ではなく、@mainの あるコードの上に
class AppDelegate が定義されているかと思います。
※Googleの公式の手順がそうなっているため。エンジニアさんの采配によっては異なる書き方をしている場合もあるかと思います。

こちらでは一旦 mainと同じファイルに記述する例を示します。

AEPCoreを import します。
Assuranceの設定をする場合はここで AEPAssurance のimport もします。

import SwiftUI
import AEPCore
import AEPAssurance
 
class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
         
        let environmentId = "<<FileID>>". // 変更します
                 
        MobileCore.setLogLevel(.debug)
        MobileCore.initialize(appId: environmentId)
         
        return true
    }
}
 
@main
struct IOS2App: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
     
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

古い方法では MobileCore.setApplication() を実行し、さらに MobileCore.registerExtensions() で1つ1つ extensionを登録していたり、 MobileCore.lifecycleStart() など個別に記載していましたが、それは不要です。

MobileCore.initialize() ですべて勝手にやってくれます。(SDKのバージョンが 5.4以上で使えます)

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. ページビュー(スクリーンビュー)を送るコード例

func trackScreenVeiw(screenName: String){ 
    let xdmData: [String: Any] = [ 
        "eventType": "web.webpagedetails.pageViews", 
        "web": [ 
            "webPageDetails": [ 
                "name": screenName, 
                "pageViews": [ 
                    "value": 1 
                ] 
            ] 
        ] 
    ] 
 
    let dataObj: [String: Any] = [ 
        "__adobe": [ 
            "analytics": [ 
                "events": "event5,event6", 
                "prop5": "swift-prop5", 
                "prop6": "swift-prop6", 
                "eVar5": "swift-eVar5", 
                "eVar6": "swift-eVar6" 
            ] 
        ] 
    ] 
 
    let event  = ExperienceEvent(xdm: xdmData, data: dataObj) 
 
    Edge.sendEvent(experienceEvent: event){_ in 
        print("Adobe Event Send Complete") 
    } 
}

4-2-3. リンクトラックを送るコード例

func trackAction(){ 
    let xdmData: [String: Any] = [ 
        "eventType": "web.webinteraction.linkClicks", 
        "web": [ 
            "webInteraction": [ 
                "name": My Custom Link, 
                "type": "other"
            ] 
        ] 
    ] 
 
    let dataObj: [String: Any] = [ 
        "__adobe": [ 
            "analytics": [ 
                "events": "event5,event6", 
                "prop5": "click-swift-prop5", 
                "prop6": "click-swift-prop6", 
                "eVar5": "click-swift-eVar5", 
                "eVar6": "click-swift-eVar6" 
            ] 
        ] 
    ] 
 
    let event  = ExperienceEvent(xdm: xdmData, data: dataObj) 
 
    Edge.sendEvent(experienceEvent: event){_ in 
        print("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.nameor 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などマーケティングツールを幅広く扱っております。
お問い合わせは こちらからどうぞ。

Tomonaga
Tomonaga

人気記事ランキング

タグ一覧