Un projet web de refonte complète et de mise à jour réalisé avec l’aide précieuse de la designer Conception Graphique MC.
Site web : valuminium.ca
Avec un design graphique chic et sur mesure, le plan de site a été simplifié afin de fournir une base solide pour l’optimisation de leur contenu et de leur SEO, en collaboration avec divers partenaires du client.
Un des éléments notables est l’utilisation demandée par le client d’un « Splash screen » dans le but de rediriger vers les sites sœurs, Créneau Aluminium et HTAG 360 (en attente de développement). Ce dernier utilise un cookie qui se supprime dès la fermeture de l’onglet de navigation, qu’on appelle aussi un cookie de session.
Nous limitons ainsi l’impact sur la vie privée en n’utilisant que ceux strictement nécessaires à l’utilisation du site.
Si vous souhaitez en lire plus sur l’utilisation de cookies, je vous recommande l’article de CookieYes (en anglais) qui explique en détail ce qu’est un cookie de session et comment ça fonctionne.
Pour ceux qui se demandent comment j’ai implémenté la gestion du cookie pour le « Splash screen » (et pour garder ça dans mes notes), voici un peu de code Javascript, sous framework jQuery:
jQuery(document).ready(function($) {
// Check utm_source to know if we are referred by any of our sister site's splash
// Example url :
// https://valuminium.ca/?utm_source=website-splash&utm_medium=website&utm_campaign=website-splash
let searchParams = new URLSearchParams(window.location.search);
if (searchParams.has('utm_source')) {
let param = searchParams.get('utm_source');
if (param != '') {
// Found an utm_source so don't show splashPage
sessionStorage.setItem('seenSplashPage','true');
}
} else if (document.referrer.indexOf(location.protocol + "//" + location.host) === 0) {
// Self-referred - so don't show splashPage
sessionStorage.setItem('seenSplashPage','true');
}
// SessionStorage is required to avoid aweful UX in showing the splash to users that already made a choice
// Doesn't create cookie
if (sessionStorage.getItem('seenSplashPage') !== 'true') {
// If no choice is recorded in that tab, show the splash.
$('#welcome-gate').show();
} else {
// If there is a choice recorded in that tab, hide the splash.
$('#welcome-gate').hide();
}
// Splash interractions
$('.row-this-site').click(function() {
$('#welcome-gate').addClass('move-gate');
sessionStorage.setItem('seenSplashPage','true');
});
});