• Accueil / Pardot / Capturez la page…
, Capturez la page Web lorsque vous utilisez un formulaire Pardot sur plusieurs pages · Nebula Consulting<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

Capturez la page Web lorsque vous utilisez un formulaire Pardot sur plusieurs pages · Nebula Consulting7 minutes de lecture


Si vous utilisez un formulaire Pardot sur plusieurs pages de votre site (par exemple, le pied de page de votre site Web), il est probable que vous souhaitiez savoir sur quelle page de votre site Web vos prospects se sont convertis. Dans cet article, nous allons vous montrer comment capturer la page Web, avec quelques options pour y parvenir.

Tout d’abord, nous devrons créer un champ personnalisé pour capturer les données dans Pardot (si vous souhaitez également que ces données soient disponibles dans Salesforce, vous devrez créer le champ dans Salesforce et le mapper dans Pardot) :

, Capturez la page Web lorsque vous utilisez un formulaire Pardot sur plusieurs pages · Nebula Consulting<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

Ensuite, nous devrons ajouter le champ en tant que champ caché sur notre formulaire :
, Capturez la page Web lorsque vous utilisez un formulaire Pardot sur plusieurs pages · Nebula Consulting<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

Ensuite, nous devons examiner comment nous utilisons les formulaires et choisir l’une des options ci-dessous.

Option 1 – Le même code iframe se trouve sur plusieurs pages de votre site Web

Cette option est une solution à faible code pour les cas où vous insérez le même code iframe sur plusieurs pages de votre site Web, de sorte que le même formulaire apparaît sur plusieurs pages.

Pour cette option, vous devez copier le code html fourni par Pardot et ajouter à l’URL du formulaire Pardot un paramètre qui exactement correspond au nom de votre ID de champ personnalisé suivi de la page sur laquelle se trouve le formulaire :

, Capturez la page Web lorsque vous utilisez un formulaire Pardot sur plusieurs pages · Nebula Consulting<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

Les formulaires Pardot sont suffisamment intelligents pour extraire des paramètres qui correspondent aux ID de champ (c’est pourquoi il est important que votre ID de champ personnalisé corresponde exactement !). Dans l’exemple ci-dessus, le champ personnalisé caché que nous avons créé et ajouté au formulaire sera renseigné avec « page de contact » une fois le formulaire soumis, celui-ci sera ensuite stocké dans Pardot.

N’oubliez pas que vous devrez mettre à jour la valeur (tout après le ‘=’) sur chaque page que votre formulaire est utilisé pour correspondre au nom de la page.

Option 2 – Le code iframe de votre formulaire est automatiquement inséré sur les modèles de pages de votre CMS

Que se passe-t-il si vous insérez uniquement votre code iframe dans un modèle de page qui est ensuite automatiquement renseigné sur plusieurs pages ? Un bon exemple de ceci serait un formulaire de contact dans le pied de page de chaque page de votre site Web.

C’est là que nous devrons devenir un peu rusés avec le code. Nous allons utiliser Javascript pour capturer l’URL de la page (ou le titre), puis réécrire le code d’intégration iframe avec un paramètre client et les données capturées ajoutées en tant que valeur.

Voici l’extrait de code :

Tout d’abord, il y a quelques domaines clés que nous devrons mettre à jour :

        
        PARDOT_FORM_URL
    • Partout où vous voyez cela dans le code ci-dessus, nous devrons entrer l’URL de notre formulaire Pardot. Nous pouvons copier cela à partir du code d’intégration habituel créé par Pardot : , Capturez la page Web lorsque vous utilisez un formulaire Pardot sur plusieurs pages · Nebula Consulting<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>
        
        CUSTOM_FIELD_ID
    • Vous vous souvenez du champ personnalisé que nous avons créé à la première étape ? Nous devrons saisir l’ID de champ ici, exactement comme dans Pardot (oui, les majuscules sont importantes).
        
        Height
  • Selon la taille du formulaire, il se peut que nous devions ajuster la hauteur du formulaire. Pour ce faire, nous pouvons modifier le numéro à côté de n’importe quel endroit où vous voyez « hauteur » dans le code. Dans le code ci-dessus, nous aurions besoin de changer « 1050 ».

Décomposons cela

La première part est une option de secours pour garantir que le formulaire se charge toujours même si l’utilisateur a désactivé Javascript. Vous aurez juste besoin de mettre à jour le PARDOT_FORM_URL et les paramètres de hauteur dans cette section.

Le suivant section is where the magic happens. Without going into each detail, we’re essentially creating the iframe code from scratch. We’re also pulling in the page URL into a custom parameter (which is the name of your custom field ID) that’s then appended to the end of the PARDOT_FORM_URL.

Let’s look at an example. Here’s the code we’d paste wherever we want our form to appear:

Nous avons donc une URL de formulaire de : https://go.test.com/test/form
et un ID de champ personnalisé de : Conversion_Page

Et voici le code d'intégration qui sera généré sur la page :

Donc, avec ce qui précède, nous pouvons voir que le formulaire est sur le http:‌//test.‌com/contact page. Les formulaires Pardot sont suffisamment intelligents pour extraire des paramètres qui correspondent aux ID de champ (c'est pourquoi il est important que votre ID de champ personnalisé corresponde exactement !). Alors le caché Conversion_Page champ sur mon formulaire sera rempli avec http:‌//test.‌com/contact/ une fois le formulaire soumis. Cela sera ensuite stocké dans Pardot.

Échanger l'URL de la page pour le titre de la page

Dans l'exemple ci-dessus, je tire l'URL de la page complète, mais que se passe-t-il si vous n'êtes intéressé que par le titre de la page ? Ensuite, vous devrez apporter un simple ajustement à l'une des variables du code : titre de la variable.

Si nous remplaçons :

    
    var title = encodeURIComponent(document.location);

Avec:

    
    var title = encodeURIComponent(document.title);

Ensuite, nous verrons le titre de la page apparaître à la place :

, Capturez la page Web lorsque vous utilisez un formulaire Pardot sur plusieurs pages · Nebula Consulting<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

Capture des paramètres UTM

Il y a encore une chose… Ce code a été développé pour capturer tous les paramètres supplémentaires de l'URL de la page, tels que les paramètres UTM, et les transmettre au code iframe. Ainsi, si vous avez des champs masqués pour vos paramètres UTM, ceux-ci devraient également être automatiquement renseignés :

Considérations

Essai

La première chose à faire lors de la mise en œuvre est de le tester. Assurez-vous que votre formulaire parvient au moins à votre page Web, puis nous pourrons accéder aux outils de développement pour voir si tout se déroule comme prévu.

Cliquez avec le bouton droit sur le formulaire> Inspecter, puis recherchez le code iframe, s'il fonctionne comme prévu, vous devriez voir votre URL Pardot From ajoutée à votre identifiant de champ personnalisé et l'URL/le titre de la page sur laquelle se trouve le formulaire :
, Capturez la page Web lorsque vous utilisez un formulaire Pardot sur plusieurs pages · Nebula Consulting<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

Vérifiez ensuite que le champ masqué est rempli avec la bonne valeur, recherchez votre champ personnalisé masqué et cliquez sur le triangle de divulgation pour voir tous les éléments imbriqués, puis recherchez valeur= Il aurait dû être renseigné avec l'URL de la page/le titre de la page value="contactez-nous". Sinon, vous devrez vérifier que votre ID de champ personnalisé est exactement tel qu'il est dans Pardot.

Première touche vs Dernière touche

Une autre chose à considérer est de savoir si vous souhaitez capturer la page de conversion à chaque fois qu'un prospect remplit le formulaire (vous donnant ainsi la dernière page), ou si vous ne souhaitez pas capturer la première page de conversion d'un prospect. Si vous n'êtes intéressé que par la première page de conversion, vous voudrez alors cocher la case « Maintenir la valeur initiale lors des soumissions de formulaires suivantes » dans le champ masqué :
, Capturez la page Web lorsque vous utilisez un formulaire Pardot sur plusieurs pages · Nebula Consulting<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> minutes de lecture</span>

Vous pouvez trouver l'article d'aide de Pardot sur cette solution ici.

Si vous souhaitez en savoir plus sur les formulaires Pardot ou obtenir des conseils supplémentaires, contactez-nous.



Source de l'article traduit automatiquement en Français

Besoin d'aide ?
Vous utilisez Pardot depuis un certain temps mais vous n'êtes pas sûr d'en
exploiter tout le potentiel

Notre analyse de votre Pardot offerte dès aujourd'hui
Merci, vous pouvez compléter notre questionnaire
Nous allons revenir vers vous rapidement !

Fermer