Carrd

Carrd adds custom code through Embed elements. An embed placed in the head runs on the whole site. Embeds need a Carrd Pro plan.

Add the script#

1. In the Carrd editor, add an element and choose Embed.
2. Set Type to Code and Style to Hidden, then set its placement to Head.
3. Paste the two tags below into Code. Replace SITE_ID with the id from Settings → Sites in the ProductLense dashboard.
4. Publish the site.

<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>

Carrd sections linked with # change only the hash, which ProductLense does not record as a new page, so a one-page Carrd site shows one pageview per visit. Add your domain, and the .carrd.co address if visitors use it, to the site's hostnames in the ProductLense dashboard.

Custom events#

To count a button press, add a second hidden Code embed placed at the end of the body:

<script>
  document.querySelector('#buttons01 a')?.addEventListener('click', () => {
    window.productlense('event', 'Signup clicked');
  });
</script>

Use the element id Carrd shows in the element's settings. See custom events for naming rules.

Verify your installation#

1. Publish, then open the live 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.

Ad blockers in your own browser may block the request. If the visit does not appear, follow Verify your installation.