CustomHtml

カスタムHTMLタグによる統合

カスタムHTMLタグの設定

1. Google Tag Managerから、Tagsに移動します。
2. Newをクリックします。
3. Tag Typeには、Custom 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. 保存して公開します。