How to Track Pop-up Events with Google Tag Manager (GTM) and GA4

Vitals dispatches custom JavaScript events when visitors interact with your Pop-ups. You can use these events to send tracking data to Google Tag Manager (GTM) and Google Analytics 4 (GA4).

Available Events

Each event includes the following data in event.detail :

Step 1 — Add Custom JavaScript in Vitals

1. Go to Vitals → Preferences
2. Scroll to the Custom JS Last field
3. Paste the following code:

(function() {
  window.dataLayer = window.dataLayer || [];

  document.addEventListener('vitals:popup:view', function(e) {
    window.dataLayer.push({
      event: 'vitals_popup_view',
      vitals_popup_id: e.detail.popupId,
      vitals_popup_type: e.detail.popupType
    });
  });

  document.addEventListener('vitals:popup:close', function(e) {
    window.dataLayer.push({
      event: 'vitals_popup_close',
      vitals_popup_id: e.detail.popupId,
      vitals_popup_type: e.detail.popupType
    });
  });

  document.addEventListener('vitals:popup:submit', function(e) {
    window.dataLayer.push({
      event: 'vitals_popup_submit',
      vitals_popup_id: e.detail.popupId,
      vitals_popup_type: e.detail.popupType
    });
  });
})();

4. Click Save

Tip: You can remove any of the three listeners if you only need to track specific interactions.

Step 2 — Create Triggers in GTM

1. Open Google Tag Manager
2. Go to Triggers → New
3. Choose trigger type: Custom Event
4. Set Event name to one of:
   • vitals_popup_view  — to track popup impressions
   • vitals_popup_close  — to track popup dismissals
   • vitals_popup_submit  — to track form submissions
5. Click Save

Repeat for each event you want to track.

Step 3 — Create GA4 Event Tags

1. In GTM, go to Tags → New
2. Choose tag type: Google Analytics: GA4 Event
3. Select your GA4 Configuration tag
4. Set an Event name (e.g. popup_submit )
5. (Optional) Add Event Parameters:
   • Parameter name: popup_id  → Value: {{DLV - vitals_popup_id}}
   • Parameter name: popup_type  → Value: {{DLV - vitals_popup_type}}
6. Under Triggering, select the trigger you created in Step 2
7. Click Save, then Publish your GTM container

Note: For the optional parameters in step 5, create a Data Layer Variable in GTM for each: go to Variables → New → Data Layer Variable, and set the name to vitals_popup_id  or vitals_popup_type .

Verifying It Works

1. Open your store in a browser
2. Enable GTM Preview mode (click Preview in your GTM workspace)
3. Trigger a popup on your store
4. In the GTM debug panel, you should see the corresponding vitals_popup_*  events appear
5. Click on the event to verify that vitals_popup_id  and vitals_popup_type  are populated correctly