Mostrando y ocultando elementos en la página

En este artículo te explicaremos cómo funciona nuestro script para mostrar contenido en un momento específico del vídeo.

El recurso de mostrar/ocultar es muy importante para el marketing digital en la construcción de landing pages, es decir, para la creación de páginas de ventas de productos.

Una de las estrategias de ventas más utilizadas es tener una landing page limpia con solo un mensaje potente en la parte superior y un vídeo de ventas justo debajo.

A lo largo del vídeo, generalmente en el momento en que el productor cree que el cliente potencial está preparado para comprar el producto, varios elementos aparecen en la página que previamente estaba ""vacía"".

Muchos productores, como tú, usan Panda para alojar vídeos en sus landing pages, por eso este artículo tiene como objetivo ayudarte con un script que oculta elementos de tu página y los muestra en el momento más adecuado para tu estrategia de ventas. 😉

Este artículo propone la configuración del script en páginas. Lee el artículo sobre cómo configurarlo en Elementor

Vamos al paso a paso:

Debes construir tu página con todos los elementos que desees, incluidos aquellos que quieres ocultar.
A continuación, todos los elementos que deseas ocultar y mostrar al mismo tiempo deben tener la Clase CSS nombrada como panda.
Debajo de todos los elementos, añade un elemento HTML al final de la sección.
Copia el script a continuación, pégalo dentro del elemento HTML y haz clic en el botón verde Actualizar.

<style> 
    .panda {
        display: none
    }
</style>

    const SECONDS_TO_DISPLAY = 3;
    const CLASS_TO_DISPLAY = 'panda';
    const IFRAME_ID = 'INSERIR_ID'
    const API_ENDPOINT = 'https://player.pandavideo.com.br/api.v2.js'

    if(!document.querySelector( `script[src='${API_ENDPOINT}']`)) { 
        let s = document.createElement('script'); 
        s.src = API_ENDPOINT; 
        s.async = true; 
        document.head.appendChild(s);
    }

    window.pandascripttag = window.pandascripttag || [];
    window.pandascripttag.push(function () {
        const p = new PandaPlayer(IFRAME_ID , {
            onReady() {
                const el = document.querySelectorAll( `.${CLASS_TO_DISPLAY}`);
                p.onEvent(e => {
                const type = e.message
                if(type === 'panda_timeupdate'){
                    const { currentTime, isMutedIndicator } = e;
                    if (isMutedIndicator) return;
                    if (currentTime < SECONDS_TO_DISPLAY) {
                        el.forEach(e => {
                            e.style.display = 'none'
                        })
                    } else if (currentTime > SECONDS_TO_DISPLAY) {
                        el.forEach(e => {
                            e.style.display = 'block'
                        })
                    }
                }
                })
            }
        });
    })
</script>

La unidad de tiempo del script está en segundos. Para elegir el momento adecuado según tu estrategia, solo cambia el número 3 en const SECONDS_TO_DISPLAY = 3 del script al tiempo en segundos en el que deseas que los elementos aparezcan.

Para especificar en qué vídeo deseas que se ejecute el script, cambia la const IFRAME_ID = 'INSERIR_ID' por el ID del código iframe del vídeo. Ejemplo: const IFRAME_ID = 'panda-3b101f05-84aa-4de0-9b64-71f1855388af'

¿Cómo mantener los elementos visibles después de la primera visualización?

Con este otro código, ofrecemos la posibilidad de guardar cuando el usuario ya haya visto el pitch de ventas para que, cuando vuelva a abrir la página, el contenido oculto aparezca automáticamente. Solo informamos que la diferencia de este código con el anterior es la adición de la condición ALREADY_WATCHED, que guarda este evento en el localStorage del navegador del usuario, de manera que cuando acceda de nuevo a la página, este evento se activará confirmando que ya ha visto el pitch:

<style> 
    .panda {

        display: none;
    }
</style>

    const SECONDS_TO_DISPLAY = 3;
    const CLASS_TO_DISPLAY = 'panda';
    const IFRAME_ID = 'INSERIR_ID';
    const API_ENDPOINT = 'https://player.pandavideo.com.br/api.v2.js';
    let watched = localStorage.getItem( `pandavideo_script_delay_watched_${IFRAME_ID}_${CLASS_TO_DISPLAY}`) || false;

    if (!document.querySelector( `script[src='${API_ENDPOINT}']`)) { 
        let s = document.createElement('script'); 
        s.src = API_ENDPOINT; 
        s.async = true; 
        document.head.appendChild(s);
    }
    
    if (watched) {
        const el = document.querySelectorAll( `.${CLASS_TO_DISPLAY}`);
        el.forEach(e => {
            e.style.display = 'block';
        });
    } else {
        const el = document.querySelectorAll( `.${CLASS_TO_DISPLAY}`);
        el.forEach(e => {
            e.style.display = 'none';
        });
    }
    
    window.pandascripttag = window.pandascripttag || [];
    window.pandascripttag.push(function () {
        const p = new PandaPlayer(IFRAME_ID , {
            onReady() {
                const el = document.querySelectorAll( `.${CLASS_TO_DISPLAY}`);
                p.onEvent(e => {
                    const type = e.message;
                    if (type === 'panda_timeupdate') {
                        const { currentTime, isMutedIndicator } = e;
                        if (isMutedIndicator || watched) return;

                        if (currentTime < SECONDS_TO_DISPLAY) {
                            el.forEach(e => {
                                e.style.display = 'none';
                            });
                        } else if (currentTime > SECONDS_TO_DISPLAY) {
                            el.forEach(e => {
                                e.style.display = 'block';
                            });
                            watched = true;
                            localStorage.setItem( `pandavideo_script_delay_watched_${IFRAME_ID}_${CLASS_TO_DISPLAY}`, watched);
                        }
                    }
                });
            }
        });
    });
</script>

¿Tienes alguna duda? Contáctanos

Si tienes alguna duda o no te sientes muy seguro sobre la configuración, contacta a nuestro soporte en el chat y te ayudaremos en los pasos en los que tengas dificultad.

Actualizado el: 12/11/2024