Skip to main content

​
Google Tag Manager (GTM) Integration

This guide covers the GTM setup in Syntropy-Journals and how to use it for managing marketing tags, conversion tracking, and third-party integrations.

​
Overview

Google Tag Manager is installed site-wide via the config-driven head components system. It loads a container (GTM-58ZTSM22) that allows managing tags, triggers, and variables from the GTM dashboard without code deploys.

​
Architecture

​
Injection Points

TagLocationPurpose
<script> (GTM container)<head>Loads the GTM container and initializes dataLayer
<noscript><iframe><body> via overlay_componentFallback for JS-disabled browsers

​
Configuration

​
Hydra YAML (config/head/default.yaml)

analytics:
  google_tag_manager:
    enabled: true
    container_id: ${oc.env:GTM_CONTAINER_ID,"GTM-58ZTSM22"}

​
Environment Variable Override

Set GTM_CONTAINER_ID to use a different container: 
# In envs/dev or .env
GTM_CONTAINER_ID=GTM-XXXXXXX

​
Disabling GTM

Set enabled: false in the YAML or provide an empty container ID: 
GTM_CONTAINER_ID=""

​
Config Schema

Defined in syntropy_journals/app/config/schemas/head.py: 
@dataclass
class GoogleTagManagerConfig:
    enabled: bool = False
    container_id: str = ""
No schema changes are needed to configure GTM — only the YAML values.

​
Active Integrations (Config-Driven)

These integrations are already configured in config/head/default.yaml and load automatically on every page.

​
Apollo.io Website Tracker

Status: Active (inline script in config/head/default.yaml) Apollo visitor tracking is configured as an inline script, not via GTM. It loads on every page and identifies website visitors for sales intelligence. 
# config/head/default.yaml
inline_scripts:
  # Apollo.io website visitor tracking
  - >-
    function initApollo(){var n=Math.random().toString(36).substring(7),o=document.createElement("script");
    o.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache="+n,o.async=!0,o.defer=!0,
    o.onload=function(){window.trackingFunctions.onLoad({appId:"685cbc612fb8c2001938a965"})},
    document.head.appendChild(o)}initApollo();
App ID: 685cbc612fb8c2001938a965 To verify: open any page, check Network tab for requests to assets.apollo.io, then confirm in Apollo Settings that the connection is active.

​
Facebook Domain Verification

Status: Active (verification meta tag in config/head/default.yaml) 
# config/head/default.yaml
verification:
  facebook:
    enabled: true
    name: "facebook-domain-verification"
    value: "29op3ks5j8tpt3jz9mboopn8lr4uj1"
This produces: <meta name="facebook-domain-verification" content="29op3ks5j8tpt3jz9mboopn8lr4uj1" /> To verify: visit the published site, view page source, confirm the meta tag is in <head>.

​
Adding More Tags via GTM

GTM can manage additional marketing/analytics tags without code changes. Configure them in the GTM dashboard.

​
Adding Meta (Facebook) Pixel

  1. Tags > New > Tag Type: Custom HTML
  2. Paste the Meta Pixel base code
  3. Trigger: All Pages
  4. For conversion events, add additional tags with specific triggers (e.g., form submissions)

​
Adding LinkedIn Insight Tag

  1. Tags > New > Tag Type: Custom HTML
  2. Paste the LinkedIn Insight Tag snippet
  3. Trigger: All Pages

​
Adding Hotjar / Microsoft Clarity

  1. Tags > New > Tag Type: Custom HTML
  2. Paste the respective tracking snippet
  3. Trigger: All Pages

​
DataLayer Events

GTM reads from window.dataLayer. To push custom events from Reflex:

​
From Client-Side JavaScript

Push events via inline scripts or rx.script: 
rx.script("""
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    'event': 'sign_up',
    'method': 'clerk'
});
""")

​
Common DataLayer Events to Configure

EventWhenGTM Trigger
page_viewEvery page loadBuilt-in (automatic)
sign_upUser creates accountCustom Event trigger
purchaseStripe checkout completesCustom Event trigger
form_submitContact/lead form submittedForm Submission trigger

​
Relationship to Other Analytics

SystemPurposeConfig Source
GTMTag management containerconfig/head/default.yaml (analytics)
Google Analytics (GA4)Page views, sessions, user behaviorconfig/head/default.yaml (analytics)
Apollo.ioWebsite visitor identificationconfig/head/default.yaml (inline_scripts)
FacebookDomain verificationconfig/head/default.yaml (verification)
PostHogProduct analytics, feature flagsconfig/integrations/default.yaml
GA4 is loaded independently via build_google_analytics_scripts() and does not go through GTM. If you want GA4 managed by GTM instead, disable the standalone GA4 config and add a GA4 tag in GTM.

​
Verification

​
Browser DevTools

  1. Open any page, right-click > Inspect > Elements
  2. Search for GTM-58ZTSM22 — should appear in both <head> and <body>
  3. Network tab: look for a request to googletagmanager.com/gtm.js

​
GTM Tag Assistant

  1. Install Tag Assistant
  2. Enter the site URL
  3. Verify the container loads and tags fire correctly

​
GTM Preview Mode

  1. In GTM Dashboard, click Preview
  2. Enter the site URL
  3. Browse the site — Tag Assistant shows which tags fired on each page

​
Files Reference

FileRole
syntropy_journals/app/config/head/default.yamlGTM enabled/container_id config
syntropy_journals/app/config/schemas/head.pyGoogleTagManagerConfig dataclass
syntropy_journals/app/utils/head_components.pybuild_google_tag_manager_scripts(), build_gtm_noscript()
syntropy_journals/syntropy_journals.pyWires GTM into rx.App