Dans cet article découvrez comment suivre les événements de validation d'un formulaire encapsulé dans une iframe avec Google Analytics.
1- Prérequis
- Un compte Google Analytics.
- Le code de suivi Google Analytics installé sur votre site principal :
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', ' G-MEASUREMENT_ID ');
</script>
<!-- Google tag (gtag.js) -->
2- Configuration du suivi d'événements
- Code JavaScript pour détecter la validation du formulaire dans l'iframe.
- Il doit être inséré sur votre site principal.
<script>
window.addEventListener("message", function(event) {
// Vérifiez l'origine pour des raisons de sécurité
if (event.origin !== "https://forms.oplead.com") {
return;
}
if (event.data === "formSubmitted") {
gtag('event', 'form_submission', {
'event_category': 'FormsOplead',
'event_label': 'Formulaire de contact',
'value': 50,
'non_interaction': true
});
}
}, false);
</script>
3- Mise en place du Tracking
- Ajoutez l’url de votre site principal dans le paramétrage de votre plateforme Oplead.
🛣️ Paramétrage > Formulaires > Sélectionner le formulaire > Tracking (onglet en bas à droite) - L'url est intégrée dans l’iframe pour garantir la sécurité des échanges d'informations.
4- Vérification du suivi
Sur Google Analytics suivez la fonction "Real-Time" pour voir le nombre de formulaire complété (cf exemple ci-dessous)
