Zeloxa Labs — digital product studio logo
Login

Guide

Integrations: analytics, pixels and chat

Add Google Analytics, Tag Manager, Meta and TikTok pixels, Clarity, Hotjar or live chat by pasting an ID, with an optional cookie consent banner.

On this page

Add Google Analytics, a Meta or TikTok pixel, Microsoft Clarity, Hotjar or a live chat to your site by pasting an ID. Open your project and choose the Integrations tab. There is no code to edit and nothing to redeploy: the service's official snippet is added to every page of your site as it is served, and any change is live within 30 seconds.

How it works

  1. Open your project and choose Integrations.
  2. Pick a service and click Connect.
  3. Paste the ID the service gave you (see below for where to find each one) and click Connect.
  4. Open your site in a new tab. Within 30 seconds the service starts receiving visits — most of them show "live" or "real-time" visitors so you can check.

Each connected integration has a switch. Turning it off stops the tag at once (within 30 seconds) but keeps its settings, so you can turn it back on later. Remove deletes it.

What is added, and where:

  • Tags go into HTML pages only — never into images, stylesheets, scripts or downloads.
  • Your site's own 404 page gets them too (a visit to a missing page is still a visit), but a missing image or file does not.
  • Previews of branches and pull requests do not get a tag unless you tick Also on previews for it. Leaving it off keeps reviews out of your real numbers.
  • Your files are never changed. Removing an integration leaves your site exactly as you deployed it.

To see the exact code a service will add, open it and choose View the code that will be added.

Where to find each ID

Google Analytics 4

You need the Measurement ID, which starts with G- (for example G-AB12CD34EF).

  1. Open Google Analytics and click Admin (the gear icon, bottom left).
  2. Under Data collection and modification, open Data streams and choose your website's stream. If there is none, add a Web stream with your site's address first.
  3. Copy the Measurement ID shown at the top right.

Old "Universal Analytics" IDs (UA-…) no longer collect data and are not accepted.

Google Tag Manager

You need the Container ID, which starts with GTM-.

  1. Open Google Tag Manager and choose your container.
  2. The ID is shown at the top of the workspace, next to the container name.

Use Tag Manager instead of the Google Analytics integration if you already manage your tags there — connecting both would count every visit twice.

Meta Pixel

You need the Pixel ID: a long number.

  1. Open Meta Events Manager.
  2. Under Data sources, select your pixel (Meta also calls it a dataset).
  3. Copy the number shown under its name.

The integration sends a PageView on every page. Conversions you set up in Events Manager with its no-code event setup tool keep working.

TikTok Pixel

You need the pixel ID (TikTok sometimes calls it the pixel code): 15 to 25 letters and numbers.

  1. Open TikTok Ads Manager and go to Tools → Events.
  2. Choose Web events and select your pixel.
  3. Copy the ID shown under its name.

Microsoft Clarity

You need the Project ID: a short code of letters and numbers.

  1. Open Microsoft Clarity and choose your project.
  2. Go to Settings → Overview.
  3. Copy the Project ID.

Hotjar

You need the Site ID: a number.

  1. Open Hotjar and go to Sites & Organizations from your account menu.
  2. Copy the Site ID next to your site's name.

Crisp

You need the Website ID, which looks like 1a2b3c4d-5e6f-4a7b-8c9d-0e1f2a3b4c5d.

  1. Open Crisp and go to Settings → Workspace settings.
  2. Choose Setup & integrations and copy the Website ID.

Tawk.to

You need two IDs: the Property ID (24 characters) and the Widget ID.

  1. Open the tawk.to dashboard and go to Administration → Channels → Chat Widget.
  2. Look at the widget code. It contains an address like embed.tawk.to/64a1b2c3d4e5f6a7b8c9d0e1/1h2j3k4l5.
  3. The first part after embed.tawk.to/ is the Property ID, the second is the Widget ID. Use default for the property's default widget.

Custom code

For anything not in the list — a site verification tag, a review widget, another analytics tool — choose Custom code and paste the snippet the service gave you:

  • Code for <head> is added at the end of the <head> of every page. Verification <meta> tags and most tracking scripts go here.
  • Code for the end of <body> is added just before </body>. Widgets that say "paste before the closing body tag" go here.

Each box takes up to 20 KB. The code runs on every page exactly as written, so only paste code from a service you trust. If something looks wrong after adding it, switch the integration off: your site is back to normal within 30 seconds.

Analytics and advertising tags set cookies and collect data about visitors. If you have visitors in the European Union, the United Kingdom and many other places, privacy law (such as the GDPR and the ePrivacy rules) generally requires you to ask before those tags run. This page explains what the built-in banner does; it is not legal advice, and you are responsible for your own privacy notice.

Turn on Show a consent banner in the Cookie consent banner section of the Integrations tab. While it is on:

  • A banner with Accept and Reject buttons, equally easy to press, is shown at the bottom of every page until the visitor chooses.
  • Analytics and marketing tags wait. Google Analytics, Tag Manager, the Meta and TikTok pixels, Clarity and Hotjar load only after the visitor clicks Accept. If they click Reject, they never load.
  • Google Consent Mode v2 is set to "denied" for everything before any Google tag loads, and updated to "granted" when the visitor accepts.
  • Live chat loads straight away. Crisp and Tawk.to are part of how your site works, not tracking, so they do not wait.
  • Custom code loads straight away unless you choose "Load after the visitor accepts" for it.
  • Tags' <noscript> fallbacks are left out, since they cannot ask first.
  • The visitor's choice is remembered for 180 days in a cookie named consent_choice on your own domain. Nothing about the visitor is sent anywhere by the banner itself.

You can change the message, the button labels, the link to your privacy policy, the position (full width, bottom left or bottom right) and the colours. The preview next to the settings shows what visitors will see.

The banner only appears on pages that get at least one integration.

Letting visitors change their mind

Add a link like this anywhere on your site — the footer is typical:

<a href="#" data-consent-open>Cookie settings</a>

Clicking any element with data-consent-open opens the banner again. If a visitor who had accepted now rejects, the page reloads so the tags stop. From your own scripts, window.siteConsent.open() does the same and window.siteConsent.status() returns "granted", "denied" or null.

Content-Security-Policy

Most sites do not send a Content-Security-Policy, and if yours does not, there is nothing to do here.

If your site restricts which scripts may run — with a policy in a _headers file, a <meta http-equiv="Content-Security-Policy"> tag, or the report-only policy in Settings → Security headers — that policy must allow each tag:

  • Every snippet, and the consent banner, is a small inline script, so script-src needs 'unsafe-inline'.
  • Each service loads from its own domains. For example Google Analytics needs https://www.googletagmanager.com in script-src and https://*.google-analytics.com in connect-src.

When your site sends a report-only policy, the Integrations tab lists exactly which sources each connected integration still needs. Add them before you make the policy enforcing, or the browser will block those tags.

Troubleshooting

The service says it sees no data. Open your live site (not a preview) in a private window and wait up to 30 seconds after saving. Check that the integration's switch is on. If the consent banner is on, click Accept — nothing loads before that. Ad blockers and browser tracking protection also block many of these tags, so test with them turned off.

Visits are counted twice. The same tag is probably also in your site's own code, or both Google Analytics and a Tag Manager container that contains Google Analytics are connected. Keep one.

"Needs attention" next to an integration. Its saved ID is no longer valid, so the tag is not being added. Choose Fix and enter the ID again.

My page looks broken after adding custom code. Switch the custom code integration off, then check the snippet for unclosed tags.

Can I automate this? Yes: the Host API can list, connect, change and remove integrations and update the consent banner.

Ready when you are

Everything in this guide is under Hosting in your dashboard.

Open Hosting

Something unclear or missing? Tell us.