Adobe Analytics

Adobe AEP SDKをTypeScriptで開発したReactNativeアプリに実装する

こんにちは、エクスチュアの権泳東(權泳東/コン・ヨンドン)です。

以前の記事で、AdobeのAEP SDKをReactNativeアプリに実装する方法について説明しました。

Adobe AEP SDKでReactNativeアプリを計測する (Android編)
Adobe AEP SDKでReactNativeアプリを計測する (iOS編)

上記の記事ではいずれもJavaScriptを使っているのですが、今回はTypeScriptで開発されたReactNativeアプリでAdobe AEP SDKを使う方法について説明します。

 

1. tsconfig.jsonを編集

アプリプロジェクトのtsconfig.jsonを開いて、allowJsオプションをtrueにします。

"allowJs": true,

allowJsをtrueにする

 

2. アプリのネイティブコードにコードを実装

Adobe AEP SDK for ReactNativeはネイティブ部分への実装も必要です。
そこはJavascript/TypeScript関係なく必要なので、そこは上記の記事を参考にして実装して下さい。

 

3. 型定義ファイルが見つからない?

2020年8月7日現在、AEP SDKをTypeScriptで記述されたApp.tsxにimportすると、以下のようなエラーメッセージが出ます。

型定義ファイルが見つからない

Could not find a declaration file for module '@adobe/react-native-acpcore'. 'node_modules/@adobe/react-native-acpcore/js/index.js' implicitly has an 'any' type.
Try `npm install @types/adobe__react-native-acpcore` if it exists or add a new declaration (.d.ts) file containing `declare module '@adobe/react-native-acpcore';`ts(7016)

型定義ファイルが見つからないというエラーです。
対策として、型定義ファイルを作ってあげればエラーを回避出来ます。

下記のコマンドで型定義ファイルを生成します。

$ echo "declare module '@adobe/react-native-acpcore'" > node_modules/@adobe/react-native-acpcore/js/index.d.ts
$ echo "declare module '@adobe/react-native-acpanalytics'" > node_modules/@adobe/react-native-acpanalytics/js/index.d.ts

これでエラーは解消されました。

 

4. カスタム変数もTypeScriptで実装

各画面でのtrackState/trackActionも通常通り実装します。
ただし、コンテキストデータはTypeScriptの構文に従って、「連想配列型」を使います。

//trackStateの例
const cd: {[key: string]: string;} = {
    '&&c1':'hoge',
    '&&v1':'D=c1'
};
ACPCore.trackState('main_page', cd);

コンテキストデータ cd に対して {[key: string]: string;} という型を定義してます。

 

TL;DR

Adobe AEP SDK for ReactNativeをTypeScriptで開発したReactNativeアプリに実装する方法について説明しました。
本日現在、ちょっと手を加える必要がありますが、最近増えてきたTypeScriptアプリもAdobeAnalyticsで計測出来ます。

 
弊社ではモバイルアプリへの AdobeAnalytics / GoogleAnalytics (Firebase) の実装支援を行っております。
お問い合わせはこちらからどうぞ

 

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. Adobe Analytics

    Adobe Summit 2020レポート: Advanced Techniques to Get …

    こんにちは、エクスチュアの権泳東(コン・ヨンドン)です。Ado…

  2. Adobe Analytics

    バウンスとは-Adobe Analyticsの指標説明

    今回はバウンスについて説明いたします。バウンスとはサイトを訪問した…

  3. Adobe Analytics

    Metabase: カスタムマップで日本地図を追加する

    こんにちは、エクスチュアの權泳東(コン・ヨンドン)です。今回は…

  4. Google BigQuery

    Google Apps Scriptを使ってスプレッドシートからBigQueryのテーブルを更新する…

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  5. Adobe Analytics

    Report&Analytics グラフについて

    こんにちは!インターン生の藤本です。私は、最近ACEの試験(Repo…

  6. Adobe Analytics

    Azure DatabricksでAdobe AnalyticsのDatafeedを分析する

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

最近の記事

  1. 【UAとは違う!?】GA4で変更された”イベント…
  2. 【DBエンジニアが語るSnowflake】②このロールがすご…
  3. LookerStudioを知る。
  4. Google Analytics4 を知る。
  5. 過去取れていたリファラ情報が上手く取れなくなっている問題
  1. IT用語集

    インスタンス(化)(Instance)って何?
  2. IT用語集

    オプティマイズ(Optimize)って何?
  3. Adobe Analytics

    Google Analytics検証を効率的に進める方法
  4. Google Cloud Platform

    Google Compute EngineのUbuntu VMにスワップ領域を作…
  5. Adobe Analytics

    Adobe新タグ登場って本当?AEP Web SDKって何だ?
PAGE TOP