Popup Maker: Send a popup impression and conversion to GA4 using the gtag.js API

popup-maker-send-impression-conversion-to-ga4-all-popups.js

/** 
 * Generic version to send impresions for all popups. 
 * I.e., no harcoded values. 
 */
jQuery(document).ready(function($){
  // Let's send popup impressions to GA4.
  $("[id^='pum-']").on("pumAfterOpen", function (e) {
    console.log(`[GA4] Popup impression for popup ${$(e.target).attr("id")}.`);
    gtag("event", "popup_impression", {
      popup_id: $(e.target).data("popmake").slug,
    }); // gtag
  }); // Listener
  // Send a conversion for anything that has the popup-conversion class.
  $(".popup-conversion").click(function (e) {
	  const popupSlug = $(e.target).closest("[id^='pum-']").data("popmake").slug;
    console.log(`[GA4] Popup conversion for ${popupSlug}.`);
    gtag("event", "popup_conversion", {
      popup_id: popupSlug, 
    });
  });
}); // jQuery

popup-maker-send-impression-conversion-to-ga4.js

/**
 * Send an impression and conversion for a specific popup.
 */
jQuery(document).ready(function($){
  // Let's do a popup impression.
  $( "#pum-1196" ).on("pumAfterOpen", function () { // Change to your Popup ID selector.
    console.log("[GA4] Popup impression.");
    gtag("event", "popup_impression", { 
      popup_id: "New Product: Template Aurora Swag",
    });
  });
  // Send a popup conversion event for a specific product campaign.
  $("a[href$='template-aurora-swag/']").click(function() { // Change to your link selector.
    console.log("[GA4] Popup conversion.");
    gtag("event", "popup_conversion", { 
      popup_id: "New Product: Template Aurora Swag",
    });	
  });
}); // jQuery