Artículos en esta sección

Más información

Código personalizado

  • Actualización

El editor es flexible: puedes modificar el código existente o añadir el tuyo propio. Así amplías las funciones de la plataforma y desbloqueas funciones adicionales. Por ejemplo, puedes incorporar un widget de calendario propio o un formulario de contacto de un tercero para cobrar pagos en tu sitio.

Cómo añadir código personalizado

Puedes añadir código personalizado con el widget HTML. Aquí tienes las instrucciones para usarlo.

Nota:

  • El código que deba verse en el sitio va en un widget HTML. El código que no se ve suele ir en el header. En general, lo mejor es seguir primero las indicaciones de quien escribió el código antes de añadirlo a tu sitio.
  • No puedes subir ni ejecutar archivos PHP. Los lenguajes de servidor, como PHP, no son compatibles, ya que la plataforma no ofrece ejecución en el servidor ni acceso al sistema de archivos.

Widget HTML

El widget HTML es la forma más sencilla de añadir código personalizado a tu sitio. Según dónde lo coloques, aparecerá en todas las páginas o solo en una. Si lo pones en el header o en el footer, se añade a la vez a todas las páginas del sitio, porque todas comparten el mismo header y footer. Si lo colocas en cualquier otro lugar, solo aparece en el body.

Para añadir un widget HTML:

  1. En el panel lateral, haz clic en Añadir y luego en Elements.
  2. Busca HTML, arrastra el widget hasta una columna o una fila de tu sitio y pega tu código.

Código personalizado en el header

Puedes colocar código en el header de todo el sitio o en el header de una página concreta.

Nota: las apps de gestión de consentimiento no pueden evitar que el código se ejecute antes del consentimiento si está en el HTML del header. El motivo es que optimizamos la estructura y el orden de carga del contenido según las mejores prácticas de rendimiento: colocamos los scripts y los banners de CMP más abajo en la página para que el contenido principal cargue antes. Por eso, si usas una app de gestión de consentimiento, conviene colocar el código al final del body.

Header de todo el sitio

Para colocar el código en el header de todo el sitio:

  1. En el panel lateral, haz clic en Más y luego en Configuración.
  2. Haz clic en CABECERA HTML.
    • Head HTML. Añade contenido en el campo de la sección head.
    • Body End HTML. Añade HTML/JavaScript propio justo antes de la etiqueta de cierre del elemento <body> de cada página del sitio.
  3. Pega tu código y guarda.

Header de una sola página

Para colocar el código en el header de una sola página:

  1. En el panel lateral, haz clic en Páginas.
  2. En la página donde quieres añadirlo, haz clic en el icono de ajustes.
  3. Haz clic en SEO.
  4. Baja hasta HTML del Encabezado.
  5. Pega aquí tu código y guarda.

Mi código desaparece al colocarlo en la sección head

Es habitual que los códigos de seguimiento por píxel desaparezcan al colocarlos en el header. La sección head <head> no acepta código con <img>, <iframe> ni similares. Por lo general, solo admite <link>, <script> y <meta>.

Si necesitas pegar código que no se guarda en la sección head, pégalo en el campo HTML de final del cuerpo. Para ello, sigue los pasos de la sección «Código personalizado después de la etiqueta body de apertura» de este artículo.

Código personalizado después de la etiqueta body de apertura

Por ahora no existe una función para colocar código justo después de la etiqueta body de apertura. Sin embargo, puedes pegarlo en el campo HTML de final del cuerpo de Configuración.

Para pegar código en el campo HTML de final del cuerpo:

  1. En el panel lateral, haz clic en Más y luego en Configuración.
  2. Haz clic en CABECERA HTML.
  3. Pega tu código en el campo HTML de final del cuerpo.
  4. Haz clic en Guardar.

Código personalizado en elementos o widgets

Muchos elementos, entre ellos las filas, las columnas y los widgets, permiten acceder a su HTML/CSS.

Si estás en el modo flex del Classic Editor o en el Editor 2.0:

  • Puedes editar el CSS de los contenedores flex (sección, columna, columna interior y cuadrícula avanzada). En el Editor 2.0 también puedes editar el CSS de los headers y los footers.
  • Es posible que el panel de diseño no refleje todos los cambios del código personalizado, lo que puede provocar diferencias de estilo entre el panel de diseño y los elementos en línea.

Para añadir código a cualquier elemento o widget:

  1. En el Classic Editor, haz clic con el botón derecho en tu widget o elemento para abrir el menú contextual.
  2. Si estás en el modo flex del Classic Editor o en el Editor 2.0, haz clic para seleccionar el contenedor flex, el header o el footer.
  3. Haz clic en Editar HTML/CSS. Si estás en el modo flex del Classic Editor o en el Editor 2.0, haz clic en el icono de tres puntos del menú flotante y selecciona Editar CSS.
  4. Edita o añade el código aquí, según lo necesites.
  5. Haz clic en Actualizar.

Puede que tengas que recargar el navegador para ver el cambio.

Añadir código de seguimiento a un formulario de contacto

Para añadir código de seguimiento a un formulario de contacto:

  1. Ve a la página donde está tu formulario de contacto.
  2. Haz clic en el formulario de contacto para abrir las opciones.
  3. Haz clic en Envío.
  4. Haz clic en Seguimiento.
  5. Pega aquí tu código de seguimiento de conversiones.

Recomendaciones para el código personalizado

Estas son las recomendaciones que conviene seguir al trabajar con código personalizado.

Recomendaciones generales

  • Si el código debe ir en una página, crea una página de prueba y colócalo ahí.
  • La vista previa usa HTTPS, pero tu sitio publicado puede que no. Esto suele hacer que el código personalizado deje de funcionar.
  • Asegúrate de mantenerte dentro de las columnas. Nuestros sitios responsivos se basan en una estructura de filas y columnas: cada fila contiene columnas, que son las que finalmente albergan el contenido. Cuando añadas o edites tu propio HTML, comprueba que quede dentro de una columna.

Solución de problemas con el código personalizado

Si has añadido código personalizado que afecta al rendimiento de tu sitio o te impide editarlo, lo más probable es que el código no esté bien formateado o no cumpla con HTTPS. Aquí tienes soluciones para los problemas que pueden surgir al trabajar con código personalizado.

Deshacer un cambio o restaurar una versión anterior

Si el código personalizado ha estropeado tu sitio, o simplemente quieres volver atrás, deshaz los últimos cambios en el editor.

Si el problema viene de más atrás que tu historial, o el editor ya no se abre, escribe al soporte de Smoobu. El equipo puede restaurar la página a una versión anterior por ti.

Mensajes de error concretos

Estos son algunos mensajes de error concretos y lo que significan:

  • DUPLICATE_ID. Cada elemento debe tener un ID único.
  • INVALID_ELEMENT_LOCATION. Todos los elementos deben estar en una columna, que a su vez debe estar en una fila.
  • BAD_PROPORTION. Las columnas de una fila deben sumar 12.
  • INVALID_CLASS_FOR_ELEMENT. Se ha asignado una clase del Creador de sitios web a un elemento no válido.

El código no funciona

Si tienes código que no funciona en el sitio, lo más probable es que no esté bien formateado o que no sea HTTPS.

Si tu código contiene enlaces (http:// o //) y tu sitio usa HTTPS o estás en la vista previa, tendrás que cambiarlos a https://. El motivo es que el código sin HTTPS no funciona en una conexión cargada por HTTPS (la vista previa del sitio, el editor, etc.).

No se puede abrir el editor

Si no puedes acceder al editor cuando tu sitio carga por primera vez, intenta abrirlo en una página nueva añadiendo otra ruta de página al final de tu enlace del editor (por ejemplo, /about). Una vez allí, puedes eliminar la página que da problemas y volver a crearla.

Si el editor no responde, también puedes forzar su apertura con el atajo de teclado del inspector de elementos. En Mac, el atajo es Command+Option+C. En PC, el atajo es Ctrl+Alt+C.

Cargar la versión no segura del editor

Carga la versión no segura del editor para cargar scripts que no se hayan incluido a través de una conexión segura. Para ello, abre el editor mediante una conexión no segura añadiendo ?nossl a la URL de tu editor.

Problema de velocidad de la página

La optimización de la velocidad de la página influye en cómo se ejecutan ciertos scripts. Aplicamos la optimización PageSpeed en la mayoría de las páginas, lo que puede causar problemas con tu código personalizado.

Para saber si un problema de velocidad afecta a tu código personalizado:

  1. Duplica la página que contiene tus scripts.
  2. Cambia la URL a «testing_scripts».
  3. Publica y comprueba la página en tu sitio publicado.
  4. Si tu código funciona en esa página, ponte en contacto con el soporte para que desactive la optimización de velocidad de tu sitio.

Si usas un script, también puedes intentar que se ejecute de forma asíncrona. No es una garantía, pero a veces resuelve el problema de que los scripts no se ejecuten bien en el navegador.

Para activar async en los scripts, modifica tu código así:

  • Código antiguo: <script src="https://example.com/script.js"></script>
  • Código nuevo: <script src="https://example.com/script.js" async defer></script>

Artículos relacionados

Comentarios

0 comentarios

El artículo está cerrado para comentarios.