テスト
統合のテスト
Web SDKの統合が正しく読み込まれ、期待どおりのデータ属性が読み込まれていることを確認するために、統合のテストをおすすめします。
支払いページに移動します。
開発者ツールを開き、ページの任意の部分を右クリックして検証をクリックして、ネットワークアクティビティを検査します。
開いたパネルでネットワークタブに移動し、ページをリロードします。
検索パネルで
domain:\*.rokt.comと検索します。
placementsリクエストのステータスコードが200であれば、統合が正しく設定されている可能性が高いです。質問やさらなるガイダンスについては、Roktのアカウントマネージャーにお問い合わせください。
折りたたみ可能なワンページチェックアウト
一部のアプリケーションでは、支払いセクションが折りたたみ要素内に含まれています。これらの場合、支払いセクションが表示可能になるまでselectPlacementsメソッドを呼び出さないでください。それ以外の場合、Roktはユーザーが実際に配置を見たかどうかを知らずに配置のインプレッションをカウントし、長期的なパフォーマンスに悪影響を与える可能性があります。
以下は実装例です：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<!-- Part #1 - Load the 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>
<!-- Other scripts and meta tags -->
</head>
<body>
<!-- Your HTML content here -->
<!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
<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 ネットワークコールが呼び出されることを確認してください。
シングルページアプリケーションについての詳細はこちらを参照してください。
複数の支払いフロー
支払いページに異なるユーザーフローがある場合、例えばユーザーがログイン済みユーザーまたはゲストとして支払いページに到達する場合は、各可能なバリエーションをテストしてください。
統合のテストについての詳細は、包括的なガイドを参照してください。