Tester les thèmes Shopify avec Varify.io
Table des matières
En bref
Utilise la fonction "Shopify Theme Preview" pour tester facilement un nouveau thème Shopify A/B avec Varify.io. Crée pour cela une nouvelle expérience et utilise le code JavaScript mis à disposition. Adapte-le avec ton nouvel ID de thème et teste le nouveau thème avant de changer de boutique.
Pourquoi tester les thèmes Shopify
Un nouveau thème Shopify devrait être testé A/B avant d'être changé, afin de s'assurer qu'il ne détériore pas les performances de la boutique. Les changements de design peuvent influencer le comportement des clients et les KPI comme le taux de conversion. Le test A/B permet de vérifier, sur la base de données, si le nouveau thème donne de meilleurs résultats.
Étape 1 : Insérer le snippet Varify.io dans le fichier theme.liquid
💡Remarque : pour tester les thèmes, nous recommandons d'intégrer le snippet Varify via le fichier themes.liquid. L'étape 1 ne doit être effectuée que si le snippet Varify n'est pas encore installé sur ton site.
Copie le snippet Varify.io du tableau de bord et colle-le le plus haut possible dans le fichier theme.liquid de ton magasin. Pour cela, va dans le backend Shopify sous "Online Store"-> "Themes" et clique sur "edit code".
Étape 2 : Trouver l'ID du nouveau thème que tu veux tester
Nous avons besoin de l'ID du thème pour indiquer à Shopify quel thème les participants au test doivent voir. Voici un guide étape par étape pour trouver l'ID du thème à partir du lien de prévisualisation :
1. aller à Canaux de vente > Boutique en ligne > Thèmes > Bibliothèque de thèmes.
2. cherche le thème que tu veux tester
3. clique sur les trois points (Actions)
4. clique sur "Aperçu" et copie le lien
Ton lien d'aperçu ressemblera à quelque chose comme ça : https://deinshop.myshopify.com/?preview_theme_id=1234567890
Le chiffre à la fin du lien (1234567890) est l'ID du thème dont tu as besoin.
Fais de même pour ton thème actuel et copie ici aussi l'ID du thème.
Etape 3 : Créer une expérience
Crée une nouvelle expérience. Pour cela, il suffit de saisir la page d'accueil de ta boutique comme URL d'édition dans le tableau de bord Varify. Clique ensuite sur "Add JS" et ajoute le JavaScript suivant à l'expérience.
// Add the experimentId and variationId of your Experiment in order to track your Experiment correctly
const experimentId = 21952;
const variationId = 32490;
// Wait until the theme instance is present on the page…
window.varify.helpers.waitFor(
'[data-theme-instance-id="148175061290"]',
(themeElement) => {
// …then run your redirect logic.
(function () {
const url = new URL(window.location.href);
const params = url.searchParams;
const shadow = document.querySelector('div#varify-shadow-root');
// only redirect when the variation-param is missing AND the shadow-root isn't present
if (!params.has('pb') && !shadow) {
params.set('preview_theme_id', '177143382392');
params.set('pb', '0'); // hide the preview bar
const paramAsBase64 = window
.btoa(`${experimentId}:${variationId}`)
.replace(/=/g, '');
params.append(
'va-red',
paramAsBase64,
);
// replace so you don't add a new history entry
window.location.replace(url.toString());
} else {
console.log('Redirect skipped:', {
hasVarifyVariation: params.has('varify-variation-id'),
varifyShadowRootExists: !!shadow
});
}
})();
}
);
Dès que le code snippet a été adapté avec les nouveaux ID de thème, tu peux cliquer sur "Finished" et donner un nom approprié à l'expérience. Ouvre ensuite le "Page Targeting" dans l'expérience et modifie le "Match Type" de "Simple Match" à "Contains". Clique ensuite sur "Save Page Targeting".
Étape 4 : Ciblage et assurance qualité
Après avoir implémenté le JavaScript et le CSS et enregistré l'expérience, tu peux enregistrer l'URL de ta boutique dans le Page-Targeting de l'expérience. En outre, tu peux maintenant vérifier avec les liens "Preview" si la redirection fonctionne et si tous les réglages ont été effectués correctement.
Étape 5 : Démarrer l'expérience
Maintenant, démarre l'expérience en cliquant sur "Start Experiment". A partir de maintenant, 50% de tes visiteurs seront dirigés vers le nouveau thème et 50% continueront à voir l'ancien thème. Les visiteurs restent toujours affectés à la même variante pendant la durée de l'expérience. Cela signifie que le thème qu'ils ont vu une fois, ils le verront à nouveau pendant l'expérience. Après un certain temps, tu pourras voir quel thème est le plus performant.
Premiers pas
Intégrations de tracking et de Web Analytics
- Suivi avec Varify
- Intégration manuelle du suivi de Google Tag Manager
- Intégration automatique du suivi GA4
- Intégration de pixels personnalisés Shopify via Google Tag Manager
- Suivi Shopify
- Matomo - Intégration via Matomo Tag Manager
- Intégration de etracker
- Intégration de Piwik Pro
- Consent - Suivi via consent
- Paramètres avancés
- Suivi avec Varify
- Intégration manuelle du suivi de Google Tag Manager
- Intégration automatique du suivi GA4
- Intégration de pixels personnalisés Shopify via Google Tag Manager
- Suivi Shopify
- Matomo - Intégration via Matomo Tag Manager
- Intégration de etracker
- Intégration de Piwik Pro
- Consent - Suivi via consent
- Paramètres avancés
Créer une expérience
- A/B testing : créer une expérience
- A/B testing : assurance qualité
- Démarrage et arrêt des expériences
- Test de redirection et de partage d'URL
- Dupliquer la variante
- Création de plusieurs variantes
- Expérience avec plusieurs variantes
- Renommer les expériences et les variantes
- Créer une expérience multi-pages
- A/B testing : créer une expérience
- A/B testing : assurance qualité
- Démarrage et arrêt des expériences
- Test de redirection et de partage d'URL
- Dupliquer la variante
- Création de plusieurs variantes
- Expérience avec plusieurs variantes
- Renommer les expériences et les variantes
- Créer une expérience multi-pages
Ciblage
Rapports et évaluation
- Évaluation GA4 dans Varify.io
- Segmenter et filtrer les rapports
- Partager le rapport
- Évaluation basée sur l'audience dans GA4
- Analyse basée sur les segments dans GA 4
- Matomo - Évaluation des résultats
- Évaluation etracker
- Calculer la significativité
- Événements de clic personnalisés
- Évaluer les événements personnalisés dans des rapports exploratoires
- GA4 - Suivi inter-domaines
- Évaluation GA4 dans Varify.io
- Segmenter et filtrer les rapports
- Partager le rapport
- Évaluation basée sur l'audience dans GA4
- Analyse basée sur les segments dans GA 4
- Matomo - Évaluation des résultats
- Évaluation etracker
- Calculer la significativité
- Événements de clic personnalisés
- Évaluer les événements personnalisés dans des rapports exploratoires
- GA4 - Suivi inter-domaines
Éditeur visuel no/low-code
- Campaign Booster : Arrow Up
- Campaign Booster : Couche d'intention de sortie
- Campaign Booster : Barre d'information
- Campaign Booster : Notification
- Campaign Booster : Barre USP
- Ajouter une cible de lien
- Parcourir le mode
- Sélecteur personnalisé Picker
- Edit Content
- Edit texte
- Déplacement d'éléments
- Élément Hide
- Insertion de mots-clés
- Test de redirection et de partage d'URL
- Supprimer l'élément
- Replace Image
- Commutateur d'appareils réactif
- Modifications du style et de la mise en page
- Campaign Booster : Arrow Up
- Campaign Booster : Couche d'intention de sortie
- Campaign Booster : Barre d'information
- Campaign Booster : Notification
- Campaign Booster : Barre USP
- Ajouter une cible de lien
- Parcourir le mode
- Sélecteur personnalisé Picker
- Edit Content
- Edit texte
- Déplacement d'éléments
- Élément Hide
- Insertion de mots-clés
- Test de redirection et de partage d'URL
- Supprimer l'élément
- Replace Image
- Commutateur d'appareils réactif
- Modifications du style et de la mise en page