Créer et ajouter un fichier JavaScript à HubSpot

Créez et ajoutez des fichiers JavaScript dans le gestionnaire de conception pour personnaliser la fonctionnalité de votre contenu hébergé par HubSpot. Créez un fichier JavaScript, joignez-le à un modèle ou ajoutez-le à l’ensemble d’un domaine ou à des pages individuelles.

Par exemple, utilisez un fichier JavaScript pour ajouter des éléments interactifs, intégrer des scripts tiers ou personnaliser le comportement d’une page au-delà des modules standard. 

Avant de commencer

Avant de travailler avec des fichiers JavaScript, vérifiez les exigences et considérations suivantes.

Compréhension des limites et des considérations

• La publication des modifications permet aux mises à jour de s’afficher immédiatement sur les modèles ou les pages associés.
• L’ajout de JavaScript au niveau du domaine applique le script à toutes les pages hébergées par HubSpot sur ce domaine.

Créer un fichier JavaScript

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez sur le menu déroulant Fichier et sélectionnez Nouveau fichier.
3. Dans la boîte de dialogue, cliquez sur le menu déroulant What would you like to build today ? et sélectionnez JavaScript. Cliquez ensuite sur Suivant.
4. Dans le champ Nom du fichier, saisissez un nom pour votre fichier JavaScript.
5. Pour mettre à jour l'emplacement du fichier, dans la section Emplacement du fichier, cliquez sur Modifier et sélectionnez le dossier auquel ajouter le fichier.
6. Cliquez sur Créer. 
7. Saisissez votre code JavaScript dans l’éditeur de code.
8. Si vous avez activé ESLint, affichez les avertissements ou les erreurs JavaScript en activant l’option Afficher la sortie .

9. Lorsque vous avez terminé, cliquez sur Publier les modifications dans l’angle supérieur droit.

Joindre un fichier JavaScript à un modèle de glisser-déposer

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez sur le modèle que vous souhaitez mettre à jour.
3. Dans l’inspecteur à droite, cliquez sur l’onglet Modifier .
4. Dans la section Fichiers JavaScript liés, cliquez sur le menu déroulant Ajouter et sélectionnez votre fichier JavaScript.
5. Lorsque vous avez terminé, cliquez sur Publier les modifications dans l'angle supérieur droit.

Joindre un fichier JavaScript à un modèle codé

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez sur le modèle que vous souhaitez mettre à jour.
3. Dans l’éditeur de code, saisissez la fonction HubL require_js . Découvrez-en davantage sur l’utilisation de la fonction HubL require_js.

Ajouter un fichier JavaScript aux pages HubSpot

Ajoutez un fichier JavaScript sur toutes les pages d’un domaine hébergé par HubSpot ou sur des pages individuelles en utilisant l’URL publique.

Accéder à l’URL publique d’un fichier JavaScript

1. Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez sur le nom du fichier JavaScript. Cliquez ensuite sur le menu déroulant Actions et sélectionnez Copier l’URL publique.

Ajouter un fichier JavaScript à toutes les pages d’un domaine

1. Dans votre compte HubSpot, cliquez sur l'icône Paramètres settings dans la barre de navigation principale.
2. Dans le menu latéral de gauche, naviguez vers Content > Pages.
3. Cliquez sur le menu déroulant Sélectionnez un domaine pour modifier ses paramètres et sélectionnez le domaine auquel ajouter le fichier JavaScript. Pour appliquer le fichier JavaScript à tous les domaines connectés, sélectionnez Paramètres par défaut pour tous les domaines.
   
4. Dans la section Pied de page HTML du site, collez l’URL publique comme valeur de la source de la balise de script : 

<!-- start example.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End example.js-->

5. Lorsque vous avez terminé, cliquez sur Enregistrer dans l’angle inférieur gauche.

Ajouter un fichier JavaScript à une page individuelle

Remarque : Les paramètres avancés ne sont pas disponibles dans les modèles de démarrage.

1. Accédez à votre contenu :
   • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
2. Cliquez sur le nom de votre page.
3. Dans l'éditeur de contenu, cliquez sur le menu Paramètres et sélectionnez Avancé.
4. Dans la section Pied de page HTML de la boîte de dialogue, collez l’URL publique comme valeur de la source de la balise de script :

<!-- start example.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End example.js-->

5. Lorsque vous avez terminé, cliquez sur Publier ou Mettre à jour dans l’angle supérieur droit.