MenuFramer

Installation guides

Framer

Add ProductLense to a Framer site in Site settings under Custom code, at the end of the head tag, then publish.

In Framer, site-wide code goes in Site settings → General → Custom code. Paste the ProductLense script into the End of <head> tag box and publish. Framer page transitions change the URL through the history API, so each page is recorded.

Add the script

  1. Copy your site id from Settings → Sites in the ProductLense dashboard.
  2. In Framer, open Site settings → General → Custom code.
  3. Paste the snippet into End of <head> tag, replacing SITE_ID.
  4. Publish.
Site settings → Custom code → End of <head> tag
<script>window.productlense=window.productlense||function(){(window.productlense.q=window.productlense.q||[]).push(arguments)}</script>
<script defer data-site="SITE_ID" src="https://api.productlense.app/a.js"></script>

Add your custom domain and the framer.website or framer.app domain you publish to as hostnames of the site in ProductLense if you want to see both.

Custom events

Count form submissions from the End of <body> tag box:

Site settings → Custom code → End of <body> tag
<script>
  document.addEventListener('submit', () => {
    window.productlense('event', 'Signup');
  }, true);
</script>

Then add Signup as a goal in the dashboard. See custom events and goals and funnels.

Verify your installation

  1. Publish, then open the published site in a normal browser window.
  2. Open the Live page in the ProductLense dashboard. Your visit appears within a few seconds.
  3. In the browser's developer tools, the Network tab shows a POST to https://api.productlense.app/api/e with status 204.

Custom code runs on the published site, not in the editor preview. Ad blockers in your own browser may block the request. If the visit does not appear, follow Verify your installation.

    ↑ ↓ to move, Enter to open