Uso de inserción de código

Inserta HTML o scripts personalizados en las páginas de tu sitio.

Última actualización: 3 de febrero de 2025

Puedes usar inserción de código para agregar HTML y secuencias de comandos que mejoran partes específicas del sitio. Estos pueden incluir servicios de chat en vivo, verificación de dominio para servicios de correo electrónico personalizados o datos analíticos del sitio.

La inserción de código no está diseñada para agregar contenido o estilos. Para agregar contenido a tu sitio, consulta Conceptos básicos de páginas y contenido. Para agregar CSS personalizado para estilos, usa el Editor de CSS personalizado.

Cómo acceder a esta función

La inserción de código está disponible en los planes Core, Plus, Advanced, Empresa, Commerce Básico y Commerce Avanzado. Para informarte mejor, visita Elegir el plan de Squarespace adecuado.

Mira el video

Antes de comenzar

Agregar código a la inserción de código

Para agregar código personalizado a la inserción de código:

  1. Abre el Panel de inserción de código.
  2. Agrega HTML o scripts válidos a los campos de inserción de código apropiados para el encabezado, pie de página, página de bloqueo, página de confirmación de pedido o página de estado del pedido.
  3. Luego de añadir el código, haz clic en Guardar.

Encabezado

El código agregado aquí es inyectado a la etiqueta en cada página del sitio.

Pie de página

El código agregado aquí se inserta antes de la etiqueta de cierre en cada página del sitio.

Integra tu código insertado con el banner de cookies

Si agregas integraciones de terceros a tu sitio mediante la inserción de código (por ejemplo, Google Ads), ese código puede colocar cookies en los navegadores de los visitantes. Si habilitas el banner de cookies en tu sitio, puedes usar la inserción de código para cambiar el comportamiento de estas integraciones de terceros, dependiendo de si el visitante ha otorgado su consentimiento para las cookies o no.

Tus visitantes pueden proporcionar sus opciones de consentimiento si completas los siguientes pasos:

  1. Habilita tu banner de cookies abriendo el panel de Cookies y datos de los visitantes y activando la opción junto a banner de cookies.
  2. Selecciona el tipo de banner de cookies Opt in & out, que muestra dos botones personalizables para que los clientes acepten o rechacen las cookies de tu sitio.
  3. Haz clic en Guardar.
  4. Agrega el código necesario. Revisa el siguiente ejemplo para obtener más información.

Usando Google Ads como ejemplo, si agregaste Google Ads a tu sitio mediante inserción de código, mira esta publicación del foro para ver el código de ejemplo que puedes agregar para integrar tu código de Google Ads con el banner de cookies.

Si usas Google Analytics a través de nuestra integración oficial, no es necesario agregar código en este campo. Después de guardar tu ID de medición, activa tu banner de cookies.

Nota

El modo de consentimiento es una función proporcionada por Google. Para obtener más información, visita la documentación de Google. Además, las modificaciones del código personalizado quedan fuera del alcance de nuestro servicio de atención al cliente. Deberías consultar con Google Ads si necesitas soporte para la configuración o solución de problemas.

Página de bloqueo

La pantalla de bloqueo aparece cuando una página o sitio está oculto detrás de una contraseña de todo el sitio o la página. El código insertado aquí aparece sobre el campo de contraseña de la pantalla de bloqueo.

Aunque puedes añadir el código a este campo, te recomendamos que uses el panel de la pantalla de bloqueo para diseñar tu página de bloqueo. De este modo, puedes añadir una imagen de fondo o diapositivas, cambiar los estilos de las fuentes, incluir tu logo y mucho más.

Página de confirmación del pedido

El código agregado aquí se inserta en la página de confirmación del pedido que aparece después de que un cliente finaliza la compra de tarjetas regalo, membresías y suscripciones.

Hay seis etiquetas que puedes usar para insertar información específica para el cliente. Si una compra se divide porque contiene varios perfiles de logística, se mostrarán los detalles de cada pedido de la compra.

  • {orderId}: el número del pedido confirmado
  • {orderSubtotal}: subtotal de un pedido confirmado
  • {orderSubtotalCents}: el subtotal del pedido confirmado, en centavos
  • {orderGrandTotal}: total de un pedido confirmado
  • {orderGrandTotalCents}: el total del pedido confirmado, en centavos
  • {customerEmailAddress}: la dirección de correo electrónico del cliente, tal como se ingresó en la sección "Tu correo electrónico" en el área de pago

Página de estado de los pedidos

El código que agregues aquí se inserta en la página de estado del pedido, que es la página de confirmación que aparece después de que un cliente utilice el área de pago con productos físicos, de descarga o de servicio. Los clientes también pueden volver a esta página después para verificar el estado de su pedido. 

Hay seis etiquetas que puedes usar para insertar información específica para el cliente. Si una compra se divide porque contiene varios perfiles de logística, se mostrarán los detalles de cada pedido de la compra.

  • {orderId}: el número del pedido confirmado
  • {orderSubtotal}: subtotal de un pedido confirmado
  • {orderSubtotalCents}: el subtotal del pedido confirmado, en centavos
  • {orderGrandTotal}: total de un pedido confirmado
  • {orderGrandTotalCents}: el total del pedido confirmado, en centavos
  • {customerEmailAddress}: la dirección de correo electrónico del cliente, tal como se ingresó en la sección "Tu correo electrónico" en el área de pago

Los clientes pueden visitar la página de estado del pedido de forma reiterada, lo que podría activar scripts de seguimiento varias veces. Para evitar contar al mismo cliente dos veces con scripts de seguimiento, coloca los scripts que solo quieras ejecutar en la primera visita a la página de estado del pedido después de pagar entre las etiquetas {.if firstPageView}y {.end}. Por ejemplo:

{.if firstPageView}

Agrega los scripts de seguimiento que quieres ejecutar solo después de finalizar la compra aquí.

{.end}

Agrega los scripts que quieres ejecutar en cada visita aquí.

Migrando el código personalizado de tu página de confirmación de pedidos

Actualizamos la página de confirmación de pedidos para productos físicos, digitales y de servicio. Los clientes que compran estos tipos de productos llegan a una página que muestra el estado del pedido, sus detalles y la opción de crear una cuenta de cliente.

Si este banner se muestra en el panel de inserción de código, significa que agregaste inserción de código a la página de confirmación del pedido original y esta actualización no se ha aplicado a tu sitio. 

MigrateOrderConfirmationCode.png

Para aplicar esta actualización a tu sitio y enviar a los compradores a la nueva página de confirmación de pedidos después de pagar productos digitales, físicos y de servicio: 

  1. Copia el código en el campo de la página de confirmación del pedido. 
  2. Pégalo en el campo de la página de estado del pedido. 
  3. Haz clic en Guardar
  4. Haz clic en Migré mi código personalizado.

Hasta que sigas estos pasos, todos los compradores llegarán a la página de confirmación del pedido original después de finalizar el pago de todas las compras.

Inserción de código por página

También puedes insertar código en una página específica:

  1. Posiciona el cursor sobre la página en el panel Páginas.
  2. Haz clic en el icono .
  3. Haz clic en Avanzado.

Inserción de código del encabezado de página agrega código a la etiqueta de esa página.

En la configuración de la página de blog, Inserción de código en una publicación del blog añade código a cada publicación del blog.

La forma en que aparece la inserción de código depende de la versión del sitio.

Ten en cuenta lo siguiente:

  • No recomendamos usar HTML en la Inserción de código del encabezado de página. Si lo haces, el código no aparecerá si desactivas la transparencia del encabezado de tu sitio.
  • Inserción de código en una publicación del blog aparece debajo del contenido de la publicación.

Ten en cuenta lo siguiente:

  • La inserción de código no aparecerá en las páginas de aterrizaje del índice.
  • Dependiendo de tu plantilla, Inserción de código en una publicación del blog aparece en la parte superior o inferior del contenido de la publicación.
  • En las plantillas con la Página de blog en cuadrícula o lista, el código se muestra en la página de aterrizaje del blog y no en publicaciones individuales.

Deshabilitar scripts en la vista previa

En ocasiones, el código personalizado puede impedir que edites tu sitio de manera segura. Cuando estamos ayudándote a solucionar los problemas, tal vez te pidamos que deshabilites los scripts en la vista previa. Esto significa que no verás tu código personalizado mientras estés con la sesión activa. De todos modos, esto no afectará cómo se ve tu sitio para quienes lo visitan.

Verás este mensaje en la parte inferior de tu sitio si el código está interfiriendo:

Detectamos un error al cargar la vista previa de tu sitio. Esto usualmente es producto de un código inyectado.

Para editar de manera segura, haz clic en Deshabilitar scripts en la vista previa, en la parte inferior de tu sitio. El mensaje cambiará a Se han deshabilitado los scripts en la vista previa de tu sitio. Para ver tu código personalizado, abre una nueva ventana privada o incógnito en tu navegador e ingresa la URL de tu página.

Si el mensaje de scripts deshabilitados no aparece automáticamente:

  1. Solicita que el mensaje aparezca escribiendo /safe directamente después de /config al final de tu URL de edición segura y, a continuación, presionando Enter.
  2. Si no funciona, revisa las áreas en las que hayas añadido código personalizado para eliminarlo transitoriamente mientras solucionas los problemas.

Después de deshabilitar tu código, tal vez veas un mensaje de ¿Habilitar scripts en la vista previa?. No recomendamos presionarlo porque podría interferir en tu capacidad de hacer una vista previa, editar o ejecutar el sitio cuando has iniciado sesión. No es posible ocultar este mensaje, pero solo lo verás cuando hayas iniciado sesión; no es visible para los que visitan el sitio.

Nota

Las modificaciones de código personalizado están fuera del alcance de nuestro soporte. Esto significa que no podemos ayudarte más con la configuración o la resolución de problemas. Además, con una solución basada en un código, no podemos garantizar su funcionamiento o la compatibilidad total con Squarespace. Esto incluye cómo funciona con nuestro diseño adaptable, en especial su aspecto en dispositivos móviles y sus funciones en todas las plantillas. El código personalizado también pueden ocasionar problemas de visualización con actualizaciones futuras de nuestra plataforma. Aunque no podemos ayudarte más, hay muchos recursos que te pueden orientar en la dirección correcta:

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.