インテグレーションを起動するにはクリックしてください
クリックして起動するのは、顧客が自分のサイトのネイティブボタンに関与した後にのみ掲載を表示したいパートナー向けのインテグレーションソリューションです。実装手順は以下をご覧ください：
クリックして起動を統合する
- Roktインテグレーションをあなたのページにロードするには、
ウェブサイトの<head>に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);
Integration Launcherのインスタンスを作成します。以下の例をコピーしている場合は、
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);
});
顧客がクリックイベントが発生するページにいるときにIntegration Launcherを初期化します。
あなたの配置をロードします。顧客があなたの配置をロードするためのトリガーとして設定したボタンをクリックすると、それはシームレスにロードされるべきです。この時点でIntegration Launcherサービスは実行中であり、サイトはオファー選択をトリガーする必要があります。ページとトリガー要素の読み込みが完了したときに配置選択をトリガーすることができます。
アンカー要素のレンダリングがページ上で遅れる可能性がある場合（例えば、追加の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();