テスト
統合のテスト
Web SDK の統合が正しく読み込まれ、データ属性が期待通りに読み込まれていることを確認するためにテストを行うことをお勧めします。
支払いページに移動します。
デベロッパーツールを開き、ページの任意の部分を右クリックして検証をクリックし、ネットワークアクティビティを確認します。
開いたパネルでネットワークタブに移動し、ページを再読み込みします。
検索パネルで
domain:*.rokt.comを検索します。
placements リクエストに 200 ステータスコードが返される場合、それは統合が正しく設定されている可能性が高いことを示しています。質問や追加のガイダンスが必要な場合は、Rokt アカウントマネージャーにお問い合わせください。
折りたたみ可能なワンページチェックアウト
いくつかのアプリケーションでは、支払いセクションが折りたたみ可能な要素内に含まれています。この場合、支払いセクションが表示されるまで selectPlacements メソッドを呼び出すのを控えてください。そうしないと、Rokt は実際にユーザーが配置を見たかどうかを確認することなく配置インプレッションをカウントし、長期的なパフォーマンスに悪影響を及ぼす可能性があります。
以下の実装例をご覧ください:
<!DOCTYPE html>
<html lang="en">
<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 ネットワーク呼び出しが行われることを確認してください。
シングルページアプリケーション
シングルページアプリケーション (SPA) とのRoktの統合プロセスは、従来のマルチページウェブサイトとの統合プロセスとは異なります。上記の折りたたみ式ワンページチェックアウトと同様に、推奨されるアプローチは、顧客がサイトに最初に到着した際にWeb SDKを事前に初期化し、顧客が配置がレンダリングされる場所に達した時点で配置をトリガーすることです。
上記と同様、このインテグレーションをテストするにはネットワークタブを開き、適切なトリガーイベントが発生した後にのみ placements ネットワーク呼び出しが行われることを確認してください。
シングルページアプリケーションに関する詳細はこちらをご参照ください。
複数の支払いフロー
支払いページに異なるユーザーフローがある場合、たとえばユーザーがログインユーザーまたはゲストとして支払いページに到達する場合、各可能なバリエーションをテストするようにしてください。
統合のテストに関する詳細は、私たちの包括的なガイドをお読みください。