Google Tag Manager & Analytics Configuration Guide

WhatsApp Contact Tracking Setup

Overview

Your website now uses a semantic HTML approach with data attributes (data-whatsapp-link) instead of duplicate IDs for tracking WhatsApp contact points. This guide walks you through configuring Google Tag Manager (GTM) and Google Analytics to properly capture and analyze these contact interactions.

Key Changes Made:

Step-by-Step GTM Configuration

Step 1: Access Google Tag Manager

  1. Go to tagmanager.google.com
  2. Select your container (since-web)
  3. Click Workspace to enter edit mode

Step 2: Create a Custom Event Trigger

A trigger tells GTM when to fire a tag. We’ll create one for WhatsApp link clicks.

2.1 Create Trigger

  1. In the left sidebar, click Triggers
  2. Click New button
  3. Name it: WhatsApp Link Click
  4. Click on Trigger Configuration box

2.2 Configure Trigger Settings

Why this works:

  1. Save the trigger

Data layer variables capture custom information sent from your JavaScript code.

3.1 Create Variable for Event Details

  1. In the left sidebar, click Variables
  2. Click New under User-Defined Variables
  3. Name: WhatsApp Event Category
  4. Variable Type: Data Layer Variable
  5. Data Layer Variable Name: event_category
  6. Save

3.2 Create Additional Variables (Repeat for each)

Create the following variables:

These variables will automatically capture the data your JavaScript pushes:

window.dataLayer.push({
  event: 'whatsapp_contact',
  event_category: 'engagement',
  event_label: 'whatsapp_link_click',
  page_path: window.location.pathname,
  page_title: document.title,
  timestamp: new Date().toISOString()
});

Step 4: Create a Google Analytics 4 Event Tag

This tag sends the WhatsApp contact data to Google Analytics 4.

4.1 Create New Tag

  1. In the left sidebar, click Tags
  2. Click New
  3. Name: GA4 - WhatsApp Contact Event

4.2 Configure Tag Settings

  1. Click on Tag Configuration box
  2. Tag Type: Google Analytics: GA4 Event
  3. Select your Measurement ID (from your GA4 property)

4.3 Configure Event Details

  1. Event Name: whatsapp_contact
  2. Add Event Parameter:
  3. Add Event Parameter:
  4. Add Event Parameter:

4.4 Assign Trigger

  1. Click on Triggering section

  2. Select the trigger: WhatsApp Link Click

  3. Save the tag

Step 5: Create Additional Tags (Optional)

You may want to track different conversion goals:

5.1 Google Analytics 4 Conversion Tag

  1. Create new GA4 Event Tag
  2. Event Name: whatsapp_contact_conversion
  3. Use same parameters as above
  4. Trigger: WhatsApp Link Click
  5. Configure as conversion event in GA4 (see Step 7)

5.2 Google Ads Conversion Tag (If using Google Ads)

  1. Create new tag
  2. Tag Type: Google Ads Conversion Tracking
  3. Configure your Conversion ID and Label
  4. Trigger: WhatsApp Link Click

Step 6: Preview & Test Your Setup

Before publishing, always test:

6.1 Enter Preview Mode

  1. Click Preview button (top-right)
  2. Your site will load in preview mode
  3. Open Browser DevTools (F12)

6.2 Test the Trigger

  1. Click any element with data-whatsapp-link attribute
  2. In DevTools Console, you should see GTM firing
  3. Look for the whatsapp_contact event in the GTM preview panel
  4. Verify all variables are populated correctly

6.3 Check Data Layer

In DevTools Console, run:

console.log(dataLayer);

You should see an entry like:

{
  event: 'whatsapp_contact',
  event_category: 'engagement',
  event_label: 'whatsapp_link_click',
  page_path: '/servicios/',
  page_title: 'Servicios - Since',
  timestamp: '2025-12-12T...'
}
  1. Exit preview mode when satisfied

Step 7: Publish Your Container

  1. Click Submit button
  2. Add Version Name: WhatsApp Tracking Setup
  3. Add Version Description: Changed from duplicate IDs to data attributes for WhatsApp link tracking
  4. Click Publish

Configuring Google Analytics 4

Step 1: Access Your GA4 Property

  1. Go to analytics.google.com
  2. Select your property (since-web)
  3. Go to Admin (bottom left)

Step 2: Mark as Conversion Event

To track WhatsApp contacts as conversions:

  1. Left Menu: Admin → Events
  2. Click Create event button
  3. Event name: whatsapp_contact (must match GTM event name)
  4. Set Conversion toggle to ON
  5. Save

Step 3: Create Custom Reports

To visualize WhatsApp traffic:

  1. Go to Reports → Engagement → Events
  2. Look for whatsapp_contact events
  3. Click event name to see details:

Step 4: Set Up Conversion Funnel (Optional)

  1. Go to Admin → Conversions
  2. Create conversion event for whatsapp_contact
  3. Track from this point on

Troubleshooting

Issue: Events Not Appearing in GA4

Solution 1: Check GTM is firing

Solution 2: Verify Measurement ID

Solution 3: Check data-whatsapp-link attribute

Issue: Data Not Showing in Reports

Symptom: Events are firing but not appearing in GA4 reports

Solution:

Issue: Conversion Not Counting

Solution:

  1. Verify event was marked as conversion in GA4 Admin
  2. Allow 24 hours for data to process
  3. Check event name exactly matches (case-sensitive)

Advanced: Custom Event Mapping

If you want to track which specific link was clicked:

Modify your HTML to include context:

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

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

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

Option 2: Create GTM Variables for Each Source

In GTM:

  1. Create Variable: WhatsApp Source
  2. Type: Data Layer Variable
  3. Data Layer Name: whatsapp_source

Option 3: Update JavaScript to Capture Source

Modify code.js:

trackWhatsAppClick(element) {
  const source = element.getAttribute('data-whatsapp-source') || 'unknown';
  
  if (window.dataLayer) {
    window.dataLayer.push({
      event: 'whatsapp_contact',
      event_category: 'engagement',
      event_label: 'whatsapp_link_click',
      whatsapp_source: source,
      page_path: window.location.pathname,
      page_title: document.title,
      timestamp: new Date().toISOString()
    });
  }
}

Key Benefits of This Setup

✅ Semantically Correct: Uses data attributes instead of duplicate IDs
✅ Scalable: Add more data attributes without changing IDs
✅ Flexible: Easy to expand tracking with additional data points
✅ Modern: Uses dataLayer push instead of gtag() only
✅ Maintainable: Clear, simple selector-based triggers
✅ Analytics-Ready: Proper event structure for GA4 analysis

Quick Reference

Component Value
HTML Selector [data-whatsapp-link]
GTM Event Name whatsapp_contact
GA4 Event Name whatsapp_contact
Event Category engagement
Event Label whatsapp_link_click
Trigger Type Click - All Elements
Trigger Condition CSS selector matches [data-whatsapp-link]

Next Steps

  1. ✅ Complete all GTM configuration steps above
  2. ✅ Test with preview mode
  3. ✅ Publish GTM container
  4. ✅ Configure GA4 conversion event
  5. ✅ Wait 24 hours for data to appear in GA4
  6. ✅ Review reports in GA4 dashboard
  7. ✅ (Optional) Implement advanced tracking with data attributes

Support Resources

Created: December 12, 2025
Implementation: WhatsApp Contact Tracking Refactor
Status: Ready for deployment