Make this article seo compatible,Let there be subheadings for the article, be in french, create at least 700 wordsEn tant que spécialiste du marketing, vous souhaitez améliorer les performances de votre site Web et générer davantage de conversions. Dans de nombreux cas, les tests A/B pourraient être la solution. En comparant deux versions d’une page Web, vous pouvez déterminer laquelle est la plus efficace pour atteindre vos objectifs. Dans cet article, nous vous expliquerons les étapes de configuration des tests A/B à l’aide de Microsoft Clarity et GA4. Microsoft Clarity est un outil d’analyse de carte thermique gratuit qui dispose de toutes les fonctionnalités de segmentation nécessaires pour mettre en place des tests A/B, en particulier lorsque Google Optimize expire en tant que spécialiste du marketing ; vous avez besoin d’autres moyens d’exécuter vos tests. Le moyen le plus simple et le plus simple de configurer des tests A/B consiste à configurer deux versions de la page Web et à diriger le trafic vers chacune. En utilisant un filtre d’URL de Microsoft Clarity, vous pouvez segmenter les données et les analyser pour différentes versions de votre page Web. Mais que se passe-t-il si vous souhaitez tester différentes mises en page de la page sur le trafic en direct sans différentes URL ? Heureusement, Clarity a des balises personnalisées (et des dimensions personnalisées GA4), vous pouvez donc marquer vos utilisateurs et les filtrer dans les rapports. Que sont les balises personnalisées Microsoft Clarity ? Les balises personnalisées de Clarity sont des étiquettes personnalisées alphanumériques arbitraires que vous pouvez attribuer au visiteur et utiliser ultérieurement pour segmenter les données et analyser les enregistrements et les cartes thermiques pour différents groupes de test. Capture d’écran de Clarity, mai 2023 Existe-t-il des limites aux balises personnalisées dans Microsoft Clarity ? Il n’y a pas de limites. Vous pouvez ajouter autant de balises que vous le souhaitez à votre projet sans aucune restriction ni limitation. Comment taguer un visiteur à l’aide de Microsoft Clarity Le balisage est aussi simple que d’exécuter un petit extrait de code JavaScript : clarity(« set », « experiment », « group_name »); Mais je voudrais vous guider à travers un exemple spécifique et réel de la façon dont cela peut être utilisé à partir de notre expérience. Chez SEJ, nous effectuons divers tests sur différents types de publicités et de mises en page Web pour mieux comprendre comment le comportement des utilisateurs est influencé par des facteurs tels que le type de bannière publicitaire ou la mise en page Web. Exemples de tests A/B que nous effectuons : Bannières publicitaires statiques vs bannières publicitaires animées. Barre latérale gauche contre barre latérale droite. Modification des étiquettes de menu. L’objectif est de comprendre dans quel cas les utilisateurs défilent plus profondément dans l’article et s’engagent ainsi dans la lecture – ou si la modification des étiquettes de menu peut aider à générer plus de clics. 1. Test A/B des bannières statiques Vs. Bannières publicitaires animées Nous utilisons Google Ad Manager pour charger des annonces sur notre page Web, et nous pouvons donc utiliser l’API Google Publisher Tag pour transmettre des valeurs clés à notre serveur publicitaire. Nous distribuons uniformément le trafic en utilisant la fonction Math.random() en JavaScript, qui renvoie 1 ou 2. Pour lancer l’expérience, copiez et collez ce qui suit. Nous utilisons la clé « ads_type » avec les valeurs prédéfinies « static_ads » et « animated_ads » dans GAM pour pouvoir également générer des rapports sur les annonces du côté GAM, tels que le CTR pour chaque groupe. Capture d’écran de Google Ad Manager, mai 2023 Ensuite, dans la section de votre page Web, copiez et collez le code JS, ou vous pouvez utiliser la balise HTML personnalisée GTM sur chaque page vue où vous avez des annonces. <script>
window.group_name = « animated_ads »;
let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2
if( randomNumber == 2 )
group_name = « static_ads »;
document.addEventListener(‘DOMContentLoaded’, function()
//make sure publisher tag has loaded
if( typeof googletag != ‘undefined’ )
googletag.pubads().setTargeting(« ads_type », group_name );
//check if clarity has loaded and set tag « experiment » with values « static_ads » or « animated_ads »
if( typeof window.clarity != ‘undefined’ )
window.clarity(« set », « experiment », window.group_name );
);
</script> Lorsque l’événement « DOMContentLoaded » se déclenche, la balise d’éditeur et la clarté sont généralement chargées. Sinon, vous pouvez envisager d’encapsuler JS dans une fonction setTimeout() avec un petit délai. Avec la clé ads_type dans GAM, il est possible de configurer différents types de bannières à diffuser à chaque groupe. Comme nous avons configuré cette clé en tant que valeur de balise pour la clé « expérimentale » dans Clarity, nous pouvons analyser les données de chaque groupe et exécuter vos rapports. Capture d’écran de Clarity, mai 2023 Si vous avez besoin d’une configuration spécifique nécessitant un codage avancé, vous pouvez essayer d’utiliser ChatGPT pour écrire un code pour vous. Si vous souhaitez suivre l’évolution des taux de conversion des utilisateurs dans GA4, vous pouvez ajouter une dimension personnalisée avec la clé « test » dans GA4 et la renseigner lors du chargement de la balise de configuration à l’aide de la méthode datalayer.push. dataLayer.push( ‘experiment’: group_name ); Alternativement, vous pouvez utiliser GTM Variable JavaScript pour obtenir la valeur de la variable globale window.group_name que nous avons définie ci-dessus comme paramètre de test. Capture d’écran de GA4, mai 2023 Et dans la balise de configuration, configurez une dimension personnalisée pour transmettre cette valeur de variable, comme indiqué ci-dessous : Capture d’écran de GA4, mai 2023 Remplissez la dimension personnalisée « expérience » à partir de la variable JS globale window.group_name, et le tour est joué ! Votre dimension personnalisée de test est maintenant transmise à GA4, et vous pouvez filtrer les rapports à l’aide de la dimension personnalisée « test ». (Astuce : lorsque vous nommez vos dimensions personnalisées, assurez-vous de ne pas utiliser les noms de paramètres réservés pour qu’elles fonctionnent correctement.) 2. Barre latérale gauche contre. Barre latérale droite Le principe est le même. Utilisez la fonction Math.random() en JavaScript afin de diviser le test. <style>
/*when adding this class to the content div it swaps sidebar position */
.main_content_right
flex-direction: row-reverse;
</style>
<script>
// since we have no any css under .main_content_left class it will do nothing i.e. sidebar will be the default right;
window.group_name = « main_content_left »
let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2.
//let randomNumber = Math.floor(Math.random() * 5) + 1; // random number from 1-5. use this if you want to run test on the sample of your traffic e.g. on the 25%.
if( randomNumber == 2 )
group_name = « main_content_right » // we will use group_name as a class name and a custom tag at the same time;
//If DOMContentLoaded has loaded run the code, otherwise attach an event listener
if (document.readyState === ‘complete’)
move_sidebar( group_name )
else
// DOMContentLoaded event has not yet fired
document.addEventListener(‘DOMContentLoaded’, function()
move_sidebar( group_name );
);
function move_sidebar( class_name )
document.querySelector(‘.sej-sect>div’).classList.add(class_name);// add class
//check if clarity has loaded and set tag « experiment » with values « right_sidebar » or « left_sidebar »
if( typeof window.clarity != ‘undefined’ )
window.clarity(« set », « experiment », class_name );
console.log(‘sidebar position’, class_name );
</script> Dans ce cas, nous manipulons DOM afin de changer la mise en page. Dans votre cas spécifique, vous devrez peut-être appliquer différents CSS pour les ajustements de mise en page. Vous pouvez utiliser ChatGPT comme un outil pratique pour vous aider avec votre codage personnalisé. Au bout d’un certain temps, lorsque vous disposez de suffisamment de données d’échantillon pour vos tests fractionnés, vous pouvez utiliser le filtre de balises de Microsoft Clarity « experiment=main_content_left » ou « experiment=main_content_right » pour segmenter vos données. 3. Étiquettes du menu de test A/B Encore une fois, nous utiliserons la fonction Math.random() et manipulerons DOM via JavaScript. Nous voulons tester l’étiquette de menu « Dernières » par rapport à « Actualités » dans la barre de navigation de notre site Web. Pour cela, récupérons le chemin JS à l’aide du navigateur DevTools, comme indiqué ci-dessous. Capture d’écran de DevTools, mai 2023 Nous utiliserons le chemin JS pour accéder aux éléments du DOM et modifier l’étiquette. <script>
//We want to test the menu label for the Latest section in our website’s navigation bar
window.group_name = « Latest »
let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2.
//let randomNumber = Math.floor(Math.random() * 5) + 1; // random number from 1-5. use this if you want to run test on the sample of your traffic e.g. on the 25%.
…
Source link -57
Customize this title in frenchComment configurer les tests A/B à l’aide de Microsoft Clarity et GA4 avec des exemples
