Tracking advertising impressions in GA4

👋 F ind out how to track ad impressions in GA4 for ads shown on your website.

To track ad impressions in Google Analytics 4:

1. Use the Intersection Observer API in JavaScript to detect when your ad is visible in the display window.

2. Set up a GA4 event tag that triggers the event ad_impression. Transmit additional details such as ad ID or name as event parameters.

3. Trigger this tag on the ad_view.

4. Use the Preview Mode of GTM to verify that the event ad_view is triggered when the ad appears. Once confirmed, publish your changes.

Example of Js code :

// Sélection de l'élément publicitaire
const adElement = document.querySelector('#ad-element-id');

// Rappel de l'observateur d'intersection
const callback = (entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // La publicité est visible
      // Envoyez un événement à la dataLayer
      dataLayer.push({
        'event': 'ad_view',
        'adInfo': {
          // ... informations spécifiques à la publicité
        }
      });
    }
  });
};

// Création de l'observateur
const observer = new IntersectionObserver(callback);

// Observation de l'élément publicitaire
observer.observe(adElement);

ℹ️ First replace #ad-element-id by your advertising ID. Next, initialize the intersection observer with the callback function as argument. Finally, call observe() on the intersection observer with the advertising element as argument.

This code creates an intersection observer to detect when the advertising element enters the display window. When this happens, the callback function is called and an event is sent to the dataLayer. This event is used to track ad views and other indicators.

Here's an example of how to use the code :

// Sélection de l'élément publicitaire
const adElement = document.querySelector('#myAd');

// Rappel de l'observateur d'intersection
const callback = (entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // La publicité est visible
      // Envoyez un événement à la dataLayer
      dataLayer.push({
        'event': 'ad_view',
        'adInfo': {
          'adId': adElement.id
        }
      });
    }
  });
};

// Création de l'observateur
const observer = new IntersectionObserver(callback);

// Observation de l'élément publicitaire
observer.observe(adElement);