forge-joniko/ldc-le-gaulois-pro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'issue-226' into 'develop'

Browse source 
wip: add events for matomo

See merge request ldc-web/projets/le-gaulois-pro!166
This commit is contained in:
Vincent BRIDIER 2025-02-18 12:15:56 +00:00
commit 0b728d6677
8 changed files with 122 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Http/Controllers/Fo/ContactController.php
View file

@ -36,6 +36,8 @@ class ContactController extends Controller
Session::forget('saveProductInBasket');
Session::flash('matomo_generate_lead');
return back()->with('success', trans(
'Votre message a bien été envoyé, merci de votre intérêt, nous répondrons dans les meilleurs délais.'
));

27
resources/ts/fo/base/matomo.ts Normal file
View file

@ -0,0 +1,27 @@
window.addEventListener("DOMContentLoaded", () => {
if (!window._paq) {
throw Error("windiw._paq not loaded.");
}
// Track Events - Links
const trackedLinks = document.querySelectorAll(".tracked-link") as NodeListOf<HTMLElement>;
trackedLinks.forEach((element) => {
element.addEventListener("click", function () {
window._paq.push([
"trackEvent",
element.dataset.trackCategory,
`Link clicked - ${element.dataset.trackName}`,
`clic_${element.dataset.trackName}`
]);
});
});
// Track Goals
const trackedGoals = document.querySelectorAll(".tracked-goal") as NodeListOf<HTMLElement>;
trackedGoals.forEach((element) => {
window._paq.push([
"trackGoal",
element.dataset.goal,
]);
});
});

22
resources/ts/fo/components/SaveProductComponent.vue
View file

@ -61,7 +61,7 @@
>
<button
class="interest-butn butn-prim mx-0 py-lg-2"
@click.prevent="addProduct"
@click.prevent="handleAddProductAndMatomoEvents"
:title="
__(
'Cliquez ici pour ajouter cette sélection et la retrouver facilement dans le formulaire de contact'
@ -93,6 +93,11 @@ import parseLaravelErrorMessages from "../../modules/parseLaravelErrorMessages";
import route from "../../modules/route";
import toast from "../../modules/toast";
import trans from "../../modules/trans";
declare global {
interface Window {
_paq: any[];
}
}
export default defineComponent({
mixins: [parseLaravelErrorMessages, route, toast, trans],
components: {
@ -150,6 +155,21 @@ export default defineComponent({
});
},
methods: {
/**
* Call addProduct method and the Matomo event tracker
*/
handleAddProductAndMatomoEvents() {
this.addProduct();
if (window._paq) {
window._paq.push([
"trackEvent",
"Product Interest",
"Clicked 'Je suis intéressé.e'",
"clic_je_suis_interesse"
]);
}
},
/**
* Init the component with some querySelector.
*/

1
resources/ts/fo/fo.ts
View file

@ -17,4 +17,5 @@ window.CookieNotice = CookieNotice;
// * CUSTOM
import "./base/common";
import "./base/matomo";

1
resources/ts/index.d.ts vendored
View file

@ -84,6 +84,7 @@ declare global {
Fancybox: Function;
CookieNotice: typeof CookieNotice;
vueDebug: boolean | undefined;
_paq: any[];
__SYSTEM: {
_asset: Record<string, string>;
_locale: string;

102
resources/views/fo/modules/flashMessage.blade.php
View file

@ -1,68 +1,84 @@
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<svg class="d-none" xmlns="http://www.w3.org/2000/svg">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
<path
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
<path
d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
</symbol>
</svg>
@if ($message = Session::get('success'))
<div class="alert alert-success d-flex align-items-center alert-dismissible fade show mt-6 mb-0" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success d-flex align-items-center alert-dismissible fade show mb-0 mt-6" role="alert">
<svg class="bi me-2 flex-shrink-0" role="img" aria-label="Success:" width="24" height="24">
<use xlink:href="#check-circle-fill" />
</svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button class="btn btn-close" data-bs-dismiss="alert" type="button" aria-label="Close"></button>
</div>
@if (Session::get('matomo_generate_lead'))
{{-- 1 = generate_lead --}}
<div class="tracked-goal" data-goal="1"></div>
@endif
@endif
@if ($message = Session::get('error'))
<div class="alert alert-danger d-flex align-items-center alert-dismissible fade show mt-6 mb-0" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger d-flex align-items-center alert-dismissible fade show mb-0 mt-6" role="alert">
<svg class="bi me-2 flex-shrink-0" role="img" aria-label="Danger:" width="24" height="24">
<use xlink:href="#exclamation-triangle-fill" />
</svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button class="btn btn-close" data-bs-dismiss="alert" type="button" aria-label="Close"></button>
</div>
@endif
@if ($message = Session::get('warning'))
<div class="alert alert-warning d-flex align-items-center alert-dismissible fade show mt-6 mb-0" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning d-flex align-items-center alert-dismissible fade show mb-0 mt-6" role="alert">
<svg class="bi me-2 flex-shrink-0" role="img" aria-label="Warning:" width="24" height="24">
<use xlink:href="#exclamation-triangle-fill" />
</svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button class="btn btn-close" data-bs-dismiss="alert" type="button" aria-label="Close"></button>
</div>
@endif
@if ($message = Session::get('info'))
<div class="alert alert-info d-flex align-items-center alert-dismissible fade show mt-6 mb-0" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info d-flex align-items-center alert-dismissible fade show mb-0 mt-6" role="alert">
<svg class="bi me-2 flex-shrink-0" role="img" aria-label="Info:" width="24" height="24">
<use xlink:href="#info-fill" />
</svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button class="btn btn-close" data-bs-dismiss="alert" type="button" aria-label="Close"></button>
</div>
@endif
@if ($message = Session::get('message'))
<div class="alert alert-info d-flex align-items-center alert-dismissible fade show mt-6 mb-0" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info d-flex align-items-center alert-dismissible fade show mb-0 mt-6" role="alert">
<svg class="bi me-2 flex-shrink-0" role="img" aria-label="Info:" width="24" height="24">
<use xlink:href="#info-fill" />
</svg>
<strong>{!! nl2br(e($message)) !!}</strong>
<button class="btn btn-close" data-bs-dismiss="alert" type="button" aria-label="Close"></button>
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger d-flex align-items-center alert-dismissible fade show mt-6 mb-0" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
@if ($errors->any())
<ul class="list-unstyled">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@endif
<button type="button" class="btn btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger d-flex align-items-center alert-dismissible fade show mb-0 mt-6" role="alert">
<svg class="bi me-2 flex-shrink-0" role="img" aria-label="Danger:" width="24" height="24">
<use xlink:href="#exclamation-triangle-fill" />
</svg>
@if ($errors->any())
<ul class="list-unstyled">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@endif
<button class="btn btn-close" data-bs-dismiss="alert" type="button" aria-label="Close"></button>
</div>
@endif

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

7
resources/views/fo/pages/contact.blade.php
View file

@ -13,7 +13,8 @@
@section('content')
<div class="container-fluid d-flex flex-column align-items-center px-0">
<div class="p-3 mt-4 mx-3 text-bg-dark fw-bold fs-5 rounded cn-cookie-activate d-flex flex-column flex-md-row align-items-center" data-cookie-name="recaptcha">
<div class="text-bg-dark fw-bold fs-5 cn-cookie-activate d-flex flex-column flex-md-row align-items-center mx-3 mt-4 rounded p-3"
data-cookie-name="recaptcha">
<span class="d-flex flex-column w-md-75 w-100">
<strong class="text-underline text-bold text-danger">
{{ __('cookie-notice.custom.recaptcha.warning') }}
@ -23,7 +24,7 @@
{{ __('Acceptez ce cookie pour utiliser les formulaires') }}
</small>
</span>
<button class="btn text-bg-light w-50 h-50 fs-5 rounded-4 mt-3 mt-md-0" id="recaptcha-accept">{{ __('AUTORISER') }}</button>
<button class="btn text-bg-light w-50 h-50 fs-5 rounded-4 mt-md-0 mt-3" id="recaptcha-accept">{{ __('AUTORISER') }}</button>
</div>
<div class="contact-wrapper position-relative bg-ardoise-radial pt-sm-4 pt-4">
<form class="form-contact" id="contact-form" action="{{ route('fo.contact.submit') }}" method="post" inert="true">
@ -151,7 +152,7 @@
@endsection
@push('scripts')
<script nonce="{{ $nonce }}">
<script nonce="{{ $nonce ?? '' }}">
document.addEventListener('DOMContentLoaded', function() {
const initFormCaptcha = () => {
const newDiv = document.createElement("div");

12
resources/views/fo/partials/banner-infos.blade.php
View file

@ -26,7 +26,8 @@
{{ __('Restez connecté') }}<br>
{{ __('avec Le Gaulois Professionnel') }}
</p>
<a href="https://fr.linkedin.com/showcase/le-gaulois-professionnel-officiel" target="blank">
<a class="tracked-link" data-track-category="Social Networks" data-track-name="linkedin"
href="https://fr.linkedin.com/showcase/le-gaulois-professionnel-officiel"target="blank">
<svg class="me-2" id="Calque_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 38 39" xml:space="preserve">
<path class="bg-lin"
@ -37,7 +38,8 @@
d="M19.8,21.5c0-1.5,0.6-2.3,1.9-2.3c1.1,0,1.7,0.8,1.7,2.3c0,1.5,0,5.5,0,5.5h3.1c0,0,0-3.8,0-6.6c0-2.8-1.5-4.2-3.7-4.2c-2.1,0-3,1.7-3,1.7v-1.4h-3V27h3C19.8,27,19.8,23.1,19.8,21.5z" />
</svg>
</a>
<a href="https://www.youtube.com/playlist?app=desktop&list=PLQ6-EyqRqS1_VhFbtuYlTlPIBs7hu149f" target="blank">
<a class="tracked-link" data-track-category="Social Networks" data-track-name="youtube"
href="https://www.youtube.com/playlist?app=desktop&list=PLQ6-EyqRqS1_VhFbtuYlTlPIBs7hu149f" target="blank">
<svg class="m-2" id="Calque_2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 38 39" xml:space="preserve">
<path class="bg-yt"
@ -46,12 +48,12 @@
d="M27.8,14.6c-0.2-0.8-0.8-1.5-1.6-1.7c-1.4-0.4-7.1-0.4-7.1-0.4s-5.7,0-7.1,0.4c-0.8,0.2-1.4,0.9-1.6,1.7c-0.4,1.5-0.4,4.6-0.4,4.6s0,3.1,0.4,4.6c0.2,0.8,0.8,1.5,1.6,1.7c1.4,0.4,7.1,0.4,7.1,0.4s5.7,0,7.1-0.4c0.8-0.2,1.4-0.9,1.6-1.7c0.4-1.5,0.4-4.6,0.4-4.6S28.2,16.1,27.8,14.6z M17.3,22v-5.6l4.7,2.8L17.3,22z" />
</svg>
</a>
<a href="https://www.instagram.com/legaulois_professionnel/" target="blank">
<a class="tracked-link" data-track-category="Social Networks" data-track-name="instagram"
href="https://www.instagram.com/legaulois_professionnel/" target="blank">
<svg class="ms-2" id="Calque_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 39 39" xml:space="preserve">
<circle class="bg-in" cx="19.5" cy="19.5" r="19.5" />
<path class="img-in"
d="M15,10c-2.8,0-5,2.2-5,5v8c0,2.8,2.2,5,5,5h8c2.8,0,5-2.2,5-5v-8c0-2.8-2.2-5-5-5H15z M25,12c0.6,0,1,0.4,1,1
<path class="img-in" d="M15,10c-2.8,0-5,2.2-5,5v8c0,2.8,2.2,5,5,5h8c2.8,0,5-2.2,5-5v-8c0-2.8-2.2-5-5-5H15z M25,12c0.6,0,1,0.4,1,1
s-0.4,1-1,1s-1-0.4-1-1S24.4,12,25,12z M19,14c2.8,0,5,2.2,5,5s-2.2,5-5,5s-5-2.2-5-5S16.2,14,19,14z M19,16c-0.8,0-1.6,0.3-2.1,0.9
C16.3,17.4,16,18.2,16,19s0.3,1.6,0.9,2.1c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.6-0.9-2.1
C20.6,16.3,19.8,16,19,16z" />