mailchimp_popup_gtm_listener.js

// This code attaches a GTM event to the successful submission of a MailChimp
// popup form. This code is designed to be deployed inside the same <script>
// tag you use to install the MailChimp popup form.

// The basic gist of this code is this:
//    1) Wait for the MailChimp Iframe to come into existence
//    2) Attach a submit event listener to the form
//    3) Since we don't know if a submit will be successful, we have grab all
//       the data that was in the form, then start an interval to check for
//       the existence of a "success" screen.
//    4) Once we see the success screen, cancel the interval and send our data
//       to GTM.

// Author: Sean Stoops
// Email: brutimus@gmail.com

// ----------------------------------------------------------------------------

// First, set an interval to watch for the presense of the MailChimp popup
// iframe. It does not come into existance until some unknown amount of time
// after the page renders, so we just have to keep checking.
var mcListenerInterval = setInterval(function() {
  var iframeTarget = document.querySelector(
    "#PopupSignupForm_0 > div.mc-modal > div.mc-layout__modalContent > iframe"
  );
  if (!iframeTarget) {
    // The iframe does not exist yet, return and wait for the next interval.
    return;
  } else {
    // We found the iframe, cancel the interval and continue on.
    clearInterval(mcListenerInterval);

    // This is the hash table that correlates <input> name fields to the value
    // we want to send to GTM. These should be something like:
    // "group[1234][1]": "my-newsletter"
    var LIST_ID_LOOKUP = {
        "": ""
      },
      innerDoc = iframeTarget.contentDocument,
      form = innerDoc.querySelector(
        "#SignupForm_0 > div.modalContent__content > form"
      ),
      checkBoxes = form.querySelectorAll(
        ".radioCheckboxContainer > li > input"
      ),
      groupSelection,
      timer;

    // Now add a submit event listener to the form
    form.addEventListener(
      "submit",
      function(e) {
        // Make sure we clear any intervals that were set from previous submission
        clearInterval(timer);

        // Collect the selected groups now because we can't get to them after we
        // hit a success
        var newGroupSelection = [];
        for (var index = 0; index < checkBoxes.length; index++) {
          var element = checkBoxes[index];
          if (element.checked) {
            newGroupSelection.push(LIST_ID_LOOKUP[element.name]);
          }
        }
        groupSelection = newGroupSelection;

        // Now start an interval to wait for the success screen to see if we
        // should log this submission
        timer = setInterval(function() {
          var successDiv = innerDoc
            .querySelector("#SignupForm_0 > div.flash-block")
            .getElementsByClassName("popup-signup-success");
          if (successDiv.length > 0) {
            // We found the success message, clear the interval and send our event
            clearInterval(timer);
            for (var index = 0; index < groupSelection.length; index++) {
              var group = groupSelection[index];
              dataLayer.push({
                event: "NewsletterSubscribe",
                eventCategory: "Newsletter",
                eventAction: "Subscribe",
                eventLabel: group
              });
            }
          }
        }, 1000);
      },
      false
    );
  }
}, 1000);