テスト
統合のテスト
Web SDKの統合をテストして、正しく読み込まれ、期待通りのデータ属性が読み込まれていることを確認することをお勧めします。
支払いページに移動します。
開発者ツールを開き、ページの任意の部分を右クリックして検査をクリックし、ネットワークアクティビティを確認します。
開いたパネルのネットワークタブに移動し、ページを再読み込みします。
検索パネルで
domain:\*.rokt.comを検索します。
placementsリクエストで200ステータスコードが返された場合、それは統合が適切に設定されている可能性が高いことを示唆しています。質問や追加のガイダンスが必要な場合は、Roktのアカウントマネージャーに連絡してください。
折りたたみ式のワンページチェックアウト
一部のアプリケーションでは、支払いセクションが折りたたみ要素内に含まれています。この場合、支払いセクションが表示可能になるまでselectPlacementsメソッドを呼び出さないでください。さもなくば、Roktはユーザーが実際にプレースメントを見たかどうかを知らずにプレースメントインプレッションをカウントしてしまい、長期的なパフォーマンスに悪影響を及ぼす可能性があります。
実装例は以下をご覧ください：
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- メタタグ -->
<!-- パート #1 - Web SDKの読み込み -->
<script type="module">
window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
const target = document.head || document.body;
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
script.fetchpriority = "high";
script.crossOrigin = "anonymous";
script.async = true;
script.id = "rokt-launcher";
script.addEventListener('load', () => resolve());
script.addEventListener('error', (error) => reject(error));
target.appendChild(script);
});
</script>
<!-- 他のスクリプトとメタタグ -->
</head>
<body>
<!-- ここにあなたのHTMLコンテンツが入ります -->
<!-- パート #2 - データ属性が使用可能になったら、下記のスクリプトを実行してRoktのプレースメントを表示します -->
<script type="module">
await window.RoktLauncherScriptPromise;
const launcher = await window.Rokt.createLauncher({
accountId: "rokt-account-id",
sandbox: true,
});
async function renderPlacement() {
const selection = await launcher.selectPlacements({
identifier: "payment_page",
attributes: {
...
}
});
}
document.querySelector('#renderPlacement').addEventListener('click', renderPlacement)
</script>
<!-- Your HTML content here -->
</body>
</html>
この統合をテストするには、上に示されたようにネットワークタブを開き、placements ネットワークコールが適切なトリガーイベントが発火した後のみ呼び出されることを確認してください。
シングルページアプリケーション
RoktをSPAと統合するプロセスは、従来のマルチページウェブサイトとの統合プロセスとは異なります。上に記載された折りたたみ式ワンページチェックアウトと同様に、おすすめのアプローチは、顧客が初めてサイトに到着したときにWeb SDKを事前に初期化し、顧客がプレースメントがレンダリングされる場所に達したときにプレースメントをトリガーすることです。
上記のように、この統合をテストするには、ネットワークタブを開き、placements ネットワークコールが適切なトリガーイベントが発火した後のみ呼び出されることを確認してください。
シングルページアプリケーションに関する詳細情報は、こちらを参照してください。
複数の支払いフロー
支払いページに異なるユーザーフローがある場合、たとえばユーザーがログインユーザーまたはゲストとして支払いページに到達する可能性がある場合、各可能なバリエーションを必ずテストしてください。
統合テストについての詳細は、包括的ガイドをお読みください。