How to Track Shopify Newsletter Popups with GA4 and GTM

Newsletter popups are common on Shopify stores. They are usually used to collect email addresses, offer a discount code, promote a first-order incentive, or push users into an email marketing flow.

From an analytics point of view, there are two basic things we may want to know:

• How many times was the popup shown?

• How many times was the popup form successfully submitted?

Once we have both numbers, we can calculate the popup submission rate:

This can help us evaluate whether the popup is actually doing its job.

For example, if the popup is shown 10,000 times and submitted 20 times, we may have an issue with relevance, offer, timing, design, or usability.

If the popup is shown 10,000 times and submitted 600 times, then the popup is probably doing a much better job of capturing interest.

Once the events are collected in Google Analytics 4, we can analyze popup performance by traffic channel, device category, campaign, landing page, country, browser, and other dimensions.

However, it is important to understand that Shopify newsletter popups can be implemented in many different ways.

For example, a popup can be part of:

• The Shopify theme

• A Shopify app

• Klaviyo

• Privy

• Justuno

• Omnisend

• Mailchimp

• Attentive

• A custom-coded modal

• A page builder

• A third-party script loaded through Google Tag Manager

Because of that, the exact solution below will not work for every website out of the box.

That being said, the methodology is useful. 

The main idea is the same regardless of the popup technology:

1. Identify the popup element.

2. Track when it becomes visible.

3. Identify a reliable signal that the form was submitted successfully.

4. Push clean events into the dataLayer.

5. Use GTM to send those events to GA4.

Here is the popup form itself:

Before creating new tracking, we should first make sure the popup is not already being tracked.

There are several ways to check whether an event fires when the popup appears or when the form is submitted.

The most common methods are:

• Browser Developer Tools

• GTM Preview mode

• GA4 DebugView

• GA4 Realtime report

The browser’s Developer Tools can be useful for inspecting the page, reviewing console errors, and viewing network requests. However, using the Network tab alone is not always bulletproof. Sometimes events may be sent in a way that is not obvious at first glance, or they may be easier to confirm in GTM Preview, GA4 DebugView, or GA4 Realtime.

So, before implementing anything new, I would check the popup with multiple troubleshooting methods.

For this test, I will use:

• Developer Tools

• GTM Preview mode

• GA4 DebugView

To conduct a thorough test, I will trigger the popup and submit the popup form multiple times.

After testing, I can confirm that no useful GA4 event is currently fired when the popup appears:

Since the popup appears automatically and is not triggered by a user click, we need to track visibility rather than a click.

In GTM, this is usually done with an Element Visibility trigger.

The first step is to inspect the popup HTML.

In this case, both the desktop and mobile versions of the popup include the same wrapper element:

div.popup-cta

That gives us a CSS selector we can use in GTM.

Before creating the trigger, check both desktop and mobile layouts. Many popups use different markup on mobile devices, or a different container may become visible depending on screen size. If the desktop popup and mobile popup use different selectors, you may need to track both.

GTM Settings to Keep in Mind

Make sure the relevant built-in visibility variables are enabled.

In GTM, go to Variables, then Built-in Variables, and enable variables such as:

• Percent Visible

• On-Screen Duration

You may not need all of them, but Percent Visible is especially useful when working with Element Visibility triggers.

Now create the popup visibility trigger.

• Trigger type: Element Visibility

• Name: Popup Show

• Selection method: CSS Selector

• Element selector: div.popup-cta

• Minimum percent visible: 50%

• Set when to fire this trigger: Once per page

• Observe DOM changes: depends on the popup implementation

• All or Some visibility events: All visibility events

Here is the trigger setting:

A few notes about these settings.

The selector div.popup-cta works only because this specific popup has that class. On another site, the selector may be completely different.

The 50% visibility threshold means the trigger should fire once at least half of the selected element becomes visible in the viewport.

I would usually set this trigger to fire once per page. Otherwise, if a popup can open, close, and open again, you may accidentally count multiple popup views during the same pageview. There are cases where you may want to count every view, but for most reporting purposes, once per page is cleaner.

The Observe DOM changes setting depends on how the popup is implemented.

If the popup HTML is already present in the page source and only becomes visible through CSS, you may not need to observe DOM changes.

If the popup is injected into the page later by JavaScript, then you may need to enable Observe DOM changes.

Be careful with this setting, as observing DOM changes can impact performance if the selector matches many elements or the page changes frequently. Use the most specific selector you can.

I saved this trigger in a GA4 folder. It is useful to keep GTM organized, especially when the number of tags, triggers, and variables grows over time.

Now we need to create the GA4 event tag that fires when the popup becomes visible.

• Tag type: Google Analytics: GA4 Event

• Event name: newsletter_popup_view

• Event parameters:

• popup_name: newsletter

• popup_type: modal

If your GTM container uses the newer Google Tag setup, select the relevant Google Tag or enter the GA4 Measurement ID depending on how the container is configured.

If your container is older, it may still use a GA4 Configuration tag. In that case, select the existing GA4 Configuration tag.

The trigger should be the Popup Show trigger we just created.

Here are the tag settings:

Two things to note here:

The Google Tag or GA4 Configuration tag is what connects this event to the correct GA4 data stream.

The Popup Show trigger is what tells GTM when to fire this GA4 event.

With those in place, click Preview in GTM and test the popup.

If the popup does not appear, you may need to clear cookies, use an incognito window, add a test URL parameter, or reset whatever rule controls how often the popup is shown.

In this case, GTM Preview confirms that the tag fires:

I also checked Developer Tools and GA4 DebugView, and the event appeared there as well: 

That means the popup visibility event is working.

Once testing is complete, we can publish the GTM container changes.

Now we need to track the second action: successful popup form submission.

This part is often more complicated than tracking popup visibility.

The exact implementation depends on how the popup form works. In many modern Shopify setups, the form submits asynchronously. That means the user stays on the same page, the page does not reload, and the popup shows a success message after the email address is accepted.

It is tempting to track clicks on the Subscribe button, but that is usually not good enough.

• A user can click Subscribe without entering an email address.

• A user can enter an invalid email address.

• A user can submit the form but receive a validation error.

• A user can submit the form but the request may fail.

• A user can click the button multiple times.

If we track only button clicks, we may overcount newsletter signups.

The better approach is to track a signal that indicates the form was actually submitted successfully.

Depending on the popup implementation, that signal might be:

• A success message becomes visible

• A thank-you state appears inside the popup

• A specific CSS class is added after successful submission

• A dataLayer event is already pushed by the popup app

• A network request returns a successful response

• A custom JavaScript callback runs after successful submission

For many GTM setups, the easiest reliable option is to track the success message with another Element Visibility trigger.

For example, after submitting the popup form, inspect the success message. If the success message has a reliable selector, such as:

• div.newsletter-success

• .popup-cta .success-message

• .form-success

… you can create another Element Visibility trigger.

• Trigger type: Element Visibility

• Name: Newsletter Popup Success Message Visible

• Selection method: CSS Selector

• Element selector: .popup-cta .success-message

• Minimum percent visible: 50%

• Set when to fire this trigger: Once per page

• Observe DOM changes: checked if the success message is injected or changed dynamically

This is usually better than tracking the submit button because it is closer to the real outcome: the form was accepted and the success state was shown.

Then create a GA4 event tag.

• Tag type: Google Analytics: GA4 Event

• Event name: sign_up

Event parameters:

• method: newsletter_popup

• popup_name: newsletter

• form_location: popup

The reason I would consider using sign_up is that GA4 has a recommended event called sign_up. A newsletter signup fits that event reasonably well.

If you prefer to keep the event more specific, you can use a custom event name instead, such as:

newsletter_popup_submit

or:

popup_form_submit

Both approaches can work.

My usual preference is:

• Use sign_up if this is a newsletter/email signup and you want to align with GA4’s recommended event naming.

• Use newsletter_popup_submit if you want a very explicit custom event name that is easy to understand in reports.

You can also do both, but avoid creating duplicate reporting confusion. In most cases, one clean event is enough.

The trigger should be the success message visibility trigger we created above.

Once the tag is created, test it in GTM Preview mode.

1. Submit the popup form with a valid email address.

2. Confirm that the success message appears.

3. Confirm that the GTM trigger fires.

4. Confirm that the GA4 event tag fires.

5. Confirm that the event appears in GA4 DebugView.

If the success-message method works, this is probably the cleanest GTM-only solution.

However, sometimes there is no reliable success message selector. 

In that case, you may need a different method.

One option is to use a Custom HTML tag in GTM that listens for the form submit event and pushes a custom event into the dataLayer.

For example:

<script>

(function() {

  var formEl = document.getElementById('newsletter-newsletter-popup');

  if (!formEl) {

    return;

  }

  formEl.addEventListener('submit', function() {

    var inputEl = formEl.querySelector('input[type="email"]');

    var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/i;

    if (inputEl && emailRe.test(inputEl.value.trim())) {

      window.dataLayer = window.dataLayer || [];

      window.dataLayer.push({

        event: 'newsletter_popup_submit',

        popup_name: 'newsletter',

        form_location: 'popup'

      });

    }

  });

})();

</script>

This Custom HTML tag should fire on DOM Ready because the script needs the popup form element to exist before it can attach the event listener.

It is important to fire this on DOM Ready or later. If the tag fires too early, the form element may not exist yet, and the listener will not be attached.

Also notice that the script uses dataLayer.push rather than gtag directly.

That is intentional.

When working within GTM, it is usually cleaner to push a custom event to the dataLayer and then use that event as the trigger for a GA4 Event tag. This keeps the tracking logic inside GTM and avoids mixing direct gtag calls with GTM-managed tags.

The script checks whether the email field exists and whether its value appears to be an email address before pushing the event.

This is better than tracking a raw button click, but it is still not perfect.

Why?

Because this code fires when the form is submitted with a valid-looking email address. It does not necessarily prove that the server accepted the submission or that the user was successfully added to the newsletter list.

For that reason, if you can track a success message, a thank-you state, or an official popup app callback, that is usually better.

Use the submit-listener method only when no cleaner success signal is available.

Once the custom dataLayer event is pushed, create a new trigger in GTM.

• Trigger type: Custom Event

• Event name: newsletter_popup_submit

Then create the GA4 event tag.

• Tag type: Google Analytics: GA4 Event

• Event name: sign_up

• Event parameters:

• method: newsletter_popup

• popup_name: newsletter

• form_location: popup

• Trigger: newsletter_popup_submit

Now test everything again.

1. Open GTM Preview mode.

2. Open the website.

3. Wait for the popup to appear.

4. Submit the popup form with a valid email address.

5. Confirm that the custom dataLayer event appears.

6. Confirm that the GA4 event tag fires.

7. Confirm that the event appears in GA4 DebugView.

After testing, visit GA4 Realtime reporting and confirm that the new event appears there as well. Once everything works, publish the GTM container.

At this point, we are tracking two useful popup events:

• newsletter_popup_view

• sign_up

or, if you prefer the custom naming approach:

• newsletter_popup_view

• newsletter_popup_submit

With those events in place, you can begin analyzing popup performance.

For example, you can calculate:

• Popup views

• Popup submissions

• Popup submission rate

• Popup submissions by device category

• Popup submissions by traffic channel

• Popup submissions by landing page

• Popup submissions by campaign

If you want to calculate the submission rate directly in GA4, you may need to use Explorations, Looker Studio, or another reporting tool. GA4 standard reports can show event counts, but calculated rates are usually easier to build outside the basic event table.

One important note: if you want to use parameters such as popup_name, popup_type, form_location, or method in GA4 reports, you may need to register them as custom dimensions in GA4 Admin. Otherwise, the event may still collect the parameters, but they may not be available in the standard reporting interface as you’d expect.

Also, if newsletter signup is important to the business, you may want to mark the event as a key event in GA4.

For example, if you use sign_up for newsletter submissions, you can mark sign_up as a key event.

If you use newsletter_popup_submit, you can mark that event as a key event instead.

Before doing that, think through your reporting. If the site has multiple types of signups, you may not want all of them counted as the same key event unless that is intentional.

This setup gives you a cleaner way to measure whether your Shopify newsletter popup is actually being seen and whether users are submitting it.