ga4-promotion-tracking

GA4 Promotion Tracking Guide

Complete guide for tracking internal promotions, coupon codes, and sales campaigns in Google Analytics 4.

DataLayer Implementation

view_promotion Event

VIEW_PROMOTION EVENT
====================

WHEN: Promotion banner/element enters viewport

DATALAYER CODE:
-----------------------------------------------------------------
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "view_promotion",
  ecommerce: {
    items: [{
      promotion_id: "summer_sale_2024",     // REQUIRED
      promotion_name: "Summer Sale 2024",   // REQUIRED
      creative_name: "hero_banner_beach",   // Recommended
      creative_slot: "homepage_hero",       // Recommended
      location_id: "homepage"               // Optional
    }]
  }
});
-----------------------------------------------------------------

VIEWPORT TRACKING IMPLEMENTATION:
---------------------------------
// With Intersection Observer (recommended)
const promotionBanner = document.querySelector('.promo-banner');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      dataLayer.push({ ecommerce: null });
      dataLayer.push({
        event: "view_promotion",
        ecommerce: {
          items: [{
            promotion_id: promotionBanner.dataset.promoId,
            promotion_name: promotionBanner.dataset.promoName,
            creative_name: promotionBanner.dataset.creative,
            creative_slot: promotionBanner.dataset.slot
          }]
        }
      });
      observer.unobserve(entry.target); // Track only once
    }
  });
}, { threshold: 0.5 }); // 50% visible

observer.observe(promotionBanner);

HTML DATA ATTRIBUTES:
---------------------
<div class="promo-banner"
     data-promo-id="summer_sale_2024"
     data-promo-name="Summer Sale 2024"
     data-creative="hero_banner_beach"
     data-slot="homepage_hero">
  <!-- Banner content -->
</div>

select_promotion Event

SELECT_PROMOTION EVENT
======================

WHEN: User clicks on promotion element

DATALAYER CODE:
-----------------------------------------------------------------
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "select_promotion",
  ecommerce: {
    items: [{
      promotion_id: "summer_sale_2024",
      promotion_name: "Summer Sale 2024",
      creative_name: "hero_banner_beach",
      creative_slot: "homepage_hero",
      location_id: "homepage"
    }]
  }
});
-----------------------------------------------------------------

CLICK HANDLER IMPLEMENTATION:
-----------------------------
document.querySelectorAll('.promo-banner').forEach(banner => {
  banner.addEventListener('click', function() {
    dataLayer.push({ ecommerce: null });
    dataLayer.push({
      event: "select_promotion",
      ecommerce: {
        items: [{
          promotion_id: this.dataset.promoId,
          promotion_name: this.dataset.promoName,
          creative_name: this.dataset.creative,
          creative_slot: this.dataset.slot
        }]
      }
    });
  });
});