Framer has become a popular choice for designers and marketers building high-converting websites without code. But a beautiful website means nothing if you cannot track what visitors do.

Google Tag Manager gives you the flexibility to add analytics, conversion tracking, and marketing pixels without touching code every time. Integrating GTM with Framer unlocks proper tracking for your campaigns.

This guide walks through the complete setup process, from basic installation to advanced event tracking.

Why Use Google Tag Manager with Framer

Framer has built-in analytics options, but they have limitations. Google Tag Manager provides:

Flexibility

Add Google Ads, GA4, Meta Pixel, LinkedIn, TikTok, and any other tracking platform through a single container. No need to add each script separately.

Control

Modify tracking without republishing your Framer site. Change triggers, add events, and fix issues directly in GTM.

Advanced Tracking

Track button clicks, form submissions, scroll depth, video engagement, and custom events. Built-in Framer analytics cannot match this depth.

Future-Proofing

When you add new marketing platforms, just add a tag in GTM. Your Framer site stays clean.

Prerequisites

Before starting, ensure you have:

If you do not have a GTM container yet:

  1. Go to tagmanager.google.com
  2. Create an account
  3. Create a container for “Web”
  4. Copy your container ID

Method 1: Adding GTM via Framer’s Custom Code Settings

This is the recommended method for most users.

Step 1: Access Site Settings

  1. Open your Framer project
  2. Click the gear icon to open Site Settings
  3. Navigate to the “General” section
  4. Find “Custom Code”

Step 2: Add the GTM Head Code

In the “Start of tag” section, paste the first part of the GTM snippet:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Replace GTM-XXXXXXX with your actual container ID.

Step 3: Add the GTM Body Code

In the “Start of tag” section, paste the noscript fallback:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Again, replace GTM-XXXXXXX with your container ID.

Step 4: Publish Your Site

Save the settings and publish your Framer site. GTM is now installed.

Step 5: Verify Installation

  1. Open GTM and click “Preview”
  2. Enter your Framer site URL
  3. The Tag Assistant should connect
  4. You should see “Container Found” confirmation

Method 2: Adding GTM via Code Component

If you need more control or want to conditionally load GTM, use a code component.

Step 1: Create a Code Component

  1. In Framer, go to Assets → Code
  2. Click “New” to create a new code component
  3. Name it “GTM” or “Google Tag Manager”

Step 2: Add the GTM Code

Replace the default code with:

import { useEffect } from "react"

export default function GTM() {
    useEffect(() => {
        // Initialize dataLayer
        window.dataLayer = window.dataLayer || []
        
        // GTM Script
        const script = document.createElement("script")
        script.innerHTML = `
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXXX');
        `
        document.head.appendChild(script)
        
        // GTM noscript iframe
        const noscript = document.createElement("noscript")
        const iframe = document.createElement("iframe")
        iframe.src = "https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
        iframe.height = "0"
        iframe.width = "0"
        iframe.style.display = "none"
        iframe.style.visibility = "hidden"
        noscript.appendChild(iframe)
        document.body.insertBefore(noscript, document.body.firstChild)
    }, [])
    
    return null
}

Replace GTM-XXXXXXX with your container ID in both places.

Step 3: Place the Component

Drag the GTM component onto your page. Place it anywhere - it renders nothing visible.

For site-wide tracking, add it to a component that appears on every page, like a header or footer.

Setting Up Basic Page View Tracking

With GTM installed, set up GA4 page view tracking.

Step 1: Create a GA4 Configuration Tag

  1. In GTM, go to Tags → New
  2. Name it “GA4 - Configuration”
  3. Select “Google Analytics: GA4 Configuration”
  4. Enter your GA4 Measurement ID (format: G-XXXXXXXXXX)
  5. Set trigger to “All Pages”
  6. Save

Step 2: Handle Framer’s Single-Page Architecture

Framer sites often use client-side navigation, meaning traditional page views may not fire on every navigation.

Create a History Change trigger:

  1. Go to Triggers → New
  2. Name it “History Change”
  3. Select “History Change” as trigger type
  4. Save

Add this trigger to your GA4 Configuration tag to capture route changes.

Step 3: Test Page Views

  1. Open GTM Preview Mode
  2. Navigate your Framer site
  3. Confirm GA4 Configuration fires on initial load
  4. Click internal links and confirm History Change events fire

Tracking Button Clicks

Framer makes it easy to create buttons, but tracking clicks requires GTM configuration.

Step 1: Enable Click Variables

  1. In GTM, go to Variables → Configure
  2. Enable all Click variables:
    • Click Element
    • Click Classes
    • Click ID
    • Click Target
    • Click URL
    • Click Text

Step 2: Create a Click Trigger

  1. Go to Triggers → New
  2. Name it “Button Click - CTA”
  3. Select “Click - All Elements”
  4. Choose “Some Clicks”
  5. Set conditions based on how you identify the button:
    • Click Text contains “Get Started”
    • Click Classes contains “cta-button”
    • Click URL contains “/signup”

Step 3: Create the Event Tag

  1. Go to Tags → New
  2. Name it “GA4 Event - CTA Click”
  3. Select “Google Analytics: GA4 Event”
  4. Configuration Tag: Select your GA4 Configuration
  5. Event Name: “cta_click”
  6. Add parameters as needed (button_text, page_path)
  7. Set trigger to your button click trigger
  8. Save

Step 4: Add Identifiable Classes in Framer

To make buttons easier to target:

  1. Select the button in Framer
  2. Open the properties panel
  3. Scroll to “HTML” or “Code” section
  4. Add a custom class name (e.g., “track-cta”)

Now your GTM trigger can target Click Classes contains track-cta.

Tracking Form Submissions

Framer forms require specific handling for submission tracking.

Method 1: Native Framer Forms

If using Framer’s built-in form component:

  1. Framer forms submit via AJAX
  2. The page does not reload
  3. Track the submit button click instead

Create a trigger:

Or track form submission success by monitoring DOM changes after submission.

Method 2: Third-Party Form Embeds

If embedding Typeform, Tally, HubSpot, or similar:

Most embed forms support their own conversion tracking. Configure tracking within the form platform and use their GTM integrations.

For basic submission tracking:

  1. Many forms redirect to a thank-you page after submission
  2. Create a Page View trigger for the thank-you URL
  3. Fire your conversion tag on that trigger

Method 3: Custom Form Handling with Data Layer

For advanced tracking, push events to the data layer on form submission:

Create a code component that wraps your form logic:

import { useEffect } from "react"

export default function FormTracker() {
    useEffect(() => {
        const form = document.querySelector("form")
        
        if (form) {
            form.addEventListener("submit", function(e) {
                window.dataLayer = window.dataLayer || []
                window.dataLayer.push({
                    event: "form_submit",
                    form_name: "contact_form",
                    form_location: window.location.pathname
                })
            })
        }
    }, [])
    
    return null
}

In GTM, create a Custom Event trigger for “form_submit”.

Tracking Scroll Depth

Monitor how far users scroll on your Framer pages.

Step 1: Enable Scroll Depth Variables

  1. In GTM, go to Variables → Configure
  2. Enable:
    • Scroll Depth Threshold
    • Scroll Depth Units
    • Scroll Direction

Step 2: Create Scroll Depth Trigger

  1. Go to Triggers → New
  2. Name it “Scroll Depth - 50%”
  3. Select “Scroll Depth”
  4. Choose “Vertical Scroll Depths”
  5. Select “Percentages” and enter: 25, 50, 75, 90
  6. Save

Step 3: Create the Event Tag

  1. Go to Tags → New
  2. Name it “GA4 Event - Scroll Depth”
  3. Event Name: “scroll”
  4. Parameters:
    • percent_scrolled: {{Scroll Depth Threshold}}
    • page_path: {{Page Path}}
  5. Set trigger to your Scroll Depth trigger
  6. Save

Setting Up Google Ads Conversion Tracking

Track conversions from your Google Ads campaigns.

Step 1: Create the Conversion in Google Ads

  1. In Google Ads, go to Goals → Conversions → Summary
  2. Click “New conversion action”
  3. Select “Website”
  4. Choose “Manual” setup
  5. Configure your conversion settings
  6. Copy the Conversion ID and Conversion Label

Step 2: Create the Conversion Tag in GTM

  1. In GTM, go to Tags → New
  2. Name it “Google Ads - Lead Conversion”
  3. Select “Google Ads Conversion Tracking”
  4. Enter Conversion ID and Conversion Label
  5. Set trigger to your form submission or thank-you page trigger
  6. Save

Step 3: Add Conversion Linker

Ensure accurate attribution:

  1. Go to Tags → New
  2. Name it “Conversion Linker”
  3. Select “Conversion Linker”
  4. Set trigger to “All Pages”
  5. Save

This tag ensures click IDs persist across page navigations.

Implementing the Data Layer in Framer

For advanced tracking, implement a data layer that populates on each page.

Create a Data Layer Component

import { useEffect } from "react"

export default function DataLayer({ pageType, pageName }) {
    useEffect(() => {
        window.dataLayer = window.dataLayer || []
        window.dataLayer.push({
            event: "page_data",
            page_type: pageType || "general",
            page_name: pageName || document.title,
            page_path: window.location.pathname
        })
    }, [pageType, pageName])
    
    return null
}

Add this component to each page template, passing relevant properties:

Use Data Layer Variables in GTM

  1. Create Data Layer Variables for page_type and page_name
  2. Use these variables in your tag configurations
  3. Segment analytics by page type

Tracking Framer CMS Collections

If using Framer’s CMS for blog posts or dynamic content:

Track Content Views

Push content metadata to the data layer:

import { useEffect } from "react"

export default function ContentTracker({ title, category, author, publishDate }) {
    useEffect(() => {
        window.dataLayer = window.dataLayer || []
        window.dataLayer.push({
            event: "content_view",
            content_title: title,
            content_category: category,
            content_author: author,
            publish_date: publishDate
        })
    }, [title, category, author, publishDate])
    
    return null
}

Create Content-Specific Audiences

Use this data to build audiences:

Common Issues and Fixes

GTM Not Firing on Route Changes

Framer uses client-side navigation. Add History Change triggers to capture navigation events.

Click Tracking Not Working

Framer components may have overlay elements. Use CSS Selector matching or check the actual click target in Preview Mode.

Forms Not Tracking

AJAX form submissions do not reload the page. Track button clicks or implement data layer events on submission callbacks.

Duplicate Page Views

If using both Page View and History Change triggers, you may double-count. Use either a single combined trigger or exclude initial page load from History Change.

Preview Mode Not Connecting

Framer’s published URL may differ from preview. Test on the actual published site URL.

Testing Checklist

Before going live, verify:

Use GTM Preview Mode and GA4 DebugView to confirm data flows correctly.

Key Takeaway

Integrating Google Tag Manager with Framer unlocks proper tracking for your marketing campaigns. The setup requires attention to Framer’s single-page architecture and component-based structure.

Install GTM via Site Settings for simplicity, or use code components for more control. Handle client-side navigation with History Change triggers. Track buttons, forms, and scrolling to understand user behavior.

With GTM properly integrated, your Framer site transforms from a beautiful design into a measurable marketing asset.

Related Posts

How to Set Up Call Tracking with Google Ads and Google Tag Manager

12 min read

Google AdsCall TrackingGoogle Tag ManagerConversion TrackingPhone Calls

Why Your Booking Software Must Work with Google Tag Manager: A Guide to Long-Term Marketing Success

12 min read

Google Tag ManagerBooking SoftwareConversion TrackingPaid AdvertisingData Layer

How to Audit an Existing Google Tag Manager Setup

8 min read

Google Tag ManagerGTM AuditConversion TrackingGTM Intro Series
Adnan Agic

Adnan Agic

Google Ads Strategist & Technical Marketing Expert with 5+ years experience managing $10M+ in ad spend across 100+ accounts.

Need Help With Your Google Ads?

I help e-commerce brands scale profitably with data-driven PPC strategies.

Get In Touch
Back to Blog