All integrations

Framer

Framer has a custom code field for the site head.

Steps

  1. Open your project and go to Site settings > General.
  2. Find Custom code and the End of <head> tag field.
  3. Paste the snippet below.
  4. Click Save, then publish your site.

The snippet

Replace SITE_ID with the ID from your Glyphex site settings.

<script defer src="https://glyphex.io/t/SITE_ID.js"></script>

Custom code runs on published sites only, not in the editor preview.

Verify it works

Open your live site in a new tab, then open Realtime in your Glyphex dashboard. Your visit should show up within a few seconds.

Track custom events

Framer elements do not take arbitrary attributes, so listen for clicks in the same custom code field:

<script>
  document.addEventListener("click", function (e) {
    if (e.target.closest('a[href="/signup"]')) {
      window.analytics.track("signup_click", { location: "nav" });
    }
  });
</script>

Events can also be sent with window.analytics.track(name, props) or the declarative data-glyphex-event and data-glyphex-event-<prop> attributes.

Troubleshooting

  • No data? Check that the Site ID matches exactly and the page was republished or the cache cleared.
  • Ad blockers can block analytics scripts. Disable yours to test.
  • Content Security Policy: allow https://glyphex.io in both script-src and connect-src.
  • Check DevTools > Network for a request to glyphex.io/t/. A 404 means the Site ID is wrong.

Custom events

Installation