From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 3 Sep 2019 16:50:11 +0000 (+0200)
Subject: wip #2951 @1:40
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=bec4205018624abcb3aae4f9f39ace1c2b7419ef;p=pmi.git

wip #2951 @1:40
---

diff --git a/resources/js/components/Search.vue b/resources/js/components/Search.vue
index ccc6b0d..98c47b8 100644
--- a/resources/js/components/Search.vue
+++ b/resources/js/components/Search.vue
@@ -3,17 +3,16 @@
 
         <!-- Trigger Link that will appear inside the nav portal -->
         <portal to="nav-search-toggle">
-            <a href="#" class="text-white hover:text-blue" @click.prevent="toggleVisibility" :class="visible ? 'text-blue' : ''">
+            <a href="#" class="text-white hover:text-blue" @click.prevent="toggleVisibility"
+               :class="visible ? 'text-blue' : ''">
                 <slot name="link"></slot>
             </a>
         </portal>
 
         <slide-toggle :active="visible" :duration="300" @open-end="focusField">
             <div class="header-search-box container py-3">
-                <form :action="endpoint" method="get" class="flex justify-between items-center">
-
+                <form :action="endpoint" method="get" class="flex justify-between items-center" @submit="submitForm">
                     <search-field :placeholder="placeholder" ref="searchInput"></search-field>
-
                     <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">
                         <slot name="button"></slot>
                     </button>
@@ -51,7 +50,7 @@
             }
         },
 
-        mounted () {
+        mounted() {
             let component = this;
 
             // Allow search field to be opened using the common '/' shortcut
@@ -81,6 +80,9 @@
 
             focusField() {
                 this.$refs.searchInput.focus()
+            },
+            submitForm() {
+                cubistga.event('search', 'engagment', null, null, false, {'search_term': this.$refs.searchInput.getInputValue()});
             }
         }
     }
diff --git a/resources/js/components/SearchField.vue b/resources/js/components/SearchField.vue
index a70351e..56889a7 100644
--- a/resources/js/components/SearchField.vue
+++ b/resources/js/components/SearchField.vue
@@ -2,6 +2,7 @@
     <autocomplete
         class="flex-grow"
         name="q"
+        :default-value="value"
         ref="autocomplete"
         :search="getSuggestions"
         :get-result-value="getResultValue"
@@ -26,7 +27,7 @@
         data() {
             return {
                 ajaxURL: `/ajax/search`,
-                suggestionsLimit: 5,
+                suggestionsLimit: 5
             }
         },
 
@@ -34,6 +35,9 @@
             placeholder: {
                 type: String,
             },
+            value:{
+                type: String,
+            }
         },
 
         mounted () {
@@ -45,6 +49,10 @@
                 this.$refs.autocomplete.$refs.input.focus()
             },
 
+            getInputValue(){
+                return this.$refs.autocomplete.$refs.input.value;
+            },
+
             getSuggestions(input) {
 
                 return new Promise(resolve => {
@@ -69,7 +77,7 @@
                 return result.title
             },
 
-            handleSubmit(input) {
+            handleSubmit() {
                 let $this = this;
                 this.$nextTick(function () {
                     $this.$el.closest('form').submit();
diff --git a/resources/js/mailform.js b/resources/js/mailform.js
index 42ef232..d480620 100644
--- a/resources/js/mailform.js
+++ b/resources/js/mailform.js
@@ -30,6 +30,7 @@ $(function () {
             let responseClasses = form.data('confirmation-classes') || 'text-2xl text-center p-8';
             form.find('.error').removeClass('error');
             form.html(`<p class="${responseClasses}">${form.data('confirmation')}</p>`);
+            cubistga.handleGtag($(form).get(0));
         }).fail(function (response) {
             button.text(button.data('text')).prop('disabled', false);
             form.find('.error').removeClass('error');
diff --git a/resources/js/vendor/cubist/gtag/gtag.js b/resources/js/vendor/cubist/gtag/gtag.js
index 31119e2..88dbac2 100644
--- a/resources/js/vendor/cubist/gtag/gtag.js
+++ b/resources/js/vendor/cubist/gtag/gtag.js
@@ -11,11 +11,11 @@ cubistga.prototype.initEvents = function () {
     });
 
     document.addEventListener('click', function (e) {
-        if (e.target.matches('[data-ga]')) {
+        if (e.target.matches('a[data-ga]')) {
             $this.handleGtag(e.target);
         }
-        if (e.target.closest('[data-ga]')) {
-            $this.handleGtag(e.target.closest('[data-ga]'));
+        if (e.target.closest('a[data-ga]')) {
+            $this.handleGtag(e.target.closest('a[data-ga]'));
         }
     }, false);
 };
@@ -53,7 +53,7 @@ cubistga.prototype.event = function (action, category, label, value, noninteract
     if (undefined !== value && null !== value) {
         options.value = value;
     }
-    console.log('gtag event',action,options);
+    console.log('gtag event', action, options);
     return gtag('event', action, options)
 };
 
@@ -63,8 +63,17 @@ cubistga.prototype.handleGtag = function (el) {
         let category = el.getAttribute('data-ga-category');
         let label = el.getAttribute('data-ga-label');
         let value = el.getAttribute('data-ga-value');
+        let options = el.getAttribute('data-ga-options');
+        if (options !== null) {
+            try {
+                options = JSON.parse(options);
+            }catch (e) {
+                console.log(options);
+                options={};
+            }
+        }
 
-        return this.event(action, category, label, value, el.getAttribute('data-ga-noninteraction') === 1);
+        return this.event(action, category, label, value, el.getAttribute('data-ga-noninteraction') === 1, options);
     }
 };
 
diff --git a/resources/views/components/map-link.blade.php b/resources/views/components/map-link.blade.php
index e32a550..144ba24 100644
--- a/resources/views/components/map-link.blade.php
+++ b/resources/views/components/map-link.blade.php
@@ -3,7 +3,10 @@
 
 @if (!empty($address))
 
-    <a class="{{ $class ?? '' }}" href="https://maps.google.fr/?q={{ urlencode(str_replace("\n", " ", $address)) }}" target="_blank" rel="noopener">
+    <a data-ga="event" data-ga-category="contact" data-ga-action="click" data-ga-label="postal_address"
+       class="{{ $class ?? '' }}"
+       href="https://maps.google.fr/?q={{ urlencode(str_replace("\n", " ", $address)) }}" target="_blank"
+       rel="noopener">
         {{ $slot }}
     </a>
 
diff --git a/resources/views/components/phone-link.blade.php b/resources/views/components/phone-link.blade.php
index a532a51..63ea854 100644
--- a/resources/views/components/phone-link.blade.php
+++ b/resources/views/components/phone-link.blade.php
@@ -13,7 +13,8 @@
     @endphp
 
 
-    <a class="{{ $class ?? '' }}" href="tel:{{ $number }}">
+    <a data-ga="event" data-ga-category="contact" data-ga-action="click"
+       data-ga-label="phone" class="{{ $class ?? '' }}" href="tel:{{ $number }}">
         {{ $slot }}
     </a>
 
diff --git a/resources/views/pages/cart.blade.php b/resources/views/pages/cart.blade.php
index 3ac9298..5cbd3d5 100644
--- a/resources/views/pages/cart.blade.php
+++ b/resources/views/pages/cart.blade.php
@@ -19,6 +19,7 @@
                     <div class="bg-grey-100 p-1v">
                         @form([
                         'action' => '/ajax/request_quote',
+                        'ga'=>false,
                         'extra_fields' => '<input type="hidden" name="cart_data" :value="cartData">' // Populated by VueJS
                         ])
                     </div>
diff --git a/resources/views/pages/contact.blade.php b/resources/views/pages/contact.blade.php
index b252987..263c9d2 100644
--- a/resources/views/pages/contact.blade.php
+++ b/resources/views/pages/contact.blade.php
@@ -18,7 +18,9 @@
                         {{-- Social Networks --}}
                         @php($networks = ['twitter' => 'Twitter', 'linkedin' => 'LinkedIn'])
                         @foreach ($networks as $networkID => $network)
-                            <a class="flex items-center mb-4 font-bold text-navy hover:text-blue"
+                            <a data-ga="event" data-ga-category="social" data-ga-action="click"
+                               data-ga-label="{{$networkID}}"
+                               class="flex items-center mb-4 font-bold text-navy hover:text-blue"
                                href="{{ $global->get("social.{$networkID}") }}" target="_blank" rel="noopener">
                                 @svg("icon-{$networkID}", 'mr-3')
                                 {{ __($network) }}
diff --git a/resources/views/pages/search.blade.php b/resources/views/pages/search.blade.php
index 8ab3844..b2f063c 100644
--- a/resources/views/pages/search.blade.php
+++ b/resources/views/pages/search.blade.php
@@ -3,18 +3,23 @@
 @section('content')
 
     <content class="pb-3v">
-        <text-block :title="$page->page_heading" />
+        <meta data-ga="event" data-ga-action="view_search_results" data-ga-category="engagment"
+              data-ga-options='{"search_term":"{{request()->get('q')}}"}'>
+        <text-block :title="$page->page_heading"/>
 
         <div class="search-results-layout">
 
             <div class="search-results-main">
 
                 <div class="bg-grey-100 p-1v">
-                    <form action="{{ $nav->getHrefByName('recherche') }}" method="get" class="flex justify-between items-center sm:block">
+                    <form action="{{ $nav->getHrefByName('recherche') }}" method="get"
+                          class="flex justify-between items-center sm:block">
 
-                        <search-field placeholder="{{ __('Saisissez votre recherche') }}"></search-field>
+                        <search-field placeholder="{{ __('Saisissez votre recherche') }}"
+                                      value="{{request()->get('q')}}"></search-field>
 
-                        <button class="btn flex items-center py-3 px-8 font-display text-lg rounded ml-4 sm:mt-4 sm:mx-auto">
+                        <button
+                            class="btn flex items-center py-3 px-8 font-display text-lg rounded ml-4 sm:mt-4 sm:mx-auto">
                             @svg('search', 'fill-current mr-2')
                             {{ __('Rechercher') }}
                         </button>
@@ -36,14 +41,16 @@
                             <div class="breadcrumbs sm:text-sm">
                                 @foreach ($result['breadcrumbs'] as $breadcrumb)
                                     <div @if(!$loop->last) class="breadcrumbs-item" @endif>
-                                        <a class="breadcrumbs-link" @if ($breadcrumb->url)href="{{ $breadcrumb->url }}" @endif>
+                                        <a class="breadcrumbs-link"
+                                           @if ($breadcrumb->url)href="{{ $breadcrumb->url }}" @endif>
                                             {{ $breadcrumb->title }}
                                         </a>
                                     </div>
                                 @endforeach
                             </div>
 
-                            <a class="text-2xl sm:text-xl xs:text-lg font-display mt-1 inline-block animated-underline" href="{{ $result['url'] }}">{{ $result['title'] }}</a>
+                            <a class="text-2xl sm:text-xl xs:text-lg font-display mt-1 inline-block animated-underline"
+                               href="{{ $result['url'] }}">{{ $result['title'] }}</a>
                         </div>
                     @endforeach
                 </div>
diff --git a/resources/views/partials/contact-details.blade.php b/resources/views/partials/contact-details.blade.php
index 60e34fb..8e01234 100644
--- a/resources/views/partials/contact-details.blade.php
+++ b/resources/views/partials/contact-details.blade.php
@@ -6,7 +6,8 @@
     </div>
 </map-link>
 
-<a class="contact-details-block" href="mailto:{{ $global->email }}">
+<a data-ga="event" data-ga-category="contact" data-ga-action="click"
+   data-ga-label="email" class="contact-details-block" href="mailto:{{ $global->email }}">
     @svg('icon-email', 'contact-details-icon')
     <div class="contact-details-text">
         <div class="contact-details-title">{{ __('Email') }}</div>
diff --git a/resources/views/partials/form.blade.php b/resources/views/partials/form.blade.php
index 3ed44b0..8e680e8 100644
--- a/resources/views/partials/form.blade.php
+++ b/resources/views/partials/form.blade.php
@@ -1,77 +1,85 @@
+@php
+    $gaattrs='data-ga="event" data-ga-action="send" data-ga-category="contact" data-ga-label="form"';
+    if(isset($ga) && !$ga){
+         $gaattrs='';
+    }
+@endphp
 @if ($page->get('form'))
-
     @push('scripts')
         <script src="{{ mix('/js/mailform.js') }}"></script>
     @endpush
 
-<div id="contact-form">
-    <div class="ajax-form flex flex-col max-w-half">
-        @if($page->get('form_intro'))
-            <div class="form-info text-navy">@markdown($page->get('form_intro'))</div>
-        @endif
-        <form class="text-navy mailform" action="{{ $action ?? '/ajax/mailform' }}" method="post"
-              data-confirmation="{{$page->get('form_confirmation')??__('Votre message a bien été envoyé')}}" novalidate>
-            @honeypot
-            <input type="hidden" value="{{$page->get('id')}}" name="page">
+    <div id="contact-form">
+        <div class="ajax-form flex flex-col max-w-half">
+            @if($page->get('form_intro'))
+                <div class="form-info text-navy">@markdown($page->get('form_intro'))</div>
+            @endif
+            <form {!! $gaattrs !!} class="text-navy mailform" action="{{ $action ?? '/ajax/mailform' }}" method="post"
+                  data-confirmation="{{$page->get('form_confirmation')??__('Votre message a bien été envoyé')}}"
+                  novalidate>
+                @honeypot
+                <input type="hidden" value="{{$page->get('id')}}" name="page">
 
-            {!! $extra_fields ?? '' !!}
+                {!! $extra_fields ?? '' !!}
 
-            <div class="fields grid" >
-                @foreach($page->get('form') as $field)
-                    @php
-                        $required=$field['mandatory']?' required':'';
-                        $asx=$field['mandatory']?' *':'';
-                    @endphp
-                    <label class="form-input">
-                        @switch($field['type'])
-                            @case('name')
-                            {{__('Nom')}}{{$asx}} <input class="py-3 mt-3" type="text" {!! $required !!}  name="name">
-                            @break
+                <div class="fields grid">
+                    @foreach($page->get('form') as $field)
+                        @php
+                            $required=$field['mandatory']?' required':'';
+                            $asx=$field['mandatory']?' *':'';
+                        @endphp
+                        <label class="form-input">
+                            @switch($field['type'])
+                                @case('name')
+                                {{__('Nom')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                             {!! $required !!}  name="name">
+                                @break
 
-                            @case('firstname')
-                            {{__('Prénom')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                            {!! $required !!}  name="firstname">
-                            @break
+                                @case('firstname')
+                                {{__('Prénom')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                                {!! $required !!}  name="firstname">
+                                @break
 
-                            @case('company')
-                            {{__('Société')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                             {!! $required !!}  name="company">
-                            @break
+                                @case('company')
+                                {{__('Société')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                                 {!! $required !!}  name="company">
+                                @break
 
-                            @case('email')
-                            {{__('E-mail')}}{{$asx}} <input class="py-3 mt-3" type="email"
-                                                            {!! $required !!}  name="email">
-                            @break
+                                @case('email')
+                                {{__('E-mail')}}{{$asx}} <input class="py-3 mt-3" type="email"
+                                                                {!! $required !!}  name="email">
+                                @break
 
-                            @case('ref')
-                            {{__('Référence')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                               {!! $required !!}  name="ref">
-                            @break
+                                @case('ref')
+                                {{__('Référence')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                                   {!! $required !!}  name="ref">
+                                @break
 
-                            @case('sku')
-                            {{__('Numéro de série')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                                     {!! $required !!}  name="sku">
-                            @break
+                                @case('sku')
+                                {{__('Numéro de série')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                                         {!! $required !!}  name="sku">
+                                @break
 
-                            @case('subject')
-                            {{__('Sujet')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                           {!! $required !!}  name="subject">
-                            @break
+                                @case('subject')
+                                {{__('Sujet')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                               {!! $required !!}  name="subject">
+                                @break
 
-                            @case('message')
-                            {{__('Message')}}{{$asx}} <textarea class="py-3 textarea mt-3" type="text"
-                                                                {!! $required !!}  name="message"></textarea>
-                            @break
-                        @endswitch
-                    </label>
-                @endforeach
-            </div>
+                                @case('message')
+                                {{__('Message')}}{{$asx}} <textarea class="py-3 textarea mt-3" type="text"
+                                                                    {!! $required !!}  name="message"></textarea>
+                                @break
+                            @endswitch
+                        </label>
+                    @endforeach
+                </div>
 
                 <div class="form-endmessage my-6 text-grey-dark text-sm">
                     @markdown($global->get('form_privacy'))
                 </div>
                 <div class="form-footer flex justify-between items-center xs:flex-col-reverse">
-                    <span class="form-required-legend text-grey-dark xs:self-start xs:mt-5">*{{__('Champs obligatoires')}}</span>
+                    <span
+                        class="form-required-legend text-grey-dark xs:self-start xs:mt-5">*{{__('Champs obligatoires')}}</span>
                     <button type="submit" class="form-submit-button btn btn-custom xs:w-full"
                             data-sending="{{__('Envoi en cours')}}">{{ $page->get('form_button_text', __('Envoyer')) }}</button>
                 </div>