How to create Google tag manager tag for WPForms stripe events

Question

NB: if this is the wrong Stack Exchange, LMK and I'll happily move the question, but it seemed more appropriate than any of WordPress, ServerFault, StackOverflow, or SuperUser.

I'm trying to diagnose a landing page of mine, where I suspect users are experiencing some issue with the payment form. It's a WP Forms form, with Stripe integration. I don't need to capture any user information; I want to see things like, are users trying to submit the form? Are they experiencing errors? Etc... (FYI, If I put the Stripe account in 'test' mode and ... test it, everything seems fine).

My thought was, the easiest way to do this is to create some Google Tag Manager tags, and let GA4 tell me if anything is happening. The question is, how do I do that?

I can't seem to find anything online about doing it, but I found this post about how to do it with Contact Form 7. Following a similar train of thought, I poked around the front-end code for WP Forms, and found the following Ajax events:

wpformSubmitActionRequired
wpformsAjaxSubmitBeforeRedirect
wpformsAjaxSubmitCompleted
wpformsAjaxSubmitError
wpformsAjaxSubmitFailed
wpformsAjaxSubmitSuccessConfirmation
wpformsAjaxSubmitSuccess

Since, AFAICT, none of these are documented, I just hooked into all of them to see what I get. Each is a Custom HTML Tag that looks like this:

<script>
  document.addEventListener( 'wpformsAjaxSubmitSuccess', function( arg ) {
    window.dataLayer.push({
      "event": "wpformSubmitSuccess",
      "details": arg
    });
  });
</script>

If I go into Preview mode in GTM, Tag Assistant shows they're all firing in the "Container Loaded" trigger, but if I try and submit the form (e.g., with incorrect data), the form generates an error, but ... none of them fire.

Is there some obviously problem above and/or how should I hook WPForms+Stripe into GTM?

Answer 1

You haven't completed debugging. You've deployed an event listener. Does it fire on event or not?

Check your DL. If your DL does have the objects pushed, then the problem is in your GTM set up. If DL doesn't have the objects pushed, then the issue is in your listener.

It's likely the listener that's malfunctioning. Monitor all events: https://stackoverflow.com/questions/3489433/monitor-all-javascript-events-in-the-browser-console

And submit your form. See what fires where and deploy appropriate listeners.