Logo

Framer

See what visitors do after they reach your Framer site

When someone clicks a link in a Quotient email and lands on your Framer site, you want to know what happens next. Quotient's JavaScript pixel records the visit and the pages they view while preserving the original campaign, email, or social post as the source.

You only need to install the pixel once. Framer will add it to every page on your site.

Before You Start

Before you install the pixel, you need:

  • A Framer site plan that supports custom code
  • Permission to edit and publish the Framer project
  • A Quotient public API key

Create the key in Settings → Developers. Choose a Public key and give it the Analytics: write permission. For its allowed origins, add your production domain, such as https://example.com. This prevents other websites from using your key.

If your site is also published to a Framer subdomain, or you have not connected a custom domain yet, add that address too. It will look something like https://your-site.framer.website, and Framer's Publish menu shows the exact address.

The key you copy should start with pk_. Never put a private key beginning with sk_ in Framer or any other browser code.

Add the Pixel to Framer

  1. Open your project in Framer, then open Project Settings.
  2. Select the Custom Code tab in the left sidebar.
  3. Click Add Script. If you already have custom code, click the + icon instead.
  4. Name the script something you will recognize later, such as Quotient.
  5. Paste the following snippet, replacing pk_replace_with_your_public_key with the public key you copied from Quotient:
<script src="https://unpkg.com/@quotientjs/client@0.6.2/dist/quotient.browser.js"></script>
<script>
  Quotient.QuotientClient.init({
    apiKey: "pk_replace_with_your_public_key",
  });
</script>
  1. Place the code at the end of the <body> tag.
  2. Leave the page list empty so the script runs on every page.
  3. Under how often the code should run, choose Once.
  4. Publish the site. If it's already live, click Update to publish your changes.

Framer moves between pages without reloading the browser, and the pixel already follows those page changes on its own. That's why you should choose Once. If the script runs again on every page visit, you may start a second copy of the pixel and count the same visit twice. For the same reason, do not add another page-view call. See Framer's custom code guide if you cannot find these settings.

Check the Installation

Visit the published site and move between a few pages. The quickest way to confirm that the pixel is working is to inspect the request it sends to Quotient:

  1. Open your browser's developer tools and select Network.
  2. Reload the page.
  3. Search the requests for analytics/web.
  4. Select the request and confirm that its status is 200.

If the request returns 403, the domain is probably missing from the key's allowed origins, or the key does not have the Analytics: write permission. If there is no request, make sure you published your latest changes and pasted a public key beginning with pk_ into the snippet.

The pixel stores device and session identifiers in the visitor's browser. Your privacy notice and consent setup should cover this tracking. If you require consent before loading analytics, configure your consent tool to run the snippet only after the visitor accepts analytics tracking.