0%

GTM Tracking Demonstrations

Live examples for tracking Custom Events, Page Views, Outbound Clicks, and Scroll Depth.

Demo 1: Custom Event

Submitting this form pushes a form_submission_success event to the dataLayer.

Demo 2: Thank You Page

Submitting this form will take you to a simulated "Thank You" page, which you can track as a page view.

Call Us: 02-123-4567 Add us on LINE Visit AngaMastery.co.th

GTM Setup Instructions

Part 1: Track Custom Event

  1. Trigger: Type: Custom Event, Event Name: form_submission_success.
  2. Tag: Type: GA4 Event, Event Name: generate_lead. Attach trigger from above.

Part 2: Track Thank You Page

  1. Trigger: Type: Page View, Fire on: Page Path contains /thankyou.html.
  2. Tag: Type: GA4 Event, Event Name: thank_you_view. Attach trigger from above.

Part 3: Track Outbound Clicks

  1. Variables: Go to Variables > Built-In Variables > Configure and enable Click URL.
  2. Trigger: Create a new Trigger.
    • Type: Click - Just Links
    • This trigger fires on: Some Link Clicks
    • Fire when: Click URL does not contain your website's domain (e.g., `your-site.vercel.app`).
    • Name it "Click - Outbound Link" and Save.
  3. Tag: Create a new GA4 Event Tag.
    • Event Name: outbound_click
    • Event Parameters: add `link_url` with a value of `{{Click URL}}`.
    • Attach your new "Click - Outbound Link" trigger.

Part 4: Track Scroll Depth

  1. Variables: Go to Variables > Built-In Variables > Configure and enable Scroll Depth Threshold.
  2. Trigger: Create a new Trigger.
    • Type: Scroll Depth
    • Select Vertical Scroll Depths.
    • Percentages: Enter `25, 50, 75, 90`.
    • Name it "Scroll - Depth Tracking" and Save.
  3. Tag: Create a new GA4 Event Tag.
    • Event Name: scroll_depth
    • Event Parameters: add `scroll_percent` with a value of `{{Scroll Depth Threshold}}`.
    • Attach your new "Scroll - Depth Tracking" trigger.

More Content for Scrolling

This section is added simply to make the page longer, allowing you to test the scroll depth tracking functionality. In a real-world scenario, this would be your actual page content, such as blog posts, product details, or company information.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.