Intégrer du contenu à l'aide d'un code d'intégration

Grâce aux fonctionnalités d'intégration de contenu, vous pouvez créer des sections de contenu dans HubSpot, puis les intégrer dans votre site web. Pour ajouter un contenu intégré à une page de site web externe, vous pouvez utiliser le plug-in d'intégration de contenu pour l'éditeur Gutenberg de WordPress ou copier le code d'intégration directement dans HubSpot.

Découvrez ci-dessous comment copier le code d'intégration de contenu ainsi que les bonnes pratiques pour maintenir le score CLS (Cumulative Layout Shift) de votre page.

Remarque : Le contenu intégré n'est pas chargé via un iFrame, mais est injecté via JavaScript. Les moteurs de recherche peuvent exécuter JavaScript et capter le contenu intégré, évitant ainsi tout problème de SEO que peuvent présenter les iFrames.

Copier le code d'intégration

Pour copier le code d'intégration d'une section d'intégration de contenu :

• Dans votre compte HubSpot, accédez à Contenu > Intégrations de contenu.
• Passez le curseur sur une intégration, puis cliquez sur Plus et sélectionnez Obtenir un code intégré.
  
  
• Dans la boîte de dialogue, cliquez sur Copier pour copier le code d'intégration.

Vous pouvez ensuite coller le code d'intégration dans votre contenu externe si nécessaire. Lorsque vous collez le code d'intégration, gardez à l'esprit ce qui suit :

• Le style d'une intégration de contenu provient de la page sur laquelle elle est intégrée, et non de HubSpot. Pour ajuster l'apparence du contenu intégré, vous devez mettre à jour la CSS de la page. Si vous utilisez WordPress, découvrez comment ajouter une CSS personnalisée.
• Le code d'intégration de contenu n'inclut pas votre code de suivi HubSpot. Vous devrez installer séparément le code de suivi sur les pages externes pour tirer parti des fonctionnalités de HubSpot telles que les analytics de trafic et les bannières de consentement privé.
• Pour intégrer du contenu via le code d'intégration, HubSpot insère le contenu via le pied de page de domaine hs-sites par défaut. Cela permet de préserver vos pieds de page spécifiques à un domaine. Toutefois, tout contenu inclus dans le pied de page hs-sites sera inséré sur la page externe avec le contenu intégré. Par exemple, si vous avez une clause de non-responsabilité de copyright dans le pied de page de domaine hs-sites, le copyright apparaîtra sur la page externe avec le contenu intégré. Découvrez comment modifier le contenu des pieds de page spécifiques à un domaine.
  
  

Consulter les bonnes pratiques d'intégration de contenu

Selon la façon dont vous utilisez le code d'intégration, il est possible que le contenu affecte le score CLS (Cumulative Layout Shift) de votre page, qui mesure le degré de déplacement du contenu de votre page dans le viewport du visiteur pendant le chargement. Deux facteurs vont impacter votre CLS :

• l'emplacement de l'intégration, y compris s'il se trouve au-dessus ou en dessous de la ligne de flottaison et où le script est intégré ;
• la hauteur de l'intégration, qui est directement liée aux modules inclus dans l'intégration de contenu. Plus de modules sont inclus, plus la mise en page risque de changer au fur et à mesure du chargement du contenu.

Si vous constatez un impact négatif sur votre CLS après l'intégration de contenu, consultez les sections relatives aux bonnes pratiques ci-dessous pour découvrir de possibles solutions.

Intégrer sous la ligne de flottaison

Dans la mesure du possible, le contenu doit être intégré sous la ligne de flottaison de la page. En effet, le score CLS s'applique au contenu au-dessus de la ligne de flottaison, car il s'agit généralement de ce que le visiteur voit lors du chargement initial de la page. L'intégration de contenu sous la ligne de flottaison réduira tout changement de mise en page initial causé par l'intégration du contenu, améliorant ainsi l'expérience utilisateur et atténuant le score CLS négatif.

Modifier l'emplacement du script d'intégration

Par défaut, le script d'intégration de contenu est inclus dans le code d'intégration (ligne 2 ci-dessous).

<div id="hs-embed-61405464936-1wgzc8">
 <script type="text/javascript" src="[EMBED SCRIPT SRC]">
 </script>
 <script>
 hbspt.content.create({...});
 </script>
</div>

Lors de l'intégration de contenu sur une page externe, il est recommandé de déplacer le script d'intégration vers l'élément <head> de la page plutôt qu'à côté du script de création d'intégration.

Définir une hauteur minimale

La hauteur du conteneur d'intégration de contenu aura un impact sur le déplacement du contenu qui l'entoure pendant le chargement. La hauteur du conteneur dépend des modules et du contenu inclus : plus l'intégration contient de contenu, plus la page se déplace. 

Pour cette raison, si vous intégrez votre contenu au-dessus de la ligne de flottaison, il est recommandé de définir une hauteur minimale de l'intégration en incluant une règle CSS en ligne min-height dans le wrapper de conteneur intégré.

Si vous intégrez du contenu dans un CMS externe, des options de mise en page peuvent être disponibles dans l'éditeur de page externe pour mettre à jour la hauteur d'intégration. Sinon, vous pouvez ajouter manuellement ce style au niveau <div> supérieur du contenu intégré, comme indiqué ci-dessous.

<div id="hs-embed-61405464936-1wgzc8" style="min-height: 500px;">
 <script type="text/javascript" src="[EMBED SCRIPT SRC]"></script>
 <script>
 hbspt.content.create({...});
 </script>
</div>

Remarque : Si vous personnalisez le contenu intégré pour chaque page, vous devrez peut-être mettre à jour la règle de hauteur minimale sur chaque page pour que le contenu s'affiche correctement.

Pour trouver la hauteur minimale, vous pouvez inspecter la page sur laquelle le contenu est intégré. Pour les pages HubSpot, vous pouvez utiliser la fonction d'aperçu de la page pour trouver la hauteur minimale avant de publier la page. Découvrez-en davantage sur la prévisualisation de contenu dans WordPress. 

Lors de l'affichage de la page avec le contenu intégré :

• Cliquez avec le bouton droit de la souris sur l'intégration de contenu, puis sélectionnez Inspecter.
• Dans le panneau de l'inspecteur, placez le curseur sur le niveau <div> supérieur du contenu intégré.
• Pour afficher la hauteur calculée, certains navigateurs affichent la hauteur du conteneur en y plaçant le curseur, ou vous pouvez cliquer sur l'onglet Calculé dans le tiroir des outils de développement et rechercher l'attribut height.