GTM Lab - Google Tag Manager Testing Suite | adtechsanto.fun 
AS

GTM Lab — simple testing pad

Push an event, see the dataLayer change, and copy the snippet.

How to use this lab:

1) Click a button to fire an event. 2) Watch the live log update. 3) Copy the code. 4) Check DevTools to confirm the tag fired.

Why use dataLayer?

It keeps page code simple. Push one clean object; GTM reads and routes it.

Try it: click “Send Custom Event” and watch the log.

Common break?

Missing event name or wrong key spelling. Keep names short: signup, purchase.

Try it: flip a consent toggle and see the payload.

Reference links

GTM Dev Guide, IMA video events, Consent Mode. Open the docs before you debug.

GTM Dev Guide Template Gallery IMA Video Events Consent Mode
0
Total Events
0
Successful
0
Errors
0
Custom Events

📊 Data Layer Management

Push custom data to GTM dataLayer with various formats

💡 What is dataLayer?

The dataLayer is a JavaScript array that stores information about your website. GTM reads this data to trigger tags and send events to analytics tools like Google Analytics.

// Example: Basic dataLayer push window.dataLayer.push({ 'event': 'button_click', 'category': 'engagement', 'action': 'clicked_cta' });

📝 Form Events

Test form interactions and submissions

💡 Why track forms?

Form tracking helps you understand user behavior: how many people start filling forms, where they drop off, and which forms convert best. Essential for improving lead generation!

// Track when user submits a form window.dataLayer.push({ 'event': 'form_submit', 'form_id': 'contact_form', 'form_name': 'Contact Us' });

🖱️ Click & Interaction Events

Track various click and user interaction events

💡 Click tracking basics

Every button, link, or element click can be tracked. Use this to measure CTA performance, navigation patterns, and user engagement with different page elements.

// Track button clicks window.dataLayer.push({ 'event': 'click', 'click_type': 'CTA Button', 'click_text': 'Buy Now' });
Hover over me to track mouse events

🛒 Enhanced E-commerce GA4

Test complete e-commerce funnel tracking

💡 E-commerce tracking explained

Track the entire shopping journey: product views → add to cart → checkout → purchase. This data helps optimize your sales funnel and understand customer behavior at each step.

// Track when user views a product window.dataLayer.push({ 'event': 'view_item', 'ecommerce': { 'items': [{ 'item_name': 'Product Name', 'price': 99.99 }] } });
Product
Cart
Checkout
Purchase

🎥 Video & Media Tracking

Track video player interactions and media events

💡 Video tracking importance

Understand how users engage with your video content. Track who watches, when they stop, and if they complete videos. Great for content optimization and engagement analysis!

// Track video play event window.dataLayer.push({ 'event': 'video_play', 'video_title': 'Tutorial Video', 'video_duration': 300 });
▶️
Sample Video Player
Ready to play

📜 Scroll Depth Tracking

Monitor scroll depth and engagement milestones

💡 Why track scrolling?

Scroll tracking reveals how far users read your content. If 80% drop off at 25% scroll, your content might need improvement. Essential for blog posts and long-form content!

// Track 50% scroll depth window.dataLayer.push({ 'event': 'scroll_depth', 'scroll_depth': 50, 'page_url': window.location.href });

Scroll this container to trigger scroll depth events...

25% Milestone

50% Milestone

75% Milestone

100% Bottom Reached!

âš¡ User Engagement

Track various user engagement metrics

💡 Engagement metrics explained

These events measure how users interact with your site: searches, shares, sign-ups, logins. Higher engagement = more interested users = better conversion rates!

// Track search action window.dataLayer.push({ 'event': 'search', 'search_term': 'running shoes', 'search_results': 42 });

❌ Error & Exception Tracking

Test JavaScript error handling and tracking

💡 Why track errors?

Errors can break user experience. By tracking them, you'll know what's broken, how often it happens, and which users are affected. Fix issues before they hurt conversions!

// Track JavaScript errors window.dataLayer.push({ 'event': 'exception', 'description': 'Function not found', 'fatal': false });

📐 Custom Dimensions & Metrics

Add custom dimensions and metrics to events

💡 Custom dimensions explained

Add extra data to your events! Like user type (new/returning), membership level, or any custom data. This helps segment reports: "How do premium users behave vs free users?"

// Set user properties window.dataLayer.push({ 'event': 'set_user_properties', 'user_id': 'user_123', 'user_type': 'premium' });

🌐 Cross-Domain Tracking Beta

Test cross-domain tracking parameters

💡 Cross-domain tracking

Have multiple websites? Track users as they move between them (like shop.site.com to checkout.site.com). This keeps their journey as one session instead of two separate visits.

// Track outbound link window.dataLayer.push({ 'event': 'outbound_link', 'link_url': 'https://other-site.com', 'link_domain': 'other-site.com' });

🔒 Privacy & Consent Management

Test consent modes and privacy settings

💡 Privacy compliance

GDPR, CCPA and other laws require user consent before tracking. GTM consent mode lets you respect user choices while still measuring conversions (in a privacy-safe way).

// Update consent settings window.dataLayer.push({ 'event': 'consent_update', 'analytics_storage': 'granted', 'ad_storage': 'denied' });

🧬 A/B Testing & Experiments

Track experiment variations and conversions

💡 A/B testing basics

Test different versions of your page (A vs B) to see which performs better. Track which variant users see and if they convert. Data-driven decision making at its best!

// Track experiment exposure window.dataLayer.push({ 'event': 'experiment_impression', 'experiment_id': 'homepage_test_001', 'variant': 'variant_b' });

📖 Quick Implementation Guide

1️⃣

Install GTM

Add GTM container code to your website's <head> section. Get the code from tagmanager.google.com

2️⃣

Add dataLayer Code

Copy the code examples above and add them to your website where you want to track events (buttons, forms, etc.)

3️⃣

Create GTM Triggers

In GTM, create a Custom Event trigger matching your event name (e.g., "form_submit")

4️⃣

Add GA4 Tags

Create GA4 Event tags, connect them to your triggers, and publish your GTM container. Done!

🎯 Pro Tips for Students:

  • Always test in GTM Preview mode before publishing
  • Use descriptive event names (e.g., "newsletter_signup" not "event1")
  • Check the Debug Console below after each button click
  • Open browser DevTools (F12) → Console tab to see raw dataLayer
  • Start simple: track 1-2 events first, then add more
  • Document what each event tracks for your team

🔍 GTM Debug Console

📺 What you're seeing below:

Every time you click a button above, the event appears here instantly. This is exactly what GTM sees! The JSON code shows all the data being sent to Google Analytics.

📚 Learning Resources & Next Steps

🎓 Beginner Level

  • Learn what each event type does by clicking buttons
  • Copy code examples and try them on a test website
  • Create a free GTM account and practice
  • Watch the Debug Console to understand dataLayer

🚀 Intermediate Level

  • Implement form tracking on your website
  • Set up e-commerce tracking for online stores
  • Create custom triggers in GTM for specific events
  • Build conversion funnels in Google Analytics

💎 Advanced Level

  • Set up cross-domain tracking for multiple sites
  • Implement consent mode for GDPR compliance
  • Create custom JavaScript variables in GTM
  • Build A/B test tracking and attribution models

💪 Practice Makes Perfect!

Spend 15 minutes daily testing these events. Within a week, you'll understand GTM better than most marketers. Click every button, read every code example, and try implementing on your own projects!