# Carrd

Add ProductLense to a Carrd site with an Embed element set to Code and placed in the head; embeds need a Carrd Pro plan.

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.

```html title="Embed code" {1-2}
<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:

```html
<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](/docs/track/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](/docs/install/verify).