• Accueil / Pardot / 7 façons dont…
, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome3 minutes de lecture


30 septembre 2020 ->

Les outils de développement Chrome sont largement utilisés par les développeurs pour aider à modifier les pages à la volée et à diagnostiquer les problèmes. Les utilisateurs de Pardot peuvent utiliser DevTools pour dépanner et tester les pages de destination et les formulaires. Dans cet article, je vais vous montrer 7 façons d’utiliser DevTools, y compris comment identifier les erreurs sur une page de destination, comment personnaliser le CSS d’un formulaire et comment afficher les valeurs de champ de formulaire masquées.

Comment ouvrir DevTools

Cliquez avec le bouton droit sur un élément de la page et sélectionnez Inspecter pour accéder au panneau Eléments. Ou appuyez sur Commande + Option + C (Mac) ou Ctrl + Maj + C (Windows, Linux, Chrome OS).

1. Effacement cookies

Vous pouvez utiliser DevTools pour effacer facilement votre cookies lors du test des formulaires ou du suivi. Cela vous permet de sélectionner facilement le cookie sur un domaine spécifique sans effacer tout votre navigateur cookies.

Pour effacer votre cookies. Ouvrez DevTools et accédez au Application languette. Sélectionner Biscuits dans l’arborescence et sélectionnez votre sous-domaine Pardot. Cliquez sur le spécifique cookie pour le supprimer ou cliquez sur l’icône pour tout supprimer cookies associé à ce domaine ou sous-domaine.

, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

2. Tester la version mobile directement dans votre navigateur

Si vos landing pages Pardot sont responsives, vous pouvez tester la version mobile ou tablette directement dans votre navigateur.

, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

3. Identifier les erreurs sur votre page de destination

Identifiez les erreurs sur votre page en consultant l’onglet de la console. Cela affichera tous les fichiers cassés (images, fichiers CSS, etc.) présents sur la page. Il vous montrera également tout Erreurs Javascript ou avertissements de sécurité. Les avertissements sont affichés avec une icône jaune et les erreurs sont affichées avec une icône rouge.

, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

En savoir plus sur résoudre les problèmes avec Chrome →

4. Inspection du HTML

Une alternative à affichage de la source de votre page de destination Pardot consiste à utiliser Chrome DevTools pour inspecter facilement le HTML de la page. Pour utiliser l’outil d’inspecteur, cliquez sur l’icône de la souris, puis sélectionnez un élément sur la page pour afficher le HTML.

, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

En savoir plus sur à l’aide de l’inspecteur →

5. Identifier les sélecteurs CSS pour vos formulaires

Les formulaires Pardot sont livrés avec leur propre ensemble de classes et d’identifiants. L’un des éléments clés de la personnalisation de vos formulaires Pardot est de savoir quelle classe ou quel ID utiliser dans votre CSS. À l’aide de l’inspecteur DevTools, vous pouvez facilement afficher les ID et les classes en sélectionnant l’élément et en affichant le HTML du formulaire.

, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

6. Tester le code avant de le mettre en ligne

Vous voulez changer la couleur d’un bouton à la volée? Ou prévisualisez à quoi ressemblera la page avec une police plus grande? Vous pouvez le faire directement dans votre navigateur avant d’apporter les modifications à votre modèle de mise en page dans Pardot. Sélectionnez l’élément à l’aide de l’inspecteur et accédez au onglet styles. Modifiez le CSS dans la section des styles de l’élément et regardez-le changer automatiquement sur la page.

, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

Une manière avancée de modifier les styles d’une page consiste à accéder au la source onglet, sélectionnez un fichier CSS et ajoutez ou modifiez votre CSS.

, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

En savoir plus sur utiliser l’inspecteur pour afficher et modifier le CSS →

7. Affichage des champs de formulaire masqués

Vous pouvez facilement afficher les champs masqués et leurs valeurs en utilisant l’inspecteur. Cela s’avère pratique lorsque vous testez si vos paramètres UTM ou votre source de leads sont correctement renseignés, sans remplir le formulaire à chaque fois.

, 7 façons dont les utilisateurs de Pardot peuvent utiliser les outils de développement Chrome<span class="wtr-time-wrap after-title"><span class="wtr-time-number">3</span> minutes de lecture</span>

Des questions?

Envoyez moi un tweet @jennamolby, ou laissez un commentaire





Source de l’article traduit automatiquement en Français