Merge pull request #723 from matomo-org/pg-2764-retry-mtm-tracking-im…

…provement Improvements to make MTM and _paq work better together
matomo-org · Mar 18, 2024 · 1eed6a4 · 1eed6a4
2 parents 5cb1114 + 8b6ba8e
commit 1eed6a4
Show file tree

Hide file tree

Showing 6 changed files with 557 additions and 47 deletions.
diff --git a/Template/Tag/MatomoTag.web.js b/Template/Tag/MatomoTag.web.js
diff --git a/javascripts/tagmanager.js b/javascripts/tagmanager.js
@@ -1675,8 +1675,28 @@
                 }
 
                 if (container.tags && utils.isArray(container.tags)) {
+                    // Build a collection of the names of all the Matomo configs
+                    var hasMatomoTag = false;
+                    var matomoConfigNames = [];
                     for (i = 0; i < container.tags.length; i++) {
                         tagDefinition = container.tags[i];
+                        if (tagDefinition.type === 'Matomo' && matomoConfigNames.indexOf(tagDefinition.parameters.matomoConfig.name) === -1) {
+                            hasMatomoTag = true;
+                            matomoConfigNames.push(tagDefinition.parameters.matomoConfig.name);
+                        }
+                    }
+                    for (i = 0; i < container.tags.length; i++) {
+                        tagDefinition = container.tags[i];
+                        // If the Matomo config name is in the list, remove it
+                        if (hasMatomoTag && tagDefinition.parameters.matomoConfig && matomoConfigNames.indexOf(tagDefinition.parameters.matomoConfig.name) !== -1) {
+                           matomoConfigNames.splice(tagDefinition.parameters.matomoConfig.name, 1);
+                        }
+                        // If all  the names have been removed, that means all configs are found
+                        // If configs are ready, set tag ready to apply all postponed _paq entries
+                        // This is because we postpone _paq entries to apply them on all trackers
+                        if (hasMatomoTag && matomoConfigNames.length === 0) {
+                            tagDefinition.parameters.applyRemainingPaqEntries = true;
+                        }
                         tag = new Tag(tagDefinition, this);
                         this.tags.push(tag);
 

diff --git a/javascripts/tagmanager.min.js b/javascripts/tagmanager.min.js
diff --git a/tests/resources/anotherTrackerTestExample.html b/tests/resources/anotherTrackerTestExample.html
@@ -0,0 +1,80 @@
+<html>
+<head>
+    <!-- Google Tag Manager -->
+    <script nonce="2726c7f26c">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-TG7HTVR');</script>
+    <!-- End Google Tag Manager -->
+    <script type="text/javascript">
+        var _paq = window._paq = window._paq || [];
+        _paq.push(['trackEvent', 'MyCategory', 'MyAction', 'PreMtmLoaded', 1]);
+        _paq.push(['trackGoal', 1, 43.21]);
+    </script>
+    <!-- Matomo Tag Manager  TODO - Replace this with your own MTM container snippet -->
+    <script>
+        var _mtm = window._mtm = window._mtm || [];
+        _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
+        (function() {
+            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+            g.async=true; g.src='https://matomo.com/js/container_vVLHATh6.js'; s.parentNode.insertBefore(g,s);
+        })();
+    </script>
+    <!-- End Matomo Tag Manager -->
+    <script type="text/javascript">
+        // Manually track a goal
+        var _paq = window._paq = window._paq || [];
+        _paq.push(['trackGoal', 1, 543.21]);
+        _paq.push(['trackEvent', 'MyCategory', 'MyAction', 'PostMtmLoaded', 2]);
+        _paq.push(['setCustomDimension', 1, 'first']);
+    </script>
+    <!-- Hotjar Tracking Code for my site -->
+    <script>
+        (function(h,o,t,j,a,r){
+            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+            h._hjSettings={hjid:3745842,hjsv:6};
+            a=o.getElementsByTagName('head')[0];
+            r=o.createElement('script');r.async=1;
+            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+            a.appendChild(r);
+        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+    </script>
+    <script type="text/javascript">
+        _paq.push(['trackGoal', 1, 11.11]);
+        _paq.push(['trackEvent', 'MyCategory', 'MyAction', 'PreMatomoJsLoaded', 3]);
+    </script>
+    <!-- Matomo -->
+    <script>
+        var _paq = window._paq = window._paq || [];
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['setCustomDimension', 2, 'second']);
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        _paq.push(['trackGoal', 1, 22.22]);
+        (function() {
+            var u="https://matomo.com/";
+            _paq.push(['setTrackerUrl', u+'matomo.php']);
+            _paq.push(['setSiteId', '20']);
+            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+            g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+        })();
+    </script>
+    <!-- End Matomo Code -->
+    <script type="text/javascript">
+        _paq.push(['trackGoal', 1, 33.33]);
+        _paq.push(['trackEvent', 'MyCategory', 'MyAction', 'PostMatomoJsLoaded', 4]);
+        _paq.push(['setCustomDimension', 3, 'third']);
+    </script>
+</head>
+<body>
+<div class="main-div">
+    <h1 class="site-title">Hello World!</h1>
+</div>
+<div><button type="button" onclick="_paq.push(['trackEvent', 'MyButtonCategory', 'MyButtonAction', 'Button1', 1]);">Test Button 1</button></div>
+<div><button type="button" onclick="_paq.push(['trackEvent', 'MyButtonCategory', 'MyButtonAction', 'Button2', 2]);">Test Button 2</button></div>
+<div><button type="button" onclick="_paq.push(['trackEvent', 'MyButtonCategory', 'MyButtonAction', 'Button3', 3]);">Test Button 3</button></div>
+<div><button type="button" onclick="_paq.push(['trackEvent', 'MyButtonCategory', 'MyButtonAction', 'Button4', 4]);">Test Button 4</button></div>
+<div><button type="button" onclick="_paq.push(['trackEvent', 'MyButtonCategory', 'MyButtonAction', 'Button5', 5]);">Test Button 5</button></div>
+</body>
+</html>