Cómo agregar un archivo JavaScript a HubSpot

Última actualización: December 29, 2016

El Administrador de diseño no solo te permite escribir HTML y CSS, también te permite alojar y editar archivos JavaScript. En este tutorial, agregaremos un archivo JavaScript y lo enlazaremos a nuestro sitio, plantilla o página.

Instrucciones

Sigue estas instrucciones para crear JavaScript dentro del editor de código del Administrador de diseño.

Navegar hasta Administrador de diseño

Para crear un archivo de JavaScript, navegar hasta Administrador de diseño (Contenido > Administrador de diseño).

Navegar hasta Administrador de diseño

Crear un archivo codificado nuevo

Selecciona la carpeta de Archivos de código y haz clic en Nuevo archivo codificado.

Nuevo archivo codificado

Selecciona  Editor de código  y  Página .

Nombrar y guardar el archivo con extensión .js

Debes nombrar tu archivo con una extensión de archivo .js . Quizá también quieras agregar una carpeta nueva para mantener organizados todos tus archivos de JavaScript.

Nombrar el JS

Editar el archivo JavaScript

Teclea o pega tu JavaScript en el editor de código. Presiona Publicar para actualizar tu guión (script) y hacer que tus cambios se muestren en vivo.

Publicar JS

Obtener URL pública

Una vez que hayas creado tu JavaScript, necesitas obtener la URL para referenciar la etiqueta de guión para subir tu archivo. Para obtener tu URL, hacer clic en Acciones > Obtener URL pública.

Obtener URL pública

La URL está en la forma de un código de HubL (Lenguaje de marcado de HubSpot) que traducirá la ruta URL para tu archivo de Javascript. Cada vez que actualices tu guión, la URL cambia, por lo tanto, usar el código HuBL para enlazar tu guión (script) siempre cargará la versión más reciente.  

Haz clic en Copiar para copiar la URL.

Etiqueta URL pública

Incluir el guión

Después de que tengas la etiqueta HubL para generar la URL de tu guión (script), puedes agregarla al atributo src de tu etiqueta de guión. Puedes ver un ejemplo en la captura de pantalla a continuación.

Aunque que los guiones se pueden agregar a tu sitio entero o a una sola página, se recomienda que los guiones se agreguen al <head> o a un módulo de HTML en el pie de página global de tu plantilla. Esto garantiza que solo cargues los guiones necesarios a las páginas que usan una plantilla determinada. Para acceder a la etiqueta de encabezado del diseño de una plantilla, hacer clic en Editar > Editar encabezado.

Captura de pantalla de un artículo de ayuda de HubSpot

Alternativamente, puedes agregar el guión a un módulo HTML en el pie de página global de tu plantilla. 

Captura de pantalla de un artículo de ayuda de HubSpot

Usar plugins de jQuery y guiones (scripts) externos en el COS

A continuación hay información adicional acerca del uso de plugins de jQuery y guiones externos en el COS.

jQuery está incluido en todas las páginas de COS

Cada diseño o plantilla codificada de HubSpot incluye automáticamente jQuery 1.71 o 1.11x en la etiqueta del encabezado de la página. Aquí puedes aprender acerca de qué versión de jQuery cargar . 

Seleccionar la versión de jQuery

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: