Insertar contenido utilizando un código de inserción

Con la característica de integración de contenido, puedes crear secciones de contenido en HubSpot y luego insertarlas en tu sitio web. Para agregar una integración de contenido a una página externa del sitio web, puedes utilizar el complemento de integración de contenido para el editor Gutenberg de WordPress, o copiar el código de inserción directamente en HubSpot.

A continuación, obtén más información sobre cómo copiar el código de integración de contenido, junto con las mejores prácticas para mantener la calificación del Cambio de diseño acumulado (CLS) de tu página.

Nota: el contenido incrustado no se carga a través de un iframe, sino que se inyecta mediante JavaScript. Los motores de búsqueda pueden ejecutar JavaScript y detectarán el contenido incrustado, por lo que se evitan los problemas de SEO que pueden presentar los iframes.

Copia el código de incrustación

Para copiar el código de incrustación de una sección de integración de contenido:

• En tu cuenta de HubSpot, dirígete a Contenido > Integraciones.
• Coloca el cursor sobre un código de inserción, haz clic en Más y selecciona Obtener código de inserción.
  
  
• En el cuadro de diálogo, haz clic en Copiar para copiar el código de incersión.

A continuación, puedes pegar el código de inserción en tu contenido externo según sea necesario. Cuando pegues el código de inserción, ten en cuenta lo siguiente:

• Una integración de contenido recibe su estilo de la página en la que está insertada, no de HubSpot. Para ajustar la apariencia de la integración de contenido, tendrás que actualizar el CSS de la página. Si utilizas WordPress, aprende a agregar CSS personalizado.
• El código de la integración del contenido no incluye tu código de seguimiento de HubSpot. Tendrás que instalar por separado el código de seguimiento en páginas externas para aprovechar funciones de HubSpot como análisis de tráfico y banners de consentimiento privado.
• Para insertar contenido a través del código de inserción, HubSpot inserta la integración de contenido a través del pie de página del dominio hs-sites predeterminado. Esto ayuda a conservar los pies de página específicos de tu dominio. Sin embargo, cualquier contenido incluido en el pie de página de hs-sites se insertará en la página externa junto con la integración de contenido. Por ejemplo, si tienes una exención de derechos de autor en el pie de página del dominio de hs-sites, los derechos de autor aparecerán en la página externa con el contenido incrustado. Aprende a modificar el contenido de los pies de página específicos de cada dominio.
  
  

Comprende las mejores prácticas para incrustar contenidos

Dependiendo de cómo utilices el código de inserción, es posible que el contenido afecte a la calificación del Cambio de diseño acumulado (CLS) de tu página, que mide cuánto se desplaza el contenido de tu página en el viewport del visitante mientras se carga. Hay dos factores que influirán en tu calificación de CLS:

• La ubicación de la incrustación, incluyendo si es por encima o por debajo del pliegue y donde está incrustado el script.
• La altura de la incrustación, que está directamente relacionada con los módulos incluidos en la integración de contenido. Cuantos más módulos se incluyan, más cambiará el diseño de tu página a medida que se cargue el contenido.

Si observas un impacto negativo en tu calificación de CLS después de insertar contenido, revisa las secciones de las mejores prácticas que aparecen a continuación para encontrar posibles soluciones.

Insertar debajo del pliegue

Cuando sea posible, el contenido debe insertarse debajo del pliegue de la página. Esto se debe a que la calificación de CLS se aplica al contenido de la mitad superior de la página, ya que suele ser lo que el visitante ve en la carga inicial de la página. La integración de contenido por debajo del pliegue reducirá cualquier desplazamiento inicial del diseño causado por la integración de contenido, mejorando la experiencia del usuario y mitigando la calificación de CLS negativa.

Cambiar la ubicación del script de incrustación

Por defecto, el código de la integración del contenido incluye el script de inserción en su interior (línea 2 de abajo).

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

Al insertar contenido en una página externa, se recomienda mover el script de incrustación a la dirección <head> de la página en lugar de hacerlo junto al script de creación de incrustaciones.

Establece una altura mínima

La altura del contenedor de la integración de contenido influirá en cuánto se desplaza el contenido a su alrededor mientras se carga. La altura del contenedor depende de los módulos y contenidos incluidos: cuanto más contenido haya en el incrustado, más se desplazará la página. 

Por este motivo, si insertas tu contenido en la mitad superior de la página, se recomienda establecer una altura mínima de la inserción incluyendo una regla CSS en línea min-height en la envoltura del contenedor de inserción.

Si estás insertando contenido en un CMS externo, puede que haya opciones de diseño disponibles en el editor de páginas externas para actualizar la altura de inserción. De lo contrario, puedes agregar manualmente este estilo al nivel superior del contenido insertado <div>, como se muestra a continuación.

<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>

Nota: si personalizas el contenido insertado por página, puede que tengas que actualizar la regla de altura mínima en cada página para que el contenido se muestre correctamente.

Para encontrar la altura mínima, puedes inspeccionar la página en la que está insertado el contenido. Para las páginas de HubSpot, puedes utilizar la función de vista previa de la página para encontrar la altura mínima antes de publicarla. Más información sobre previsualizar contenido en WordPress. 

Mientras visualizas la página con el contenido insertado:

• Haz clic con el botón derecho del ratón en la integración de contenido, y selecciona Inspeccionar.
• En el panel del inspector, coloca el cursor sobre el nivel superior <div> del contenido insertado.
• Para ver la altura calculada, algunos navegadores mostrarán la altura del contenedor al pasar el ratón por encima, o puedes hacer clic en la pestaña Cálculo del cajón de herramientas del desarrollador y buscar el atributo altura.