Cómo usar JavaScript personalizado y CSS en tu landing page

Unbounce dispone de una amplia colección de widgets nativos en la propia aplicación que podrás incorporar a tu landing page con sólo arrastrar y soltar. Sin embargo, si necesitas una función en tu landing page no disponible en Unbounce, siempre tienes la opción de agregarla usando JavaScript y CSS (¡como si de una página web normal se tratase!). Este tipo de funcionalidades personalizadas se incorporan a tu landing utilizando jQuery (JavaScript) o Stylesheets (CSS). Es importante tener en cuenta que, aunque estamos encantados de que personalices tu página,, nuestro equipo solo puede ofrecer asistencia al cliente para el editor principal y la biblioteca de widgets en la aplicación, no para tus funcionalidades personalizadas.

Si te surge cualquier tipo de duda sobre tu codigo, te invitamos a que la publiques en nuestra comunidad. Estamos seguros que uno de los muchos expertos que forman parte de ella tendrá la solución.

En este artículo aprenderás cómo:

  • Añadir código personalizado a tu landing page.
  • Configurar el Administrador de Scripts para tu código personalizado.
  • Migrar Scripts existentes al Script Manager.
  • Añadir widgets personalizados a tu landing page.

Cualquier página que esté publicada incluye jQuery

JQuery es una biblioteca multiplataforma de JavaScript con un gran API de plugins. JQuery 1.4.2 se incluye en todas las páginas de forma predeterminada.

Existe una gran variedad de plugins de jQuery disponibles. Todos ellos deberían ser bastante sencillos de implementar, siempre y cuando tengas un conocimiento básico de JavaScript y HTML.


Cómo insertar Scripts personalizadas en tu landing

Verás un botón en el lado izquierdo inferior del editor llamado Javascripts. Se parecerá a este:

Al hacer clic en éste se iniciará un cuadro de diálogo en el que puedes pegar tu JavaScript:

Puedes elegir dónde deberá colocarse el Script en el documento, aunque por defecto se ubica en Before Body End Tag (antes de </ body>), pero puedes cambiarlo a After Body Tag (después de <body>) o Head  (En la sección <head>), dependiendo del objetivo del Script.

Alternativamente, si envuelves el Script en una función jQuery $(function(){ tu-function-aqui; }) solo se ejecutará cuando la página se haya cargado.

Sea cual sea el script que incluyas, asegúrate de envolverlo en etiquetas <script>, como menciona el diálogo. Además, es importante tener en cuenta que el script sólo se ejecutará en modo de vista previa, o en una página publicada (y no en el editor).


Cómo incluir CSS personalizado

Incluir estilos CSS personalizados en tu landing es un proceso similar al anterior. El botón en la parte inferior izquierda del editor se llama Stylesheets y se ve así:

Si puedes aplicar un CSS en una página web normal, lo puedes aplicar en Unbounce. Encontrarás la clase/ID de cada objeto en tu página seleccionando primero ese objeto en el editor Unbounce y luego en el panel de propiedades bajo la sección Advanced (Avanzado). Esto te permitirá escribir reglas CSS para elementos específicos (a cada elemento se le asigna un ID único).


¿Me ayudarán a solucionar mis problemas con JavaScript y CSS personalizados?

Desafortunadamente, no podemos proporcionar soporte técnico para ningún Script o CSS personalizados que agregues a tu página. Nuestro equipo de desarrollo está trabajando muy duro para mejorar el editor principal y construir una biblioteca de widgets que no requieran ningún tipo de trabajo de script personalizado. Si estás realmente atascado con algo, puedes intentar publicar tu pregunta en nuestra comunidad de apoyo online. Del mismo modo, si has escrito JavaScript o CSS personalizado de los que crees que alguien podría beneficiarse, ¡por favor, publícalo también en el foro!


Script Manager: Cómo añadir tus Scripts

¿Qué es Script Manager?

Script Manager (Administrador de Scripts) te permite aplicar scripts en todas las páginas de un dominio (o varios dominios) a través de un solo proceso. Si tienes scripts (como Google Analytics) que necesitas aplicar a muchas páginas, Script Manager te va a hacer la vida mucho más fácil.

Esta función requiere tu propio dominio personalizado. No puedes utilizar esta función con el dominio de prueba 'unbouncepages.com'

Cómo añadir Scripts

Si tienes páginas en un dominio que ya contiene el script que quieres añadir, esto puede provocar que el código se ejecute dos veces. Asegúrate de eliminar el script a nivel de página antes de añadirlo a un nivel de dominio para evitar conflictos.

Para agregar un script:

  1. Haz clic en Settings (Configuraciones) en el menú de la izquierda.
  2. Haz clic en Script Manager
  3. Si este es el primer script que agregas a varias páginas, se te pedirá que añadas un Script. De lo contrario, haz clic en el botón verde Add Script (Añadir Script) situado en la parte superior izquierda de la pantalla.
  4. Introduce un nombre para tu Script y haz clic en el botón Add Script Details (Agregar detalles de Script).
  5. Utiliza el primer menú desplegable para elegir la ubicación de tu Script. 
  6. Utiliza el segundo menú desplegable para elegir si quieres agregar el Script a tus páginas principales (Main landing page), a las páginas del diálogo de confirmación (Form confirmation page) o a ambas (Main landing page + Form confirmation dialog). 
  7. Pega o escribe el Script en la ventana del editor 
  8. Elige los dominios a los que te gustaría añadir tu Script usando las casillas de verificación a la derecha.
  9. Haz clic en el botón Save Changes (Guardar cambios) en la parte inferior izquierda de la pantalla. 

El Script se aplicará a todas las páginas del dominio elegido y se aplicará automáticamente a todas las nuevas páginas publicadas en el mismo dominio.

Una vez que los scripts en el Administrador de Scripts están habilitados, también puedes verlos en la sección Javascript en el Editor de Páginas.


Cómo Desactivar, Eliminar y Editar Scripts

Cómo deshabilitar (o volver a habilitar) o eliminar un Script utilizando el menú de cambios para cada Script.

Ingresa la pantalla de edición de cualquier script haciendo clic en cualquier lugar en la barra gris para cada script.


Cómo migrar Scripts al Script Manager

Al agregar un script al Script Manager es importante asegurarse de que el script no se encuentre ya en ninguna de tus páginas. De lo contrario, cuando lo agregues al Script Manager podría terminar ejecutándose dos veces. Para scripts de seguimiento como Google Analytics o Adwords Conversion Tracking, se producirían múltiples vistas de página o conversiones y datos inexactos.

La mejor manera de evitar esto es ir página por página y eliminar el script de la página, antes de añadirlo al Script Manager.

Se trata de un proceso único similar al proceso de migración de Google Tag Manager.   

Si te preocupa no poder efectuar un seguimiento de las visitas a tus páginas o conversiones en el período de tiempo que tardas para eliminar el script de una página y volver a agregarlo al Script Manager, recomendamos eliminar el script de todas tus páginas, pero no volver a publicarlas todavía. Luego, una vez que el script ha desaparecido de todas tus páginas, podrás agregarlo al Script Manager y volver a publicar las páginas. Este proceso debería reducir considerablemente el tiempo invertido en migrar tus Scripts.


Script Manager: Consejos y Trucos avanzados  

Utilizando Variables de la página

El Script Manager puede hacer uso de algunas variables a nivel de página:

window.ub.page.id – El ID interno de Unbounce para tu página. Los ID son únicos para cada página, por lo que podrían serte útiles para diferenciar las páginas, por ejemplo: "a07b7610-6a9e-11e4-b67a-22000b6882a2" window.ub.page.variantId - La letra de ID de la variante actual, por ejemplo. "a" window.ub.page.name - El nombre que le has dado a la página dentro de Unbounce, por ejemplo: "Mi nombre de página"

Puedes utilizar estas variables para que tu script se comporte de manera diferente en diferentes páginas o variantes. Por ejemplo, puedes enviar variantId como una variable personalizada a tu plataforma de análisis. 


Seguimiento de clics en los botones como eventos de Google Analytics en todas las páginas

Si quieres realizar un seguimiento automático de todos los clics en botones y envíos de formularios como eventos en Google Analytics, ¡el Script Manager puede ayudarte!

Consulta nuestro artículo de soporte sobre Integración con Google Analytics utilizando el Script Manager.

Integración con Google Analytics


¿Cómo inserto HTML o widgets personalizados en una landing page de Unbounce?

Puedes utilizar nuestra herramienta para HTML personalizado para insertar casi cualquier código HTML o componentes o widgets basados ​​en scripts en tu landing pages siguiendo los pasos a continuación:

  1. Arrastra el botón Custom HTML (HTML Personalizado) desde la barra de herramientas de objetos (en el lado izquierdo del editor) hasta el lugar en el que quieres que aparezca en tu landing page.
  2. Pega el script/código en la ventana y haz clic en Done (Hecho).
  3. Extiende el cuadro de HTML para que sea del tamaño correcto (esto puede ser un proceso de prueba y error después de verlo en la vista previa de la página).
  4. Guarda (Save) tu página.
  5. Haz clic en Preview (Vista previa) para verlo en acción. Recuerda que no aparecerá en el editor, solo en modo de vista previa y la página final publicada. Algunos HTML personalizados no se pueden mostrar en la vista previa, por lo que, si no aparece, asegúrate de revisar la página publicada.
  6. Cambia el tamaño del cuadro HTML de nuevo para asegurarte de que el objeto insertado aparece en su totalidad.

Glosario

Botón Javascripts: Ubicado en la parte inferior izquierda del editor. Aquí puedes agregar tu Script personalizado para funcionalidades como el código de seguimiento de Google Analytics, que Unbounce no ha añadido todavía.

Botón Stylesheets: Ubicado en la parte inferior izquierda del editor, a la derecha del botón Javascripts. Aquí puedes añadir tus colores y fuentes modificados para tus requisitos especiales.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 5 de 12
Tecnología de Zendesk