From b0feb4aa5b1e8cbdf8a53632b37496e1ab94ad80 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 2 Sep 2019 18:37:42 +0200
Subject: [PATCH] wip #2951 @6

---
 package.json                              |  7 +++--
 resources/js/app.js                       |  3 ++
 resources/js/vendor/cubist/gtag/app.js    | 38 +++++++++++++++++++++++
 resources/views/layouts/app.blade.php     |  1 +
 resources/views/partials/footer.blade.php | 10 ++++--
 webpack.mix.js                            |  7 +++++
 6 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/vendor/cubist/gtag/app.js

diff --git a/package.json b/package.json
index a5439d0..5b7780f 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,10 @@
         "tailwindcss": "^1.0.4",
         "vue": "^2.6.10",
         "vue-slide-up-down": "^1.7.2",
-        "vue-template-compiler": "^2.6.10"
+        "vue-template-compiler": "^2.6.10",
+        "element-closest": "^3.0.1"
     },
-    "dependencies": {}
+    "dependencies": {
+
+    }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index d4402db..cc15862 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -8,6 +8,9 @@ require('./bootstrap');
 require('./menu');
 require('../../vendor/cubist/cms-back/src/public/emailobfuscator/emailobfuscator');
 
+var glob = require( 'glob' );
+var path = require( 'path' );
+
 window.Vue = require('vue');
 window.eventBus = new Vue();
 
diff --git a/resources/js/vendor/cubist/gtag/app.js b/resources/js/vendor/cubist/gtag/app.js
new file mode 100644
index 0000000..58dff40
--- /dev/null
+++ b/resources/js/vendor/cubist/gtag/app.js
@@ -0,0 +1,38 @@
+require('element-closest');
+
+document.addEventListener('DOMContentLoaded', function () {
+    Array.prototype.forEach.call(document.querySelectorAll('meta[data-ga]'), function (el, i) {
+        handleGtag(el)
+    });
+});
+
+document.addEventListener('click', function (e) {
+
+    if (e.target.matches('[data-ga]')) {
+        handleGtag(e.target);
+    }
+    if (e.target.closest('[data-ga]')) {
+        handleGtag(e.target.closest('[data-ga]'));
+    }
+}, false);
+
+function handleGtag(el) {
+    if (el.getAttribute('data-ga') === 'event') {
+        console.log(el);
+        let action = el.getAttribute('data-ga-action');
+        let category = el.getAttribute('data-ga-category');
+        let label = el.getAttribute('data-ga-label');
+        let value = el.getAttribute('data-ga-value');
+        let options = {non_interaction: el.getAttribute('data-ga-noninteraction') === 1};
+        if (null !== category) {
+            options.event_category = category;
+        }
+        if (null !== label) {
+            options.event_label = label;
+        }
+        if (null !== value) {
+            options.value = value;
+        }
+        gtag('event', action, options)
+    }
+}
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index da49a70..1717dbc 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -5,6 +5,7 @@
 
 @prepend('scripts')
     <script src="{{ mix('/js/app.js') }}"></script>
+    <script src="{{ mix('/js/vendor.js') }}"></script>
 @endprepend
 
 @include('cubist::head.htmldeclaration')
diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
index cda9e1e..13be370 100644
--- a/resources/views/partials/footer.blade.php
+++ b/resources/views/partials/footer.blade.php
@@ -9,11 +9,14 @@
                 {!! nl2br($global->get('footer_text')) !!}
             </div>
             <div class="footer-social flex">
-                <a class="text-white hover:text-blue mr-6" href="{{ $global->get('social.twitter') }}" target="_blank"
+                <a class="text-white hover:text-blue mr-6" data-ga="event" data-ga-category="social"
+                   data-ga-action="click" data-ga-label="twitter" href="{{ $global->get('social.twitter') }}"
+                   target="_blank"
                    rel="noopener">
                     @svg('icon-twitter')
                 </a>
-                <a class="text-white hover:text-blue" href="{{ $global->get('social.linkedin') }}" target="_blank"
+                <a class="text-white hover:text-blue" data-ga="event" data-ga-category="social" data-ga-action="click"
+                   data-ga-label="linkedin" href="{{ $global->get('social.linkedin') }}" target="_blank"
                    rel="noopener">
                     @svg('icon-linkedin')
                 </a>
@@ -31,7 +34,8 @@
             <ul>
                 @foreach ($global->get('strengths', []) as $strength)
                     <li class="flex items-center mb-6">
-                        <img src="{{ $global->getImageURLByCollection($strength['icon']) }}" alt="{{ $strength['title'] }}" class="flex-shrink-0 w-12 h-12 mr-4">
+                        <img src="{{ $global->getImageURLByCollection($strength['icon']) }}"
+                             alt="{{ $strength['title'] }}" class="flex-shrink-0 w-12 h-12 mr-4">
                         <div>
                             <span class="font-display font-semibold">{{ $strength['title'] }}</span>
                             <br/>
diff --git a/webpack.mix.js b/webpack.mix.js
index 25ac50f..8188299 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -13,12 +13,19 @@ require('laravel-mix-purgecss');
  |
  */
 
+mix.webpackConfig({
+    node: {
+        fs: "empty"
+    }
+});
+
 mix.browserSync({
     proxy: process.env.APP_URL,
     open: false // Don't automatically open a new tab when the watcher starts
 });
 
 mix.js('resources/js/app.js', 'public/js')
+    .js('resources/js/vendor/**/**/app.js','public/js/vendor.js')
     .stylus('resources/styles/app.styl', 'public/css', {
         use: [
             require('rupture')()
-- 
2.39.5