Cómo instalar tu popup o sticky bar

Seguir

Overlays.pngSticky_Bars.png

Si estás aquí, supongo que ya habrás diseñado tu popup o sticky bar y querrás publicarlo.

Este artículo te ayudará a:

Nota:

Solo es posible añadir un código de integración ('embed code') al mismo tiempo. Si añades más de uno a una página, solo se mostrará el primero.

Nota:

Por ahora no es posible usar lightboxes en popups y sticky bars.

Cómo instalar tu popup/sticky bar en Google Tag Manager

Haz clic para expandir

  1. Copia tu código ('embed code') (desde tu ratón, o haciendo clic en el botón de "Copy").
    Copy_Setup_Script.png
  2. Inicia sesión en tu cuenta de Google Tag Manager y haz clic en “New Tag” o “Add a New Tag”.

  3. Haz clic en “Choose a tag type to begin setup...”.

  4. Desde el menú de “Choose tag type”, selecciona “Custom HTML”.

  5. En el campo de 'Tag Configuration HTML', pega el código y haz clic en “Save”.

  6. Desplázate hacia la parte inferior de la página y haz clic en “Choose a trigger to make this tag fire...” para elegir cuándo quieres que se ejecute el script.

  7. Para elegir que se ejecute en todas las páginas, haz clic en “All Pages”. Para crear una ejecución personalizada, haz clic en “+”.

  8. Si has elegido "All Pages", haz clic en "Save" para guardar los cambios.

  9. Si quieres crear una ejecución personalizada, haz clic en “Choose a trigger type to begin setup…”, elige el tipo de ejecución y pincha en “Save”.



  10. Haz clic en “Tags” en el menú de la parte izquierda para ver tu nueva etiqueta, y haz clic en “Publish” para publicarla.

  11. ¡Listo! Ya puedes ir a tu página para ver cómo funciona.

Cómo instalar tu popup/sticky Bar en Magento

Haz clic para expandir
  1. Copia tu código ('embed code') (desde tu ratón, o haciendo clic en el botón de "Copy").
    Copy_Setup_Script.png
  2. Inicia sesión en tu cuenta de Magento. En el menú de “System”, selecciona “Configuration”.

  3. En el menú de “General” en la parte izquierda, selecciona “Design”.

  4. Desplázate hasta el campo de texto de “Miscellaneous Scripts”, pega tu script y haz clic en “Save Config” para guardar los cambios.

  5. ¡Listo! Tu popup sticky bar ya debería funcionar. Ve a tu sitio web para comprobarlo.

Cómo instalar tu popup/sticky bar en Shopify

Haz clic para expandir
  1. Copia tu código ('embed code') (desde tu ratón, o haciendo clic en el botón de "Copy").
    Copy_Setup_Script.png
  2. Inicia sesión en tu cuenta de Shopify. En la página principal, selecciona “Online Store” en el menú de la izquierda.

  3. Selecciona “Themes”.

  4. Haz clic en “Ellipses” en la derecha.

  5. En el menú desplegable de “Ellipses”, selecciona “Edit HTML/CSS”.

  6. Haz clic en “theme.liquid”.

  7. Pega tu script en cualquier lugar entre las etiquetas <head> y </head> entre <body> y </body>.
  8. Haz clic en “Save” para publicar los cambios.

  9. Ya está. Para comprobar si tu popup o sticky bar ya está funcionando, haz clic en “Online Store” en el menú de la izquierda para ir a tu tienda.

Cómo instalar tu popup/sticky bar en Unbounce

Haz clic para expandir
  1. Copia tu código ('embed code') (desde tu ratón, o haciendo clic en el botón de "Copy").
    Copy_Setup_Script.png
  2. Inicia sesión en tu cuenta de Unbounce, abre el editor de páginas de la landing en la que quieres que se muestre tu popup o sticky bar y haz clic en “Javascripts”.

  3. Haz clic en “Add Script to this Variant”, selecciona “Before Body End Tag” desde el menú desplegable de "Placement" y pega tu script en el campo principal. Asegúrate de que las etiquetas de <Script> están incluidas y haz clic en “Save”.

  4. Listo. Ve a la URL de tu página de Unbounce para verlo en vivo.

Cómo instalar tu popup/sticky bar en WordPress (página individual o publicación)

Haz clic para expandir

Estos pasos funcionarán tanto con tus publicaciones del blog de Wordpress como con tus páginas.

Aquí puedes encontrar las instrucciones sobre cómo instalar tus popups y sticky bars en páginas de Unbounce publicadas en dominios de Wordpress.
  1. Copia tu código ('embed code') (desde tu ratón, o haciendo clic en el botón de "Copy").
    Copy_Setup_Script.png
  2. Inicia sesión en tu cuenta de Wordpress. En el menú de la izquierda, selecciona "Posts".
  3. Haz clic en el título de la publicación donde quieres que aparezca tu popup o sticky bar.

  4. Haz clic en “Text” para cambiar al modo de edición.

  5. Pega el código (embed code) en la parte superior de tu publicación, antes del texto.

  6. Comprueba que la URL de tu cuenta de WordPress sea la misma que la que indicaste en la configuración de tu popup o sticky bar.
    En WordPress:

    En Unbounce:

  7. Haz clic en "Update" para guardar los cambios.

  8. Listo. Ahora ya puedes ir a tu publicación para ver si funciona. 

Cómo instalar tu popup/sticky bar en WordPress (todo el dominio)

Haz clic para expandir

Cómo instalar tu código en WordPress (todo el dominio)

Tienes que tener rol de administrador en tu sitio de Wordpress para poder añadir el código a todo el dominio.

Aquí puedes encontrar las instrucciones sobre cómo instalar tus popups y sticky bars en páginas de Unbounce publicadas en dominios de Wordpress.
      1. Copia tu código ('embed code') (desde tu ratón, o haciendo clic en el botón de "Copy").
        Copy_Setup_Script.png
      2. Inicia sesión en tu cuenta de Wordpress. Selecciona "Appearance" en el menú de la izquierda, y haz clic en "Editor".
      3. En la lista de plantillas del menú de la derecha, selecciona “Header.php”.

      4. Pega el código en tu publicación, en cualquier lugar entre las etiquetas de <head> y </head>.

      5. Haz clic en “Update” para guardar los cambios.
      6. Listo.
Si estás actualizando el archivo header.php, cualquier actualización futura podría sobreescribir los cambios.

Cómo instalar tu popup/sticky bar en otro lugar

Haz clic para expandir

Para instalar tu código en una plataforma no indicada en este artículo o en un sitio web estático, sigue estas instrucciones:

Baja hasta la sección de "Installation" en el menú de tu popup o sticky bar y haz clic en "Copy" para copiar el código. Después, pégalo en tu plataforma o sitio web (asegúrate de pegarlo en la sección de <head>).

Copy_the_Embed_Code.png

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 14 de 22