fnogatz#32 Matomo Tag Manager - First Working Version

* Add config flag for switching between Tag Manager Container and direct Tracking code * Don't check for window._mtm anymore -> use configuration * Remote unnecessary JsOptions / calls only for paq
amenk · Apr 29, 2021 · 43f716a · 43f716a
1 parent 8d8bc08
commit 43f716a
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 30 deletions.
diff --git a/Block/Matomo.php b/Block/Matomo.php
@@ -112,16 +112,32 @@ protected function _prepareTracker()
      */
     public function getJsOptions()
     {
-        return [
-            'scriptUrl'  => $this->getScriptUrl(),
-            'trackerUrl' => $this->getTrackerUrl(),
-            'siteId'     => $this->getSiteId(),
-            'actions'    => $this->getTracker()->toArray()
-        ];
+        if ($this->isContainerEnabled()) {
+            $result = [];
+        } else {
+            $result = [
+                'scriptUrl'  => $this->getScriptUrl(),
+                'trackerUrl' => $this->getTrackerUrl(),
+                'siteId'     => $this->getSiteId(),
+            ];
+        }
+        $result['isContainerEnabled'] = $this->_dataHelper->isContainerEnabled();
+        $result['actions'] = $this->getTracker()->toArray();
+
+        return $result;
+    }
+
+    /**
+     * Check if Matomo Tag Manager Container is enabled
+     * @return string
+     */
+    public function isContainerEnabled()
+    {
+        return $this->_dataHelper->isContainerEnabled();
     }
 
     /**
-     * Get Matomo Tag Manager Container URl
+     * Get Matomo Tag Manager Container URL
      * @return string
      */
     public function getContainerUrl()

diff --git a/Helper/Data.php b/Helper/Data.php
@@ -161,7 +161,7 @@ public function getJsScriptPath($store = null)
      */
     public function getContainerUrl($store = null, $secure = null)
     {
-        return $this->getBaseUrl($store, $secure) . 'js/' .
+        return $this->getBaseUrl($store, $secure)
             . $this->getContainerPath($store);
     }
 
@@ -186,7 +186,7 @@ public function getContainerPath($store = null)
      * @param null|string|bool|int|Store $store
      * @return bool
      */
-    public function getIsContainerEnabled($store = null)
+    public function isContainerEnabled($store = null)
     {
         return boolval($this->scopeConfig->getValue(
             self::XML_PATH_CONTAINER_ENABLED,

diff --git a/Observer/BeforeTrackPageViewObserver.php b/Observer/BeforeTrackPageViewObserver.php
@@ -71,6 +71,10 @@ public function execute(\Magento\Framework\Event\Observer $observer)
      */
     protected function _pushLinkTracking(\Chessio\Matomo\Model\Tracker $tracker)
     {
+        if ($this->_dataHelper->isContainerEnabled()) {
+            return $this;
+        }
+
         if ($this->_dataHelper->isLinkTrackingEnabled()) {
             $tracker->enableLinkTracking(true);
             $delay = $this->_dataHelper->getLinkTrackingDelay();

diff --git a/README.md b/README.md
@@ -37,6 +37,8 @@ php bin/magento module:enable Chessio_Matomo --clear-static-content
 Once installed, configuration options can be found in the Magento 2 administration panel under *Stores/Configuration/Sales/Matomo API*.
 To start tracking, set *Enable Tracking* to *Yes*, enter the *Hostname* of your Matomo installation and click *Save Config*. If you have multiple websites in the same Matomo installation, make sure the *Site ID* configured in Magento is correct.
 
+You can use the Matomo Tag manager instead of Matomo directly. Set the configuration *Enable Matomo Tag Manager Container* to yes and set the *Container Script Path*.
+
 ## Customization
 
 If you need to send some custom information to your Matomo server, Chessio_Matomo lets you do so using event observers.

diff --git a/view/frontend/templates/matomo.phtml b/view/frontend/templates/matomo.phtml
@@ -18,7 +18,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with Chessio_Matomo.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 ?>
 <?php /** @var \Chessio\Matomo\Block\Matomo $block */ ?>
 <script type="text/x-magento-init">
@@ -36,9 +35,9 @@
 ?>
 
 <?php
-
-if (false):
+    if (!$block->isContainerEnabled()):
 ?>
+<!-- Matomo Analytics -->
 <script type="text/javascript">
 (function (w, d) {
     w._paq = w._paq || [];
@@ -53,8 +52,9 @@ if (false):
     s.parentNode.insertBefore(g, s);
 })(window, document);
 </script>
+<!-- End Matomo Analytics -->
 <?php
-endif;
+else:
 ?>
 <!-- Matomo Tag Manager -->
 <script type="text/javascript">
@@ -67,7 +67,9 @@ endif;
     s.parentNode.insertBefore(g, s);
 </script>
 <!-- End Matomo Tag Manager -->
-
+<?php
+    endif;
+?>
 <?php
 // The following script is a workaround that prevents the checkout loader
 // overlay from spinning indefinitely in cases where a browser plugin such as
@@ -104,10 +106,17 @@ endif;
     });
 })(require);
 </script>
+
+<?php
+if (!$block->isContainerEnabled()):
+?>
 <noscript>
     <p>
         <img src="<?= $block->getTrackingPixelUrl(); ?>"
              style="border: 0;"
              alt="" />
     </p>
 </noscript>
+<?php
+endif;
+?>
diff --git a/view/frontend/web/js/tracker.js b/view/frontend/web/js/tracker.js
@@ -47,6 +47,13 @@ define([
      */
     var defaultTrackerUrl;
 
+    /**
+     * Use Tag Manager container instead of direct tracker?
+     *
+     * @type {bool}
+     */
+    var isContainerEnabled;
+
     /**
      * Reference to global `matomoAsyncInit' in case we overwrite something
      *
@@ -231,8 +238,7 @@ define([
                 tracker[actionName].apply(tracker, action);
             }
         } else {
-            if (typeof exports._mtm !== 'undefined') {
-                console.log(action);
+            if (isContainerEnabled) {
                 exports._mtm.push(action);
             } else {
                 exports._paq.push(action);
@@ -309,26 +315,36 @@ define([
      * @param {Object} options
      */
     function initialize(options) {
-        defaultSiteId = options.siteId;
-        defaultTrackerUrl = options.trackerUrl;
-        if (matomo === null) {
-            if (!scriptExists(options.scriptUrl)) {
-                pushAction([
-                    ['setSiteId', defaultSiteId],
-                    ['setTrackerUrl', defaultTrackerUrl]
-                ]);
-                injectScript(options.scriptUrl);
+        isContainerEnabled = options.isContainerEnabled;
+
+        if (!isContainerEnabled) {
+            defaultSiteId = options.siteId;
+            defaultTrackerUrl = options.trackerUrl;
+
+            if (matomo === null) {
+                if (!scriptExists(options.scriptUrl)) {
+                    pushAction([
+                        ['setSiteId', defaultSiteId],
+                        ['setTrackerUrl', defaultTrackerUrl]
+                    ]);
+                    injectScript(options.scriptUrl);
+                }
+            } else {
+                // If we already have the Matomo object we can resolve any pending
+                // promises immediately.
+                resolveMatomoPromises();
             }
-        } else {
-            // If we already have the Matomo object we can resolve any pending
-            // promises immediately.
-            resolveMatomoPromises();
         }
         pushAction(options.actions);
     }
 
     // Make sure the Matomo asynchronous tracker queue is defined
-    exports._paq = exports._paq || [];
+    if (isContainerEnabled) {
+        exports._mtm = exports._mtm || [];
+    } else {
+        exports._paq = exports._paq || [];
+    }
+
     // Listen for when the Matomo asynchronous tracker is ready
     exports.matomoAsyncInit = onMatomoLoaded;
     // Subscribe to cart updates