CODEWITHSUNDEEP
google-analyticsgoogle-tag-managermailchimp
alleg_dev
alleg_dev

Reputation: 13

Triggering a GTM event with Mailchimp pop up form submission

I have the standard Mailchimp pop up embedded on my site. I would like to trigger a GTM event every time it's submitted to send to GA. It's an embedded iframe and I'm not seeing a way to handle this. This is the embed code for the pop up:

<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/xxxx/xxxx.js");</script>

I've tried reviewing the form class, form element and other form triggers, but nothing is triggering the GTM event.

Upvotes: 0

Views: 1093

Answers (1)

TimW
TimW

Reputation: 656

GTM's "Form Submission" trigger cannot catch form submissions in (embedded) iframes.

If you are only interested in the submit, you can add a custom event listener via a "Custom HTML" tag which pushes a custom event to dataLayer which you can then act on in GTM.

document.querySelector('#PopupSignupForm_0 div.mc-modal iframe').contentDocument.querySelector('form').addEventListener('submit', function(event){dataLayer.push({event: 'mailchimp_submit'})});

This triggers every time the "subscribe" button is clicked - also when the form does not validate.

Maybe it is better to use a Timer trigger which checks for a "MCPopupSubscribed" cookie with the value "yes"?

  1. Create a Variable "MCPopupSubscribed", 1st Party Cookie, Cookie Name: "MCPopupSubscribed", Format Value: Convert undefined to "no"

  2. Create a Variable "TimerID", Data Layer Variable, "gtm.timerId", Version 2

  3. Create a Trigger "Mailchimp", Timer, Event Name: "gtm.timer", Interval: 1000, Enable ...: MCPopupSubscribed does not equal yes, Fires on some timers: MCPopupSubscribed equals yes

  4. Create your tag, fires on "Mailchimp" trigger

  5. Create a Tag "Clear Timer", Custom HTML, fires on "Mailchimp" trigger

    if ({{TimerID}}) { window.clearInterval({{TimerID}}); }

The Timer will only "run" if the cookie is absent. It then checks every second if the cookie was set. If it is set it runs your tag and it runs "Clear Timer" to stop the timer/trigger. If it the timer is not stopped the trigger keeps firing every second.

There's also a cookie MCPopupClosed=yes which is set if the user closes the popup...

Upvotes: 1

Related Questions