Custom embeds vs Additional CSS vs tracking IDs

  • advanced
  • tracking
  • embeds
  • css
  • customizer

Dirigible gives you three places to add extra code. Using the wrong one double-loads tags, skips the cookie banner, or puts JavaScript where CSS belongs.

Pick a box

You have Put it here
A Google Analytics, Tag Manager, Meta Pixel, LinkedIn, StackAdapt, or Hotjar ID Appearance → Customize → Scripts & Embeds → Analytics & Tracking
A full script from a chat, scheduler, or other vendor with no ID field Scripts & Embeds → Custom Embeds
CSS to change how something looks Appearance → Customize → Additional CSS

If the vendor gave you both an ID and a snippet, use the ID field and throw the snippet away. Dirigible already loads the script.

Tracking IDs

Paste only the ID, not the vendor's full install code.

These IDs follow Tracking Load Strategy (After Page Load or First Interaction) and wait for the GDPR cookie banner when that's on. That's why they belong here instead of in Custom Embeds.

Field-by-field steps: Adding tracking codes.

Don't fill in both Google Analytics ID and Google Tag Manager ID if Tag Manager already loads GA4. You'll count every visit twice.

Custom Embeds

Open Scripts & Embeds → Custom Embeds when you have a full snippet and no matching ID field. Step-by-step: Adding scripts.

Field Where it loads Typical use
Tracking Embed Near the end of the page, with the other tracking codes A pixel with no ID field
<head> Embed The page head Snippets the vendor says must go in the head
<body> Embed Right after the page body opens Widgets that need to load early
<footer> Embed The footer Chat and scheduling widgets

Paste the snippet exactly as the vendor supplies it, including <script> tags. Add one embed at a time.

Custom Embeds load as pasted. They don't wait for Tracking Load Strategy or the cookie banner. If a service has an ID field, use that instead.

Don't also paste the same snippet into a page block or into Additional CSS.

Additional CSS

Use Additional CSS for look-and-feel: colors, spacing, hiding a header button, styling a form. It is not for <script> tags or tracking pixels.

How to target one block, and which color variables to use: Adding custom CSS with Additional CSS. For a change that should stay on one Section, use Section block CSS.

Common mix-ups

  • Pasting a GTM snippet into <head> Embed and filling Google Tag Manager ID. Pick one.
  • Dropping a chat widget into a page's Custom HTML block so it only appears there, then also adding it site-wide in Custom Embeds.
  • Putting CSS in Custom Embeds wrapped in <style>. Put the CSS in Additional CSS.

Related guides