> ## Documentation Index
> Fetch the complete documentation index at: https://docs.riqra.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Agrega Pop Ups desde Google Tag Manager

> En la siguiente guía te explicaremos cómo agregar distintos Pop Ups en diferentes secciones de tu página y poder contar con la gestión completa de…

En la siguiente guía te explicaremos cómo agregar distintos Pop Ups en diferentes secciones de tu página y poder contar con la gestión completa de ellos.

📍Recuerda que Riqra te puede ayudar colocando algunas imágenes publicitarias

Más información en la 👉[Guía Secciones de visualización](https://help.riqra.com/hc/es-419/articles/1500006219221-Secciones-alternativas-para-una-comunicaci%C3%B3n-visual-a-tus-clientes)

## **📋Pasos a seguir**

Toda esta configuración la realizaremos a través de Google Tag Manager, recuerda en compartirnos el ID del contenedor para que se vea reflejado en tu página. Te dejo más información [Aquí](https://help.riqra.com/hc/es-419/articles/360060487354-Etiquetas-Personalizadas-de-Google-Tag-Manager)

**1.** Ingresa al contenedor de GTM

<img src="https://mintcdn.com/riqra-6746389f/dsNinVpdSHENCO2J/ecommerce/images/Group-166-1.png?fit=max&auto=format&n=dsNinVpdSHENCO2J&q=85&s=9f2e098d99e0a2676409534bd22a25b0" alt="Group_166.png" width="5836" height="1424" data-path="ecommerce/images/Group-166-1.png" />

**2**. En **"Añadir nueva etiqueta"**, selecciona "**HTML personalizado**"

<img src="https://mintcdn.com/riqra-6746389f/3txsikB51GC36jys/ecommerce/images/mceclip2--1-.png?fit=max&auto=format&n=3txsikB51GC36jys&q=85&s=1da3aef71f3f1bcc7a6b7fd8fb859b02" alt="mceclip2__1_.png" width="300" height="155" data-path="ecommerce/images/mceclip2--1-.png" />

<img src="https://mintcdn.com/riqra-6746389f/dsNinVpdSHENCO2J/ecommerce/images/Group-167--1-.png?fit=max&auto=format&n=dsNinVpdSHENCO2J&q=85&s=b2f8f84ce1730a5077fb43f89137bf96" alt="Group_167__1_.png" width="3062" height="3218" data-path="ecommerce/images/Group-167--1-.png" />

**3**. En el espacio de **HTML**, coloca el siguiente script

\<script>\
**VIT**.modalForImages(\{\
id: "aviso-categoria",\
image: "[https://images.pexels.com/photos/1132047/pexels-photo-1132047.jpeg](https://images.pexels.com/photos/1132047/pexels-photo-1132047.jpeg)",\
imageWidth: "600px",\
link: "[https://www.google.com.pe/](https://www.google.com.pe/)",\
linkTarget: "\_blank",\
showAgainInXHours: 0.008\
showWhenLoggedIn: true\
});\
\</script>

**3.1 Modifica el "id"**

El nombre debe ser único para la etiqueta. No utilices espacios ni tildes

**3.2 Modifica la imagen "image"**

Coloca el link de la imagen que aparecerá como POP UP

**3.3 Modifica el tamaño de la imagen en "imageWidth" en píxeles**

La imagen se adapta al espacio que desean ocupar, para el ejemplo usaremos 600px de ancho

**3.4 Modifica la URL que redirige al dar clic en la imagen en "link"**

Esta alternativa es opcional, en caso no deseen redireccionar no se coloca esta línea

**3.5 Modifica el tiempo que deseas vuelva aparecer el Pop Up en showAgainInXHours**

Coloca el tiempo en horas, recuerda que vuelve aparece siempre y cuando se realice la acción definida en el activador y ocurre el tiempo definido. Para el ejemplo 0.008 representa a 30 segundos

**3.6 Modifica showWhenLoggedIn**

Coloca "true" en caso desees que sólo se visualice el modal cuando el usuario haya ingresado sesión. De lo contrario, hay que dejarlo en "false".

🔍Se visualizará de la siguiente manera:

<img src="https://mintcdn.com/riqra-6746389f/8gWEo4JO8KcsZwjO/ecommerce/images/mceclip0-13.png?fit=max&auto=format&n=8gWEo4JO8KcsZwjO&q=85&s=c36ca5ebbeb58b2288a8b797ceb4031d" alt="mceclip0.png" width="847" height="399" data-path="ecommerce/images/mceclip0-13.png" />

**4.** En la sección **"Activación"**

✔ Añade la **Ventana cargada** donde se mostrará el Modal

**4.1 Clic en el espacio para agregar un activador**

<img src="https://mintcdn.com/riqra-6746389f/8gWEo4JO8KcsZwjO/ecommerce/images/image-172--1-.png?fit=max&auto=format&n=8gWEo4JO8KcsZwjO&q=85&s=cbb879fb90a672e7ffe391f4112eccea" alt="image_172__1_.png" width="2864" height="1774" data-path="ecommerce/images/image-172--1-.png" />

**4.2 Agrega un nuevo activador**

<img src="https://mintcdn.com/riqra-6746389f/dsNinVpdSHENCO2J/ecommerce/images/Group-168--1-.png?fit=max&auto=format&n=dsNinVpdSHENCO2J&q=85&s=0c23e987cf0e6981f3a7f7d746e6041a" alt="Group_168__1_.png" width="3880" height="2104" data-path="ecommerce/images/Group-168--1-.png" />

**4.3 Luego de dar clic en el espacio, Selecciona la opción de ventana cargada**

<img src="https://mintcdn.com/riqra-6746389f/dsNinVpdSHENCO2J/ecommerce/images/Group-169--1-.png?fit=max&auto=format&n=dsNinVpdSHENCO2J&q=85&s=3134777def7ab7df7b11153e2521efcd" alt="Group_169__1_.png" width="5682" height="4656" data-path="ecommerce/images/Group-169--1-.png" />

**4.4 Asegúrate que esté seleccionado lo siguiente**

<img src="https://mintcdn.com/riqra-6746389f/3kGi7UwY_fmYGp8k/ecommerce/images/mceclip1-18.png?fit=max&auto=format&n=3kGi7UwY_fmYGp8k&q=85&s=6f6cda121584d52a13a1e1f0d4763f61" alt="mceclip1.png" width="339" height="70" data-path="ecommerce/images/mceclip1-18.png" />

**4.5 Coloca el Path en donde se activará el Modal**

Para este ejemplo, aparecerá cuando estemos en la categoría de Frutas -->**/c/Frutas**

<img src="https://mintcdn.com/riqra-6746389f/3txsikB51GC36jys/ecommerce/images/mceclip2-12.png?fit=max&auto=format&n=3txsikB51GC36jys&q=85&s=296c960d67f41ee368936065e2ce15bd" alt="mceclip2.png" width="888" height="98" data-path="ecommerce/images/mceclip2-12.png" />

**4.6 Coloca un nombre al activador** **y** **guárdalo**

<img src="https://mintcdn.com/riqra-6746389f/ViXxaAh9GELcCkrL/ecommerce/images/Group-171.png?fit=max&auto=format&n=ViXxaAh9GELcCkrL&q=85&s=7e6ea9923338531e1c7d25bcdddf4954" alt="Group_171.png" width="12086" height="3314" data-path="ecommerce/images/Group-171.png" />

✔ También agrega un **Cambio en el historial**

**4.7 Repite el paso 4.1, 4.2**

**4.8 Luego de dar clic en el espacio, Selecciona la opción de Cambio en el historial**

**<img src="https://mintcdn.com/riqra-6746389f/ViXxaAh9GELcCkrL/ecommerce/images/Group-172.png?fit=max&auto=format&n=ViXxaAh9GELcCkrL&q=85&s=d653dcbb8c560064d9cd1bc7d3c11160" alt="Group_172.png" width="5668" height="5610" data-path="ecommerce/images/Group-172.png" />**

**4.9 Agrega el Page Path (mismo colocado en el punto 4.5) y el History Source igual a pushState <img src="https://mintcdn.com/riqra-6746389f/3txsikB51GC36jys/ecommerce/images/mceclip2-13.png?fit=max&auto=format&n=3txsikB51GC36jys&q=85&s=8690c0675ac3fe0f04195e7ac2c89860" alt="mceclip2.png" width="896" height="396" data-path="ecommerce/images/mceclip2-13.png" />**

**4.10 Coloca un nombre al activador y guárdalo**

**<img src="https://mintcdn.com/riqra-6746389f/ViXxaAh9GELcCkrL/ecommerce/images/Group-173.png?fit=max&auto=format&n=ViXxaAh9GELcCkrL&q=85&s=73f09c8836ede1f503de4e39eb343b18" alt="Group_173.png" width="11724" height="4676" data-path="ecommerce/images/Group-173.png" />**

🔍Se debe visualizar de la siguiente manera:

**<img src="https://mintcdn.com/riqra-6746389f/99C2TlPN4YAyaCsx/ecommerce/images/mceclip3-9.png?fit=max&auto=format&n=99C2TlPN4YAyaCsx&q=85&s=9c3f3a83d7cba2461fe122af2b8d21de" alt="mceclip3.png" width="919" height="248" data-path="ecommerce/images/mceclip3-9.png" />**

**5**. **Guarda** la etiqueta

Y No te olvides de dar clic en **"Enviar"** para que se vea relejada la configuración

<img src="https://mintcdn.com/riqra-6746389f/99C2TlPN4YAyaCsx/ecommerce/images/mceclip4--1-.png?fit=max&auto=format&n=99C2TlPN4YAyaCsx&q=85&s=0b612285712028e49a3d7d04503d7eea" alt="mceclip4__1_.png" width="243" height="63" data-path="ecommerce/images/mceclip4--1-.png" />

**TIP! ✨**

Si deseas ver su funcionamiento antes de enviarlo, puedes dar clic en vista previa

<img src="https://mintcdn.com/riqra-6746389f/99C2TlPN4YAyaCsx/ecommerce/images/mceclip4-6.png?fit=max&auto=format&n=99C2TlPN4YAyaCsx&q=85&s=5b83f7f7e16b74b9316550c14c42c957" alt="mceclip4.png" width="1561" height="820" data-path="ecommerce/images/mceclip4-6.png" />

📩Si tienes alguna duda o consulta, escríbenos a [soporte@riqra.com](mailto:soporte@riqra.com) 📩
