インテグレーションを起動するクリック
「インテグレーションを起動するクリック」は、パートナーが自サイトのネイティブボタンと顧客がインタラクトした後にのみプレースメントを表示したい場合のためのインテグレーションソリューションです。実装手順については以下を参照してください：
インテグレーションを起動するクリック
- 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 ContextやAngular Serviceとして提供したり、お好きなフレームワークに適した方法で行うことができます。
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 Context、Angular Serviceとして提供したり、選択したフレームワークに適した方法で行うことができます。
プレースメントを閉じる際、パートナーサイトはRoktサービス上のメソッドをトリガーして、現在のページからプレースメントを削除し、クリーンアップを実行する必要があります。
// プレースメント選択を閉じる
selection.close();
埋め込みプレースメントをレンダリングしている場合、サイトレイアウトに影響を与えないようにアンカーHTML要素を削除することをお勧めします。以下の例を参照してください。
// Rokt Divを削除
let removeRokt = document.getElementById('rokt-placeholder')
removeRokt.remove();