Intégration GA4 via Shopify Custom Pixel
AVIS IMPORTANT : Ces instructions ne doivent être suivies que si tu as intégré Google Tag Manager ou Google Analytics 4 directement via le Shopify Custom Pixel.
En bref
Dans ce guide, tu vas apprendre à envoyer les événements Varify vers Google Analytics 4 via l'intégration Shopify Custom Pixel. Tu vas apprendre à envoyer les événements Varify vers Google Analytics 4 en utilisant soit le Google Tag Manager, soit l'intégration gtag directe.
Envoi des données Varify via GTM ou GTAG via le Shopify Custom Pixel
Étape 1 : Sélection de la connexion Analytics « Shopify App / Custom Pixel »
Rends-toi sur app.varify.io et clique sur « Go to tracking setup ». Sélectionne ensuite « Google Analytics 4 (Shopify Custom Pixel Integration) » dans le Tracking Setup Wizard. Suis les étapes de l'assistant de configuration. Ce n'est que si tu utilises déjà GTM sur ton site qu'il est nécessaire de suivre les étapes de l'option 1 ci-dessous. Si tu as intégré GA directement sans GTM, passe directement à l'option 2.
Option 1 : intégration Google Tag Manager
Suis les étapes de ce guide si tu as intégré Google Tag Manager dans ton Custom Pixel Shopify. Si tu envoies tes données directement via gtag - c'est-à-dire une intégration directe de GA4 via Custom Pixel, suis ces étapes Instructions.
Étape 2 : ajouter la fonction analytics.subscribe de varify dans le custom pixel du GTM
Ouvre la zone « Customer events » dans le backend Shopify et ouvre le custom pixel dans lequel tu as intégré ton GTM.
L'événement Varify est créé à l'aide de analytics.subscribe ajouté à votre DataLayer. Sur la capture d'écran, vous pouvez voir l'événement Varify inséré en bas.
Ajoutez le code suivant à votre Custom Pixel, sous le code Google Tag Manager :
analytics.subscribe('varify', (event) => {
window.dataLayer.push({
'event': "varify",
...event.customData
});
});
Étape 3 : Désactivation de l'option "Start Tracking on Activation Event"
Sous « Tracking Options », va dans « Advanced Setup ». Désactive l'option « Start Tracking on Activation Event ».
Étape 4 : configuration du Google Tag Manager
1. création d'une nouvelle variable de couche de données (VA Short)
Cette variable est utilisée pour fournir à un tag les informations du test A/B.
- Créer une nouvelle variable : « Variables » > « New »
- Type de variable -> « Data Layer Variable »
- Data Layer Variable Name ->
varify_abTestShort(orthographe obligatoire) - Nommer la variable -> VA Short
2. créer un nouveau déclencheur (Varify.io - Event)
Le déclencheur est l'événement décisif qui déclenche la transmission des données au système Analytics.
- Nom du déclencheur : ex. « Varify.io - event »
- Type de déclencheur : « User-defined event »
- Nom de l'événement :
varify(orthographe obligatoire)
3. création d'un nouveau tag GTM (Varify.io - GA4 Tracking Linker)
Les tags sont des extraits de code qui envoient les valeurs stockées dans les variables à ton outil d'analyse, comme Google Analytics. Crée maintenant un tag pour envoyer les valeurs de la variable créée à Google Analytics.
- Nom du tag : "Varify.io - GA4 Tracking Linker"
- Tag de configuration : [utilise ton tag GA4 existant].
- Nom de l'événement : par ex. "Abtesting"
- Nom du paramètre :
varify_abTestShort(orthographe obligatoire) - Valeurs :
{{VA Short}}(la variable créée à l'étape 1) - Déclencheur : "Varify.io - event" (le déclencheur créé à l'étape 2)
4. Publier le conteneur GTM
Pour garantir que tes modifications dans Google Tag Manager fonctionnent également sur ton site web, il est important de publier les changements.
Pour cela, va dans « Overview » dans le Tag Manager à gauche. Tu y trouves un aperçu de tous les éléments que tu viens de créer.
Pour publier, clique sur le bouton bleu « Publish » en haut à droite et confirme. Le tag est maintenant actif et envoie les données à ton Google Analytics.
Option 2 : intégration directe GA4
Suis les étapes de ce guide si tu as intégré le gtag dans ton Custom Pixel Shopify (si tu envoies les données directement à Google Analytics 4)
Étape 2 : ajoute la fonction analytics.subscribe de varify dans le custom pixel du gtag
Ouvre la zone « Customer events » dans le backend Shopify et ouvre le custom pixel dans lequel tu as intégré ton gtag.
L'événement Varify est créé grâce à l'analytics.subscribe ajouté à ton DataLayer. Sur la capture d'écran, tu peux voir l'événement Varify inséré tout en bas.
Ajoute le code suivant à ton Custom Pixel en dessous du code Google Tag Manager :
// Start Varify subscribe event
analytics.subscribe("varify", (event) => {
const d = event?.customData || {};
gtag("event", "varify", {
storageType: d.storageType,
teamId: d.teamId,
varify_abTest: d.varify_abTest,
varify_abTestLong: d.varify_abTestLong,
varify_abTestShort: d.varify_abTestShort,
varify_error: d.varify_error,
varify_experimentId: d.varify_experimentId,
varify_experimentName: d.varify_experimentName,
varify_success: d.varify_success,
varify_variationId: d.varify_variationId,
varify_variationName: d.varify_variationName
});
});
// End Varify subscribe event
Étape 3 : Désactiver l'option « Start Tracking on Activation Event »
Dans « Tracking Options », va dans « Advanced Setup ». Désactive l'option « Start Tracking on Activation Event ».