Pour suivre des événements personnalisés dans Formaloo avec Facebook Pixel et configurer le Meta Pixel sur votre site web, suivez le guide étape par étape ci-dessous.
Ce processus vous permet de surveiller les interactions avec vos formulaires, comme les soumissions réussies, à l’aide d’écouteurs d’événements.
Ce guide vous montre également comment installer le Meta Pixel et suivre les données sur votre site web ou votre sous-domaine.
Configurer le Meta Pixel et les événements sur votre site web
Accédez au Meta Events Manager.
Connectez des sources de données :
Cliquez sur Connect data sources et sélectionnez Web.
Cliquez ensuite sur Connect.
Créez un pixel :
Saisissez un nom pour votre pixel et cliquez sur Create pixel.
Un nouvel ID est généré ; vous pouvez le consulter dans Events Manager.
Remarque : les événements de votre Meta Pixel sont partagés dans un ensemble de données (dataset), qui regroupe des événements provenant de différentes sources. L’ID de votre nouvel ensemble de données est identique à l’ID de votre nouveau pixel. En savoir plus sur les ensembles de données.
Vérifiez l’intégration du site web :
Saisissez l’URL de votre site web pour vérifier les options d’intégration, puis cliquez sur Check.
Remarque : si votre formulaire est intégré à une page web, saisissez l’URL de la page hôte dans laquelle le formulaire est intégré. Si le formulaire est hébergé sur votre sous-domaine ou votre domaine personnalisé, utilisez directement l’URL du formulaire.Sélectionnez la méthode de connexion des données :
Choisissez comment connecter vos données à Meta : Get guidance (recommended) ou Do it yourself.
Choisissez Get guidance (recommended) ou Do it yourself :
Sélectionnez Get guidance si vous souhaitez des recommandations de configuration. Si vous choisissez cette option, vous pouvez ignorer le reste des instructions de cet article et suivre plutôt les instructions affichées dans Events Manager.
Sélectionnez Do it yourself si vous savez déjà comment connecter vos données et ne souhaitez pas de recommandations de configuration. Si vous choisissez cette option, suivez le reste des instructions de cet article.
Sélectionnez Conversions API and Meta pixel ou Meta pixel only comme option de configuration, puis cliquez sur Next.
Si vous sélectionnez Conversions API and Meta pixel, choisissez comment configurer l’API Conversions et le pixel : Set up with partner integration, Set up with Conversions API Gateway, ou Set up manually. Si vous ne savez pas quelle option choisir, vous pouvez comparer les options de configuration de l’API Conversions selon leur coût et leur complexité.
Si vous sélectionnez Set up with partner integration, choisissez votre partenaire et suivez les instructions à l’écran pour configurer le pixel, l’API Conversions et les événements.
Si vous sélectionnez Set up with Conversions API Gateway, suivez les instructions à l’écran pour configurer le pixel, la passerelle API Conversions et les événements.
Si vous sélectionnez Set up manually, suivez les instructions à l’écran pour générer des instructions personnalisées permettant de configurer le pixel, l’API Conversions et les événements. Sur le dernier écran, vous pourrez configurer vous-même l’API Conversions à l’aide de ces instructions personnalisées ou les envoyer à un développeur. Si vous avez besoin d’aide pour générer les instructions, découvrez comment configurer l’API Conversions à l’aide d’instructions personnalisées.
Si vous sélectionnez Meta pixel only, choisissez comment configurer le code de votre pixel : Install code manually ou Check for a partner.
Installer le code du pixel
Accédez à Events Manager :
Ouvrez Events Manager.
Sélectionnez le pixel :
Cliquez sur l’icône Data sources (à gauche), sélectionnez le pixel que vous souhaitez configurer, puis cliquez sur Continue pixel setup.
Sélectionnez Meta pixel et cliquez sur Connect.
Installez le code manuellement :
Copiez le code de base du pixel fourni et suivez ces étapes selon la configuration de votre formulaire :
Pour les formulaires sur un sous-domaine ou un domaine personnalisé, remplacez l’ID du pixel par votre propre ID et collez le code dans la section Custom JS des paramètres du formulaire Formaloo.
Code personnalisé FP :
<script>
!(function (f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function () {
n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s);
})(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'PIXEL_ID');
fbq('track', 'PageView');
var noscript = document.createElement('noscript');
var img = document.createElement('img');
img.src = 'https://www.facebook.com/tr?id=PIXEL_ID&ev=PageView&noscript=1';
img.height = '0';
img.width = '1';
img.style.display = 'none';
noscript.appendChild(img);
document.body.appendChild(noscript);
</script>
Pour les formulaires intégrés, collez le code de base dans la section d’en-tête (head) de votre site web, juste avant la balise head de fermeture.
Code standard FP :
<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '949056103706001');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=949056103706001&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
Cliquez sur Continue dans le tableau de bord Facebook Pixel.
Finalisez la configuration :
Cliquez sur Continue dans le tableau de bord Facebook Pixel et activez Automatic advanced matching (facultatif).
Ajoutez des événements à l’aide de l’Event Setup Tool ou en ajoutant manuellement du code.
Si vous revenez maintenant à la page de la source de données, vous pouvez voir la progression en bas de la page :
Étapes pour suivre les événements personnalisés Formaloo avec Facebook Pixel
Suivre l’événement formaloo_submitSuccess :
1- Configurez un écouteur d’événements :
Ajoutez un écouteur d’événements pour l’événement formaloo_submitSuccess en JavaScript :
Utilisez la méthode JavaScript addEventListener pour écouter cet événement :
document.addEventListener('formaloo_submitSuccess', function(event) {
fbq('trackCustom', 'FormalooSubmitSuccess', {
formData: event.detail // If the event has additional details
});
});
2- Ajoutez le code :
Pour les formulaires sur un sous-domaine ou un domaine personnalisé, placez le code juste après le script d’installation de Facebook Pixel dans la section Custom JS de votre formulaire.
Votre code final devrait ressembler à ceci<script>
// Facebook Pixel Base Code (Replace with your actual Pixel ID)
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'PIXEL_ID');
fbq('track', 'PageView');
// Listen for "formaloo_submitSuccess" custom event
document.addEventListener('formaloo_submitSuccess', function(event) {
// Trigger Facebook Pixel custom event
fbq('trackCustom', 'FormalooSubmitSuccess', {
formData: event.detail // If the event has additional details
});
});
</script>
Pour les formulaires intégrés, ajoutez le code juste après le code d’installation dans l’en-tête de votre page.
3- Vérifiez le traceur dans le tableau de bord Facebook :
Accédez à Facebook Events Manager : Facebook Events Manager.
Sélectionnez votre pixel : choisissez le pixel que vous utilisez pour le suivi.
Testez les événements :
Accédez à l’onglet « Test Events ».
Ouvrez votre formulaire dans un nouvel onglet et déclenchez l’événement
formaloo_submitSuccess(soumettez votre formulaire : si la page de fin s’affiche, cela signifie que le formulaire a bien été soumis).Revenez à l’onglet Events Manager : l’événement (
FormalooSubmitSuccess) devrait apparaître en temps réel sous « Test Events ».
Vous pouvez également consulter l’historique des événements sous Data Sources > Overview. Dans Events Manager, vous pouvez voir la liste de tous les événements suivis, y compris les événements personnalisés comme
FormalooSubmitSuccess.
Pour plus d’aide sur la vérification des traceurs ou l’ajout d’options intégrées, consultez la documentation Facebook Pixel.