Comment ajouter un fichier JavaScript dans HubSpot

Dernière mise à jour: August 8, 2018

Disponible avec :

Le Gestionnaire de conception permet d'écrire des codes HTML et CSS, mais aussi d'héberger et de modifier des fichiers JavaScript. Cet article explique comment ajouter un fichier JavaScript et le lier à un site web, un modèle ou une page.

Instructions

Suivez ces instructions pour créer des fichiers JavaScript dans l'éditeur de code du gestionnaire de conception.

Accéder au Gestionnaire de conception

Pour créer un fichier JavaScript, accédez au gestionnaire de conception (Contenu > Gestionnaire de conception).

Navigate to Design Manager

Créer un nouveau fichier codé

Sélectionnez le dossier Fichiers codés puis cliquez sur Nouveau fichier codé.

New coded file

Sélectionnez Éditeur de code et Page.

Nommer et enregistrer un fichier avec une extension .js

Vous devez attribuer au fichier un nom comportant une extension .js. Il est conseillé de créer un nouveau dossier afin de bien organiser les fichiers JavaScript.

Name JS

Éditer le fichier JavaScript

Tapez ou collez le code JavaScript dans l'éditeur de code. Cliquez sur Publier pour effectuer la mise à jour du script et publier les modifications.

Publish JS

Obtenir une URL publique

Dès que vous avez créé le code JavaScript, vous devez obtenir une URL afin d'y faire référence dans la balise du script et charger le fichier.  Pour l'obtenir, cliquez sur Actions > Obtenir une URL publique.

Get public URL

Cette URL se présente sous la forme d'un jeton HubL (le langage de balisage de HubSpot) qui indiquera l'URL du fichier JavaScript. L'URL étant modifiée dès que vous effectuez une mise à jour du script, l'utilisation d'un jeton HubL permet d'en charger la dernière version.  

Cliquez sur Copier pour copier l'URL.

Public URL tag

Intégrer le script



Dès que la balise HubL a généré l'URL d'un script, vous pouvez l'ajouter à l'attribut src de la balise du script.

Les scripts peuvent être ajoutés à une seule page ou au site entier, mais il est conseillé de les ajouter à la balise ou à un module HTML du pied de page global d'un modèle. Ainsi, vous chargerez uniquement les scripts nécessaires sur des pages utilisant un modèle précis. Pour accéder à la balise d'en-tête d'une mise en page de modèle, cliquez sur Modifier > Modifier l'en-tête.Ajoutez le code suivant dans la case Balise HTML d'en-tête supplémentaire pour cette mise en page :

HubSpot Help article screenshot

Il est également possible d'ajouter le même code à un module HTML personnalisé du pied de page global d'un modèle. 

HubSpot Help article screenshot

Utiliser des plug-in jQuery et des scripts externes dans le COS

Ci-dessous, vous trouverez des informations supplémentaires pour utiliser des plug-in jQuery et des scripts externes dans le COS.

Le framework jQuery est inclus dans chaque page du COS.

Chaque mise en page ou modèle codé de HubSpot inclut automatiquement le framework jQuery 1.71 ou 1.11x dans la balise d'en-tête de la page. Cliquez ici pour en savoir plus sur la version de jQuery à charger. 

Select jQuery version

Table des matières

    Article précédent:

    Article suivant: