Capacitor SDKでの初回起動時にApple Ads対象ペイウォールを表示する
Apple Ads(AA)のアトリビューションは adapty.activate() の後に非同期で届きます。初回起動時はまだ届いていないことが多いため、getFlow はデフォルトのオーディエンスで解決され、Apple Ads ユーザーは AA セグメント向けのペイウォールを見逃してしまいます。アトリビューションが届くまでペイウォールの表示を遅らせるのではなく、まず即座に表示し、AA アトリビューションが適用されたタイミングでリフレッシュしましょう。こうすることで、Apple Ads ユーザーにはターゲット設定済みのバリアントが表示され、それ以外のユーザーは待ち時間なしでペイウォールを見ることができます。AdaptyProfile.appliedAttributionSources を使うと、AA アトリビューションが適用されたタイミングを確認できます。
始める前に
必要なもの:
- Adapty Capacitor SDK 3.17.1 以降。
- AdaptyでApple Adsがアプリに設定済みであること。Apple Ads を参照してください。
仕組み
adapty.activate() を呼び出すと、SDKはバックグラウンドでApple Ads アトリビューションをAppleにリクエストし、その結果をAdaptyのバックエンドに転送します。AA がプロファイルのアクティブなアトリビューションソースになると、SDKは onLatestProfileLoad リスナーに更新された AdaptyProfile を届けます。このとき、appliedAttributionSources 配列には 'apple_search_ads' が含まれています。
これにより、ペイウォールを2つのステップで読み込むことができます。
- すぐに
getFlowを呼び出します。アトリビューションがまだ適用されていない状態では、Adapty はデフォルトのオーディエンスに対してリクエストを解決するため、ユーザーにはすぐにペイウォールが表示されます。 'apple_search_ads'が現れたら、再度getFlowを呼び出します。Adapty は Apple Ads オーディエンスに対してリクエストを解決し、ターゲットに合わせたペイウォールを返します。これにより、最初のペイウォールが置き換えられます。
appliedAttributionSources は空または存在しない場合があります。これは次のいずれかを意味します:
- このプロファイルに対して Apple Ads アトリビューションがまだ処理されていない、または
- アトリビューションがまったく届いていない。
どちらの場合でも、ステップ1は安全です — Adaptyは現在のプロファイル状態に一致するオーディエンス(通常はデフォルトオーディエンス)に対してリクエストを解決します。ステップ2は
'apple_search_ads'が現れたときにのみ実行されます。
その後のすべての起動では、キャッシュされたプロファイルのappliedAttributionSourcesにすでに'apple_search_ads'が含まれているため、最初のgetFlowの時点でApple広告でセグメントされたペイウォールが返されます — 2回目のフェッチや表示上の変化は発生しません。この2ステップのフローが重要なのは、アトリビューションがまだ取得中の初回起動時のみです。
実装
ペイウォールをすぐに表示し、'apple_search_ads' を受信したらペイウォールを更新します。
- SDKを有効化します。 Capacitor SDKのインストールと設定をご覧ください。
getFlowを使ってペイウォールを読み込み、表示します — アトリビューションを待たずに進めてください。adapty.addListener('onLatestProfileLoad', …)でプロファイルの更新を購読し、'apple_search_ads'が現れるのを監視します。これが表示されたら、ペイウォールを再取得して更新済みのものを表示してください。まだリスナーを設定していない場合は、サブスクリプション更新のリッスンをご覧ください。
const listener = await adapty.addListener('onLatestProfileLoad', async ({ profile }) => {
if (!profile.appliedAttributionSources?.includes('apple_search_ads')) return;
const targeted = await adapty.getFlow({ placementId });
// present the targeted flow in place of the first one
});
// Call listener.remove() after the upgrade, or after a timeout (see below).
- タイムアウト後にリスナーを停止する。 Apple Ads のアトリビューションを受け取るユーザーは多くないため、セッション全体で待ち続けるのではなく、一定時間後にリスナーを削除してください。リクエストが失敗した場合でもユーザーに必ず何かが表示されるよう、プレースメントにフォールバックペイウォールを設定しておきましょう。
完全な例
onAppleAdsAttribution は、Apple Ads のアトリビューションが適用されると解決し、timeoutMs 経過後に拒否されます。以下の使用例では、まずペイウォールをすぐに読み込んでおき、アトリビューションが届いた時点で再取得します。Apple Ads のユーザーにはターゲットペイウォールが表示され、アトリビューションが届かない場合は最初のペイウォールがそのまま表示されます。
const APPLE_ADS_SOURCE = 'apple_search_ads';
const placementId = 'YOUR_PLACEMENT_ID';
function hasAppleAdsAttribution(profile: AdaptyProfile): boolean {
return profile.appliedAttributionSources?.includes(APPLE_ADS_SOURCE) ?? false;
}
/**
* Resolves once Apple Ads attribution is applied to the profile.
* Rejects with a timeout error if attribution never arrives within `timeoutMs`.
* Call after `adapty.activate()`.
*/
export function onAppleAdsAttribution(timeoutMs: number): Promise<void> {
return new Promise((resolve, reject) => {
let timer: ReturnType<typeof setTimeout> | undefined;
let handle: { remove: () => void } | undefined;
const stop = () => {
clearTimeout(timer);
handle?.remove();
};
adapty
.addListener('onLatestProfileLoad', ({ profile }) => {
if (!hasAppleAdsAttribution(profile)) return;
stop();
resolve();
})
.then(listener => {
handle = listener;
});
timer = setTimeout(() => {
stop();
reject(new Error(`Apple Ads attribution timed out after ${timeoutMs}ms`));
}, timeoutMs);
});
}
let flow = await adapty.getFlow({ placementId });
onAppleAdsAttribution(30_000)
.then(() => adapty.getFlow({ placementId }))
.then(updated => {
flow = updated;
})
.catch(() => {
console.log('Apple Ads attribution or loading failed');
});
初回起動時、Apple Ads ユーザーにはデフォルトのペイウォールが一瞬表示された後、差し替えられます。ペイウォールビルダーでペイウォールを表示している場合は、再表示が許容できるかどうかを判断するか、ペイウォールを表示する前にアップグレードを適用してください。timeoutMs は、どのくらいの時間待ち受けるかに合わせて調整してください。アトリビューションが届く場合、通常は起動から数秒以内に到着します。
アプリがすでに別の目的(例:サブスクリプション状態の確認)のために onLatestProfileLoad をリッスンしている場合、変更の必要はありません。adapty.addListener は複数の独立したリスナーをサポートしているため、既存のリスナーに影響を与えることなく、新しいリスナーを追加できます。