gtm-iframe-form-submit/script.js at main · webhasan/gtm-iframe-form-submit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
(function() {
    function leoMeasureIframeFormSubmitDataLayer() {
        /**
         * Author: Md Hasanuzzaman
         * Email: webhasan24@gmail.com
         * Linkedin: https://linkedin.com/md-h
         * Youtube: https://www.youtube.com/@LeoMeasure-nr3pf
         */

        var iframeSelector = 'iframe'; // change this as your iframe selector

        var iframe = document.querySelector(iframeSelector);
        var isFormSubmitted = false;
        var isInsideIframe = false;
        var isCodeExecuted = false;
        var iframeHeight;

        var observer = new MutationObserver(function (_mutationsList, observer) {
            var currentHeight = iframe.offsetHeight;
            var iframeHeightChange = Math.abs(((currentHeight - iframeHeight) / iframeHeight) * 100);

            if (!isFormSubmitted && iframeHeightChange > 40) {
                observer.disconnect();

                isFormSubmitted = true;
                window.dataLayer = window.dataLayer || [];
                dataLayer.push({
                    event: 'iframe_form_submit',
                    form_location: window.location.href,
                    iframe_id: iframe.getAttribute('id'),
                    iframe_class: iframe.getAttribute('class')
                });
            }
        });

        function handleMouseOver(event) {
            if (event.target.closest(iframeSelector)) {
                isInsideIframe = true;
            } else {
                isInsideIframe = false;
            }
        }

        function handleFormSubmission() {
            var formInsideIframe = iframe.contentDocument.querySelector('form');

            formInsideIframe.addEventListener('submit', function (event) {
                var formData = {};
                var formInputs = formInsideIframe.querySelectorAll('input, select, textarea');

                for (var i = 0; i < formInputs.length; i++) {
                    var input = formInputs[i];
                    if (input.type === 'radio') {

                        if (input.checked) {
                            formData[input.name] = input.value;
                        }
                    } else if (input.type === 'checkbox') {
                        if (!formData[input.name]) {
                            formData[input.name] = [];
                        }
                        if (input.checked) {
                            formData[input.name].push(input.value);
                        }
                    } else {
                        formData[input.name] = input.value;
                    }
                }

                window.dataLayer = window.dataLayer || [];
                window.dataLayer.push({
                    event: 'iframe_form_submit',
                    form_location: window.location.href,
                    iframe_id: iframe.getAttribute('id'),
                    iframe_class: iframe.getAttribute('class'),
                    user_inputs: formData
                });
            });
        }

        document.addEventListener('mouseover', handleMouseOver);
        window.addEventListener('blur', function () {

            if (isInsideIframe && !isCodeExecuted) {
                isCodeExecuted = true;
                document.removeEventListener('mouseover', handleMouseOver);

                window.dataLayer = window.dataLayer || [];
                dataLayer.push({
                    event: 'iframe_form_start',
                    form_location: window.location.href,
                    iframe_id: iframe.getAttribute('id'),
                    iframe_class: iframe.getAttribute('class')
                });

                if (iframe.contentDocument) {
                    handleFormSubmission();
                } else {
                    iframeHeight = iframe.offsetHeight;
                    observer.observe(iframe, { attributes: true, childList: true, subtree: true });
                }
            }
        });
    }
    leoMeasureIframeFormSubmitDataLayer();
})()