Getting the Real Count: Tracking Mailing List Submissions to Google Tag Manager

Today, we’re going to design an as-close-as-possible perfect solution for tracking mailing list submissions to Google Tag Manager. We will be using Gravity Forms integrated via PHP to Mailster, but these principles apply to other form and mailing list softwares. We will be using jQuery. We recognize that these are not “perfect” technologies for these types of data tracking, but they integrate easily with WordPress.

Our goal is to push the tag to Google Optimize so we can easily measure conversion actions.

The problem:

• If your click handler is on a parent element, a click on a child element may trigger multiple clicks on the parent element.
• Forms that are AJAX enabled, such as Gravity Forms, actually track a submission every time you move from page to page.
• A click on the button of the form does NOT mean the form has been successfully submitted with validation.

To solve these problems, we are going to use an odd workaround. We are creating a separate element that lives outside of the form entirely that acts as our click trigger. This makes it easy to detect the click, and we can click one singular time via jQuery. Tracking a click could be pushed from our code, but why not just make a Tag Manager tag with a dummy element?

We will add a jQuery variable that checks if it’s the first time this extra “action” button has been clicked, and track it.

Let’s start by writing the jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<a href="" class="refresher_email_submission_click_trigger">Click trigger</a>
<div class="refresher_email_submission_click_action"></div>

<script>
jQuery(document).ready(function(){
tracked_refresher_email_submission = false;

jQuery( ".refresher_email_submission_click_trigger" ).click(function(event) {
    event.preventDefault();   
    event.stopImmediatePropagation();
    if(tracked_refresher_email_submission == false){
        jQuery('refresher_email_submission_click_action').trigger('click');
        alert('Click trigger activated');
        tracked_refresher_email_submission = true;
    }
    });
});
</script>

This script starts a variable that allows the submission one time. This variable will never revert whatsoever, because there is no chance for it to happen in the code.

We have a “trigger” and an “action”. When the “action” is fired, our form is actually submitted. The user will only interact with the trigger div. This can be the final button of the form, or the form submission action—but ONLY after the form

The action div can never be clicked separately, because it simply doesn’t have any content in it. However, it’s possible that it could end up with default styling that would cause it to have padding, thus having size and being clickable. We need to prevent that.

This is easy to do. Let’s just visually hide the action div with CSS.

.refresher_email_submission_click_action {
    position: absolute;
    z-index: -999999;
    left: -100vw;
    visibility: hidden;
}

Great! Now, it’s near-perfect. The first click, but not the second click, will inform the submission. Now, we need to form the actual conditions that inform the submission.