クリックして統合を起動
クリックして起動は、顧客がサイト上のネイティブボタンをクリックした後にのみ配置を表示したいパートナー向けの統合ソリューションです。実装手順については以下をご覧ください：
クリックして起動を統合する
<head>タグ内にRoktスクリプトタグを含めることで、Rokt統合をページに読み込みます。
<head>
<script
async
crossorigin="anonymous"
id="rokt-launcher"
fetchpriority="high"
src="https://apps.rokt.com/wsdk/integrations/launcher.js"
type="module"
></script>
</head>
代わりに、既にアプリケーションに配信されているJavaScriptロジックに次のコードスニペットを追加することもできます：
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";
target.appendChild(script);
統合ランチャーのインスタンスを作成します。以下の例をコピーする場合は、
rokt-account-idをアカウントの固有IDに置き換えてください。rokt-account-idはアカウントマネージャーまたはOne Platformで取得できます。ランチャープロミスへの参照は、後でアプリケーションフローで再利用するために保存する必要があります。これは、グローバルステートに割り当てるか、Reactコンテキスト、Angularサービスなど、選択したフレームワークに適した方法で提供することができます。
const launcherPromise = new Promise((resolve, reject) => {
script.onload = () =>
resolve(window.Rokt.createLauncher({ accountId: "rokt-account-id" }));
script.onerror = (error) => reject(error);
});
クリックイベントが発生するページに顧客がいる場合、統合ランチャーを初期化します。
配置を読み込みます。顧客が配置を読み込むトリガーとして設定したボタンをクリックすると、シームレスに読み込まれるはずです。この時点で統合ランチャーサービスが実行されており、サイトはオファーの選択をトリガーする必要があります。配置の選択は、ページとトリガー要素の読み込みが完了した時点でトリガーできます。
ページ上でアンカーエレメントのレンダリングが遅れる可能性がある場合、例えばそれによってさらに遅延する追加のXHRリクエストの影響を受ける場合は、アンカーエレメントがレンダリングされるまで選択をトリガーする前に待機する必要があります。
async function configurePlacement() {
let launcher = await launcherPromise;
let selection = await launcher.selectPlacements({
attributes: {
email: "j.smith@example.com"
},
identifier: "button.click",
});
}
閉じるをクリックするには
ボタンクリックで配置を閉じる場合は、配置の選択状態を維持する必要があります。配置が表示されていない場合、選択はundefinedになり、configurePlacement関数でボタンクリック時に配置を参照するように再割り当てされます。これは、グローバルな状態に割り当てるか、Reactコンテキスト、Angularサービスなど、選択したフレームワークに適した方法で提供することができます。
配置を閉じる場合、パートナーサイトはRoktサービスのメソッドをトリガーして、現在のページの配置を削除し、クリーンアップを実行する必要があります。
// 選択した配置を閉じる
selection.close();
埋め込まれた配置をレンダリングしている場合、サイトのレイアウトに影響を与えないようにアンカーHTML要素を削除することができます。以下は例です。
// Rokt Divを削除する
let removeRokt = document.getElementById('rokt-placeholder')
removeRokt.remove();