Skip to content

Tag.js Framer Quick Integration

This guide shows the fastest way to install tag.js on a Framer site.

1) Add tag.js in Framer custom code

In Framer:

  1. Open your project.
  2. Go to Site Settings -> Custom Code.
  3. Paste this snippet in End of <head>.
<script>
  window.thradTag =
    window.thradTag ||
    function () {
      (window.thradTag.q = window.thradTag.q || []).push(arguments);
    };
  window.thradTag.q = window.thradTag.q || [];

  window.thradTag("set", {
    tag_id: "adv_001",
    channel: "web",
  });

  window.thradTag("event", "page_view");
</script>
<script async src="https://cdn.thrad.ai/tag.min.js"></script>

Replace adv_001 with your real advertiser/tag ID.

2) Set shared settings once

Set global identifiers/defaults once, then send events without repeating them:

<script>
  window.thradTag("set", {
    tag_id: "adv_001",
    channel: "web",
    campaign_id: "framer_launch",
  });
</script>

3) Track additional events

You can send events anywhere Framer lets you run custom JS (embed/custom code blocks):

<script>
  window.thradTag("event", "product_view", {
    product_id: "sku_123",
    value: 49.99,
    currency: "USD",
  });
</script>

4) Track button clicks (Code Override)

For button-level tracking, use a Framer Code Override and emit an event from onTap.

  1. Create a code file in Framer (for example thrad-overrides.tsx).
  2. Add this override:
import type { ComponentType } from "react"

declare global {
  interface Window {
    thradTag?: (command: string, ...args: any[]) => void
  }
}

export function TrackHeroCta(Component: ComponentType): ComponentType {
  return (props: any) => {
    const onTap = (event: any) => {
      window.thradTag?.("event", "button_click", {
        button_id: "hero_cta",
        page_url: window.location.href,
      })

      // Preserve existing button behavior (links, interactions, other overrides).
      props.onTap?.(event)
    }

    return <Component {...props} onTap={onTap} />
  }
}
  1. Select the button in Framer and assign the TrackHeroCta override.
  2. Duplicate the override for other CTAs/events as needed.

5) SPA route changes and page views

If your Framer setup navigates client-side (without a full reload), an initial page_view in global custom code may only fire once. In that case, also emit page_view when each route/page mounts.

Minimal mount-based pattern for a page/root component:

import { useEffect } from "react"

export default function PageViewOnMount() {
  useEffect(() => {
    window.thradTag?.("event", "page_view", {
      page_url: window.location.href,
    })
  }, [])

  return null
}

Use one approach consistently to avoid duplicate page-view events.

6) Track conversions

On a confirmation/thank-you page, send:

<script>
  window.thradTag("conversion", {
    order_id: "order_123",
    value: 99.99,
    currency: "USD",
  });
</script>

If you support view-through attribution, call this once after load:

<script>
  if (typeof window.thradTag?.linkImpression === "function") {
    window.thradTag.linkImpression();
  }
</script>

8) Verify in browser

After publishing your Framer site:

  • Open DevTools -> Network
  • Confirm requests to:
  • https://events.thrad.ai/v1/collect
  • https://events.thrad.ai/v1/conversion (when conversion fires)

9) Troubleshooting

  • window.thradTag is undefined: check the snippet is in Site Settings -> Custom Code and the site is republished.
  • No network calls: confirm your click/override code runs and inspect DevTools Console for JS errors.
  • No conversion request: ensure order_id is present and the conversion code is running on the final success state/page.
  • No attribution on conversion: make sure landing URLs include thrad_click_id, thrad_exp, and thrad_sig.

Next references