クリック・トゥ・ローンチ統合

クリック・トゥ・ローンチは、パートナーが自分のサイトでネイティブボタンを顧客が操作した後にのみプレースメントを表示したい場合の統合ソリューションです。以下の実装手順をご覧ください。

クリック・トゥ・ローンチの統合

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);
});

クリックイベントが発生するページに顧客がいるときに、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 Context、Angular Service、または選択したフレームワークに適した方法で提供することによって行うことができます。

プレースメントを閉じる際、パートナーサイトは現在のページ上のプレースメントを削除し、クリーンアップを行うためにRoktサービス上のメソッドをトリガーする必要があります。

// プレースメント選択を閉じる
selection.close();

埋め込みプレースメントをレンダリングしている場合、サイトのレイアウトに影響を与えないようにアンカーHTML要素を削除したいかもしれません。以下の例を参照してください。

// Rokt Divを削除
let removeRokt = document.getElementById('rokt-placeholder')
removeRokt.remove(); 

クリック・トゥ・ローンチの統合​

クリックで閉じる​

クリック・トゥ・ローンチの統合

クリックで閉じる