Quick Start: WhatsApp Tracking Configuration

5-Minute Setup for Google Tag Manager & Analytics

What Changed

✅ HTML: All id="lead_whatsapp" → data-whatsapp-link
✅ JavaScript: Updated selector to [data-whatsapp-link]
✅ Tracking: Now uses GTM dataLayer for better control
✅ All functionality: Remains exactly the same

GTM Setup (Copy-Paste Ready)

1️⃣ Create Trigger in GTM

Name: WhatsApp Link Click
Type: Click - All Elements
Condition: Click Element | matches CSS selector | [data-whatsapp-link]

2️⃣ Create GA4 Event Tag

Name: GA4 - WhatsApp Contact
Tag Type: Google Analytics: GA4 Event
Measurement ID: [Your GA4 ID]
Event Name: whatsapp_contact

Add Event Parameters:
  - event_category: 
  - event_label: 
  - page_path: 

Trigger: WhatsApp Link Click

3️⃣ Create Data Layer Variables (Optional)

Create for each:
- WhatsApp Event Category (Data Layer: event_category)
- WhatsApp Event Label (Data Layer: event_label)
- WhatsApp Page Path (Data Layer: page_path)
- WhatsApp Page Title (Data Layer: page_title)

4️⃣ Publish & Test

Click Preview
Click WhatsApp button on your site
Verify event fires in GTM panel
Submit → Publish

GA4 Setup

In Analytics

Go to Admin → Events
Click Create Event
Event name: whatsapp_contact
Toggle Conversion = ON
Save

View Reports

Realtime: Reports → Realtime → Events
Full Reports: Reports → Engagement → Events → whatsapp_contact

Testing Checklist

Click WhatsApp button in browser
Open DevTools (F12) → Console
Run: console.log(dataLayer[dataLayer.length-1])
Should see: {event: 'whatsapp_contact', ...}
Check GTM preview panel shows event fired
Check GA4 realtime reports after 1-2 minutes

Data Being Sent

{
  event: 'whatsapp_contact',
  event_category: 'engagement',
  event_label: 'whatsapp_link_click',
  page_path: '/servicios/',
  page_title: 'Servicios - Since Marketing',
  timestamp: '2025-12-12T14:30:45.123Z'
}

Troubleshooting

Problem	Solution
Events not firing	Check trigger condition: `[data-whatsapp-link]` exact match
GA4 shows 0 events	Wait 24h for data to process; check realtime first
Wrong data showing	Verify variable names match dataLayer keys exactly
Page title missing	Ensure GA4 tag is configured with all parameters

Advanced: Track Button Location

Add this to your HTML:

<!-- Header button -->
<a href="#" data-whatsapp-link data-whatsapp-source="header">Contact</a>

<!-- Footer button -->
<a href="#" data-whatsapp-link data-whatsapp-source="footer">Contact</a>

<!-- CTA button -->
<a href="#" data-whatsapp-link data-whatsapp-source="cta">Contact</a>

Then in GTM:

Create variable: WhatsApp Source (Data Layer: whatsapp_source)
Add event parameter: whatsapp_source:

Key Files

HTML changes: 7 files updated (button.html, footer.html, default.html, blog/index.html, etc.)
JavaScript: js/code.js (lines 158, 576-595)
Setup guide: GTM_ANALYTICS_SETUP_GUIDE.md (detailed 30-step guide)
Changes summary: REFACTORING_SUMMARY.md (technical details)

Event Name Reference

Platform	Event Name
GTM	`whatsapp_contact`
GA4	`whatsapp_contact`
JavaScript	`whatsapp_contact`
Conversion	Yes ✅
Category	`engagement`
Label	`whatsapp_link_click`

CSS Selector Reference

The new selector [data-whatsapp-link] matches:

// All of these work now:
document.querySelectorAll('[data-whatsapp-link]')

// Get specific ones:
document.querySelector('[data-whatsapp-link]')           // First one
document.querySelectorAll('[data-whatsapp-link]')[0]     // Same thing

Support

Full guide: See GTM_ANALYTICS_SETUP_GUIDE.md
Changes made: See REFACTORING_SUMMARY.md
GTM help: https://support.google.com/tagmanager
GA4 help: https://support.google.com/analytics

Status: ✅ Ready to Deploy
Implementation Time: ~5 minutes
Testing Time: ~10 minutes
Data visible in GA4: 24 hours