Universal event tracking solution for TYPO3 Powermail XHR submissions.

powermailtracking.js

// Universal event tracking for TYPO3 Powermail XHR submissions.
//
// Note: As of version 4.2.0, Powermail sends a custom event on submit;
// see https://github.com/einpraegsam/powermail/blob/develop/Documentation/Faq/Index.rst#how-can-i-add-a-callback-function-on-ajax-submit
document.addEventListener("DOMContentLoaded", function(event) { 
    // Step 1
    // Attach an onsubmit handler to all powermail ajax forms, which will
    // make the powermail form id available in the window object on submit.
    var forms = document.querySelectorAll('form');
    for (var i in forms) {
        var form = forms[i];
        if (typeof form === 'object' && form.getAttribute('data-powermail-ajax') == 'true') {
            var powermailFormId = form.getAttribute('data-powermail-form');
            form.setAttribute('onsubmit', 'window.submittedPowermailForm=' + powermailFormId);
        }
    }

    // Step 2
    // Replace the window.XMLHttpRequest.open prototype to intercept XHR calls
    // and trigger a custom tracking event for all powermail XHR submissions.
    var open = window.XMLHttpRequest.prototype.open;
    function openReplacement(method, url, async, user, password) {
        if (method === 'POST' && url.indexOf('tx_powermail_pi1') !== -1) {
            console.log('Powermail XHR Request sent');
            var parsedUrl = document.createElement('a');
            parsedUrl.href = url;

            // throw Google Tag Manager event
            dataLayer.push({
                event: 'Formular gesendet',
                eventCategory: 'Powermail',
                eventAction: parsedUrl.pathname,
                eventLabel: 'Powermail Form ID: ' + window.submittedPowermailForm
            });

            // throw Google Analytics event (analytics.js)
            /*ga('send', 'event', {
               eventCategory: 'Powermail',
               eventAction: 'Formular gesendet',
               eventLabel: 'Powermail Form ID: ' + window.submittedPowermailForm
            });*/

            // throw Google Analytics event (ga.js)
            //_trackEvent('Powermail', 'Formular gesendet', 'Powermail Form ID: ' + window.submittedPowermailForm);

            // throw Webtrekk event
            //wt.sendinfo({linkId: 'Powermail Form ID: ' + window.submittedPowermailForm});
        }

        return open.apply(this, arguments);
    }

    window.XMLHttpRequest.prototype.open = openReplacement;
});

Did you see https://github.com/einpraegsam/powermail/blob/develop/Documentation/Faq/Index.rst#how-can-i-add-a-callback-function-on-ajax-submit? This could probably help since powermail 4.1.0

@einpraegsam First off, thanks for the reference link. I didn't knew about that feature. However, I just tried that method with several client projects that use 4.1.0. But unfortunatley it didn't work for me (even when I tried to attach the listener to the document). The event is not emitted at all. Is there any public test instance I can double-check?

This feature is actually one feature that was not tested from me because it came from a community member. So I have to test it by my own for a good feedback.

@einpraegsam I checked the commit history and know why it didn't worked for me. The feature was added after the 4.1.0 release and should be available as of version 4.2.0

Ah sorry, my mistake