wip #2951 @6

diff --git a/package.json b/package.json
index a5439d02ed0b4816a26b1cdb4d4e068ac418d446..5b7780f69e3085a58ca0a35a64a93d82a0b5a75f 100644 (file)
--- 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 d4402db50895d121cb5f6f6b3c107d9e288991d0..cc15862cb930a2c400d039ef3ac7440fa5e895c8 100644 (file)
--- 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 (file)
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 da49a707c9e099535c1553e346d055697813fd8c..1717dbccafb64ed44279944fa92c7f513952d254 100644 (file)
--- 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 cda9e1e59cc10c64487891edf4693f6bb2c54d10..13be37014de6d2ff3fdafee072080c1f1667fab9 100644 (file)
--- 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 25ac50f8a12074fb1eb68d2bf1a5bbc94a370302..8188299a4904f798b92af08a78de300cf8a08935 100644 (file)
--- 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')()