Last updated 2024年7月16日

CustomHtml

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

カスタム HTML タグの設定

1. Google タグ マネージャーから、タグ に移動します。
2. 新規 をクリックします。
3. タグの種類 で、カスタム HTML を選択します。
4. Rokt 統合コードを追加します。カスタムスニペットをお持ちでない場合は、以下を使用できます:

<script type="module">
  const attributes = {
    email: "",
    firstname: "",
    lastname: "",
    mobile: "",
    confirmationref: "",
    amount: "",
    currency: "",
    paymenttype: "",
    ccbin: "",
    billingzipcode: "",
    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. dataLayer 変数を対応する属性フィールドに割り当てます (例: email: {{dl_email}})。

注記

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

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

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