Google Tag Manager Integration

Option 1: Community Template Gallery (recommended)

The ClickLens template is available in the GTM Community Template Gallery. This is the fastest and safest way to add ClickLens via GTM.

1. In your GTM container, go to Tags → New.
2. Click Tag Configuration, then Discover more tag types in the Community Template Gallery.
3. Search for ClickLens.
4. Click Add to workspace.
5. Enter your Site Key (found in the ClickLens dashboard under Settings → Site Settings).
6. Set the trigger to All Pages.
7. Save the tag and Submit your container changes.

Option 2: Manual template import

If the template is not yet visible in the Gallery, you can import it manually.

1. Go to Templates → Tag Templates → New.
2. Click the three-dot menu and select Import.
3. Upload the ClickLens template file (template.tpl). You can download it from our GitHub repository.
4. Click Save.
5. Create a new tag using the imported template. Enter your Site Key, set the trigger to All Pages, and submit.

Option 3: Custom HTML tag (fallback)

If you prefer not to use templates, you can add ClickLens as a Custom HTML tag.

1. In GTM, go to Tags → New.
2. Select Custom HTML as the tag type.
3. Paste the following code:

<script defer src="https://app.clicklens.com/t.js"
  data-site="YOUR_SITE_KEY"
  data-endpoint="https://app.clicklens.com/api/v1/beacon">
</script>

Replace YOUR_SITE_KEY with your site key. Set the trigger to All Pages, save, and submit.

Template configuration

When using the ClickLens GTM template (Option 1 or 2), you'll see these settings:

Testing with GTM Preview mode

1. In GTM, click Preview in the top right.
2. Enter your website URL and click Connect.
3. Your site will open in a new tab with the GTM debug panel.
4. In the debug panel, verify that the ClickLens tag fired on the Container Loaded event.
5. Open the browser's Network tab (DevTools → Network). Filter by beacon and confirm you see a request to the ClickLens beacon endpoint returning 204 No Content.

Conversion tracking via GTM

You can also set up conversion tracking through GTM. Create a separate Custom HTML tag that fires on your thank-you or confirmation page:

<script>
  var sessionKey = sessionStorage.getItem('cl_sk');
  if (sessionKey) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://app.clicklens.com/api/v1/sessions/convert');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Authorization', 'Bearer YOUR_SITE_KEY');
    xhr.send(JSON.stringify({ sessionKey: sessionKey }));
  }
</script>

Set the trigger to fire on your conversion page URL (e.g., /thank-you). See the conversion tracking guide for more details.

FAQ

Does the tag work with GTM consent mode?

ClickLens does not use cookies or track personal data, so it does not require consent under most privacy frameworks. However, you can configure the tag to respect your consent settings by adding a consent trigger condition in GTM.

Can I use the template with GTM for server-side tagging?

The ClickLens template is designed for the GTM web container (client-side). The tag needs to run in the browser to collect behavioural signals like mouse movements and canvas fingerprints.

Why does the template need inject_script permissions?

The template loads the ClickLens tracking script (t.js) from the ClickLens CDN. GTM's sandboxed JavaScript requires explicit permission to inject external scripts. The template only loads from app.clicklens.com (or your self-hosted endpoint).

Will it conflict with my other GTM tags?

No. ClickLens runs independently and does not modify or interfere with other tags. It uses a namespaced global variable (__clicklens) to avoid conflicts.