Analytics How-to Popup

How To Create a Custom Analysis Funnel for Your Popup Conversions

Google Analytics 4 conversion funnel for popups

1. Create the popup

For this demonstration, I wanted a popup to promote a free Bootstrap 4 website template that I developed.

Here’s the setup:

  • I created a Popup Maker Time Delay / Auto Open popup with a 1.5-second delay.
  • I used a pre-defined Popup Maker theme for styling and selected the bottom left preset display location.
  • I targeted my popup to display only on the home page and my shop page.
  • I added a cookie so that it will only show 1 time an hour for each visitor.
  • I put a link inside the popup’s content. The link goes to the product page for a “made-up” product I’m “selling” to promote my template.

Here’s a screen capture of the popup.

2. Send a popup impression event to GA4

Because I know the popup’s HTML ID attribute (pum-1196) and Popup Maker has a handy pumAfterOpen event, I can set up a simple jQuery listener for the impressions.

The code below sends a custom popup_impression event to my GA4 property using the gtag.js API every time my Template Aurora swag popup gets rendered. Note: I’m using the human-friendly popup title for the popup_id parameter.

  // 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",       
}); // jQuery

Copy/paste/tweak the above snippet to your WordPress site. Add it to the footer area of your page.

3. Send a popup conversion event to GA4

Now for the conversion. I want to record a custom popup conversion event every time someone clicks on the link in the popup.

The jQuery code below does just that.

  // Send a popup conversion event.       
  $("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

Copy/paste/tweak the above snippet to your WordPress site. Add it to the footer area of your page.

4 Create the funnel

First, you need to define event-scoped custom definitions for the popup_impression and popup_conversion custom events.

Head over to your Google Analytics 4 property and then follow Google’s help guide for creating custom definitions.

Once you’ve set up your custom definitions, navigate to Explore > Explorations (formerly Analysis hub).

Select the Funnel exploration template. I made a closed funnel because I’m only interested in tracking my popup conversions that start with an impression first and end with the purchase.

Make step 1 the popup impression event for your popup_id.

Make step 2 the popup conversion event for your popup_id.

Make step 3 the purchase conversion event you want to tie to your popup.

5 View the results

Wait 48 hours after your first organic popup activity or after your test runs.

After 48 hours, head over to the funnel exploration you set up earlier. If everything goes well, you should see something like this.

Google Analytics 4 Exploration funnel for Popup Maker popup conversions.
Since I’m also tracking WordPress user IDs, I added a custom user_id dimension to my funnel.

Give it a try

Head over to this site’s homepage to give it a try. Run the Google Analytics debugger or Omnibug to see the events getting sent over to GA4.

By mark

photographer ∙ writer ∙ web developer ∙ bali indonesia

Leave a Reply