Merge pull request #36 from webmatch/feature/productClickTracking

Feature Product Click Tracking

Author: wbm-mkopp

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [3.5.0]
+- Add product click tracking support
+
 ## [3.4.0]
 - add possibility to add script-tag-attributes
 - add possibility to extend googletagmanager.com URL

Resources/services.xml

@@ -31,6 +31,12 @@
             <tag name="shopware.event_subscriber" />
         </service>
 
+        <service id="wbm_tag_manager.subscriber.frontend.theme"
+                 class="WbmTagManager\Subscriber\Frontend\ThemeSubscriber">
+            <tag name="shopware.event_subscriber"/>
+            <argument>%wbm_tag_manager.plugin_dir%</argument>
+        </service>
+
         <service id="wbm_tag_manager.subscriber.frontend.dispatch" class="WbmTagManager\Subscriber\Frontend\Dispatch">
             <argument type="service" id="wbm_tag_manager.variables" />
             <argument type="service" id="config" />

Resources/views/frontend/_public/src/js/jquery.product-click-tracking.js

@@ -0,0 +1,54 @@
+(function ($, window) {
+    $.plugin('wbmProductClickTracking', {
+        init: function () {
+            var me = this;
+
+            me.setImpressions();
+
+            me._on(me.$el, 'click', $.proxy(me.onProductClicked, me));
+        },
+        /**
+         * @param {jQuery.Event} event
+         */
+        onProductClicked: function (event) {
+            var me = this,
+                ordernumber = $(event.target).closest('.product--box').data('ordernumber'),
+                product = me.impressions.find(function (value, index) {
+                    return value.id ===  ordernumber;
+                });
+
+            if (product === undefined) {
+                return;
+            }
+
+            window.dataLayer.push({
+                'event': 'productClick',
+                'ecommerce': {
+                    'click': {
+                        'actionField': {'list': product.list},
+                        'products': [ product ]
+                    }
+                }
+            });
+        },
+        setImpressions: function () {
+            var me = this;
+
+            if (window.dataLayer) {
+                for (i = 0; i < window.dataLayer.length; i++) {
+                    var layer = window.dataLayer[i];
+
+                    if (layer.ecommerce && layer.ecommerce.impressions) {
+                        me.impressions = layer.ecommerce.impressions;
+                    }
+                }
+            }
+        }
+    });
+
+    $.subscribe('plugin/swInfiniteScrolling/onFetchNewPageFinished', function () {
+        StateManager.addPlugin('.product--box a', 'wbmProductClickTracking');
+    });
+
+    StateManager.addPlugin('.product--box a', 'wbmProductClickTracking');
+})(jQuery, window);

Subscriber/Frontend/ThemeSubscriber.php

@@ -0,0 +1,32 @@
+<?php
+namespace WbmTagManager\Subscriber\Frontend;
+
+use Doctrine\Common\Collections\ArrayCollection;
+use Enlight\Event\SubscriberInterface;
+
+class ThemeSubscriber implements SubscriberInterface
+{
+    /** @var string */
+    private $pluginDir;
+
+    public function __construct(string $pluginDir)
+    {
+        $this->pluginDir = $pluginDir;
+    }
+
+    public static function getSubscribedEvents(): array
+    {
+        return [
+            'Theme_Compiler_Collect_Plugin_Javascript' => 'addJsFiles',
+        ];
+    }
+
+    public function addJsFiles(): ArrayCollection
+    {
+        $jsFiles = [];
+        $jsDir = $this->pluginDir . '/Resources/views/frontend/_public/src/js/';
+        $jsFiles[] = $jsDir . 'jquery.product-click-tracking.js';
+
+        return new ArrayCollection($jsFiles);
+    }
+}

plugin.xml

@@ -3,11 +3,16 @@
     <label lang="de">Tag Manager</label>
     <label lang="en">Tag Manager</label>
 
-    <version>3.4.0</version>
+    <version>3.5.0</version>
     <link>http://www.webmatch.de</link>
     <author>Webmatch GmbH</author>
     <compatibility minVersion="5.6.3" />
 
+    <changelog version="3.5.0">
+        <changes lang="de">Hinzufügen der Möglichkeit des tracken von Produktklicks</changes>
+        <changes lang="en">Add possibility to track product clicks</changes>
+    </changelog>
+
     <changelog version="3.4.0">
         <changes lang="de">Hinzufügen der Möglichkeit das Script Tag und die Tag Manager URL zu erweitern</changes>
         <changes lang="en">Add possibility to extend script tag and tag manager URL</changes>