Last updated 2023年9月12日

CustomHtml

カスタムHTMLタグを使用した統合

カスタムHTMLタグのセットアップ

1. Google Tag Managerにアクセスし、タグに移動します。
2. 新規作成をクリックします。
3. タグの種類で、カスタムHTMLを選択します。
4. Roktの統合コードを追加します。カスタムスニペットを持っていない場合は、以下のコードを使用できます。

<script type="module">
  const attributes = {
    email: "",
    firstname: "",
    lastname: "",
    mobile: "",
    confirmationref: "",
    amount: "",
    currency: "",
    paymenttype: "",
    ccbin: "",
    zipcode: "",
    country: "",
    language: "",
  };

  if(!window.roktLauncher){
    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.importance = "high";
    script.crossOrigin = "anonymous";
    script.async = true;
    script.id = "rokt-launcher";
    target.appendChild(script);
    await new Promise((resolve) =>
    window.Rokt
      ? resolve()
      : document
        .getElementById("rokt-launcher")
        .addEventListener("load", () => resolve())
    );
    window.roktLauncher = await window.Rokt.createLauncher({
      accountId: "rokt-account-id",
      sandbox: true,
    });
  }

  const selection = await window.roktLauncher.selectPlacements({
    attributes,
    identifier: "payment_page"
  });
</script>

5. データレイヤーの変数を対応する属性フィールドに割り当てます（例：email：{{dl_email}}）。

注記

document.writeのチェックボックスが有効になっていることを確認してください。そうでない場合、Googleは変更の公開を防止します。また、accountIdをアカウントマネージャーから提供された値で更新し、テスト中にsandboxをtrueに設定することも忘れないでください。

6. トリガーを追加します。

7. 保存して公開します。