Tutorial en Vídeo
Suscríbete a mi canal:
Código y ayuda necesaria para seguir el tutorial
Código usado:
<video width="640" height="360" data-mautic-video="true">
<source type="video/youtube" src="https://www.youtube.com/watch?v=rRz8bBdjWCw" />
</video>
<video width="640" height="360" data-form-id="2" data-gate-time="2">
<source type="video/youtube" src="https://www.youtube.com/watch?v=rRz8bBdjWCw" />
</video>
Aquí puedes ver la ayuda oficial:
https://docs.mautic.org/en/gated-video
Transcripción del vídeo
Hola chicos, ¿qué tal? Aquí os dejo otro vídeo de Mautic, un vídeo muy, muy interesante y en esta ocasión vamos a ver cómo podemos trackear cuánto tiempo ven nuestros usuarios un vídeo determinado.
Aquí podemos ver en este ejemplo se han visto 29 segundos de 29 minutos que tiene este vídeo.
Es una prueba que acabo de hacer y ahora vamos a ver cómo lo he hecho. No solo vamos a poder ver cuánto tiempo ven nuestros usuarios de los vídeos que tenemos en nuestra página web, ya sea de YouTube o un vídeo de MP4 o del propio Vimeo, sino que también vamos a poder añadir un formulario dentro del propio vídeo en el tiempo que nosotros queramos.
Y en ese momento el vídeo se parará. Y para seguir viéndolo habrá que añadir el correo electrónico o el formulario que hayamos creado en Mautic. Recordar que tenéis un curso completo de Mautic en mi zona premium, en el que vemos todo paso a paso.
Este vídeo vais a ver lo sencillo y lo útil que os puede llegar a ser.
Si voy a la ayuda de Mautic. Podemos ver que nos dice que podemos hacer justo lo que os acabo de comentar.
En este caso concreto nos dice que podemos usar la etiqueta vídeo. Aquí podemos ver que una etiqueta vídeo normal de HTML5 aquí lo podemos ver, que le podemos dar el ancho, el alto.
Bueno, todo esto y aquí la gracia está en este caso en este campo que le estoy diciendo que formulario quiero de Mautic, en este caso en Mautic cada uno de los formularios va a tener un identificador. Entonces nos pondríamos aquí el identificador del formulario que queremos usar y además le decimos en qué momento concreto queremos que se pare el vídeo y que aparezca el formulario.
<video width="640" height="360" data-form-id="1" data-gate-time="15">
<source type="video/youtube" src="https://www.youtube.com/watch?v=QT6169rdMdk" />
</video>
En el código de ejemplo está puesto a los 15 segundos. Nosotros lo vamos a poner, a los dos segundos para que no se haga muy largo. Vamos a ver como funciona. Y también si sigo bajando podemos ver que me dice que puedo trackear el tiempo de visionado.
En este caso lo único que tengo que hacer es poner data-mautic-video=»true» y de esta manera lo va a leer. Evidentemente tenéis que tener instalado el plugin de Mautic de vuestro WordPress para que todo esto funcione o el JavaScript que hayáis usado.
<video width="640" height="360" data-mautic-video="true">
<source type="video/mp4" src="https://example.tld/video.mp4" />
</video>
Como os digo, tenéis el curso completo en la zona premium.
Vamos a probarlo para ver que esto funciona. Me copio este código, me vengo aquí a una página de WordPress, pego el código y en este caso lo único que voy a hacer es cambiar aquí dos cosas. Fijaros si me vengo a la ayuda.
Puedo ver que el tipo de vídeo aquí está. Si es de YouTube, pongo video/youTube. Si es de Vimeo, video/Vimeo o si es mp4/mp4.
En mi caso, como va a ser un vídeo de YouTube. Aquí quito el mp4 y pongo YouTube.
Y aquí donde viene este código, vamos a añadir la URL a un vídeo mío cualquiera, en este caso lo añado si hago clic en actualizar y sin más, sin hacer nada más, lo que va a hacer es añadirme los datos de este vídeo.
Como yo estoy aquí logueado, no me va a funcionar porque ya he hecho muchas pruebas en mi mautic. Lo que estoy usando, es un usuario distinto que ve el vídeo desde el móvil.
Entonces, en este caso, si os dais cuenta, pone 29 segundos de 29 minutos. En este caso estoy fuera de pantalla, pero estoy refrescando la página en mi móvil. Lo voy a hacer. Voy a hacer clic en el play, aquí también lo voy a hacer para que lo veáis. Aquí lo hago.
Ya está funcionando, pero realmente lo estoy haciendo también en mi móvil. Entonces vamos a pararlo. Vale, ahí no sé si lo oyes, pero ya lo acabo de dar. Y entonces, si yo me vengo a Mautic, estoy dentro del usuario que se está reproduciendo desde el móvil.
Si nos damos cuenta, pone 29 segundos. Voy a parar el vídeo para que no nos oigamos más. Y aquí estoy. Debería de haber subido. Voy a recargar y si todo va bien, fijaros que ahora pone 12 segundos de 29 minutos.
Es decir, que ahora le he dado a reproducir 12 segundos. Porque si os dais cuenta, aquí abajo está la anterior vez que se estuvo viendo que era de 29 segundos. Aquí la he recargado para verlo ahora y aquí me aparece como se ha reproducido este tiempo.
Esto es increíble. Nos puede funcionar muy bien, porque si nosotros tenemos este evento, podemos usarlo para hacer segmentos. Lo podemos usar para mandar mails y para muchas más cosas. Bueno, esta es una de las dos cosas que yo os quería enseñar.
Voy a editar esta página y aquí lo que voy a hacer ahora es añadir un formulario. Si nos damos cuenta para añadir un formulario, tendríamos varias maneras. En este caso voy a usar la del código corto con WordPress..
En este caso me copio este código y aquí lo que os decía antes. Voy a quitar el anterior vídeo, voy a pegar este y le voy a decir que aparezca el formulario número dos y le digo que aparezca a los dos segundos para no hacerlo muy largo.
Y aquí en este caso voy a dejar el este vídeo porque me da, me da igual, solo pasé la prueba. Hago clic en Actualizar. Voy a darle a ver en incógnito para que no detecte que soy yo. Perfecto. Y ahora voy a hacer clic en Play.
Entonces ahora aparece en este vídeo que no lo he cambiado. Aquí veis que es un vídeo de prueba y a los dos segundos aparece el formulario para que yo pueda seguir viendo el vídeo tengo que rellenar este formulario.
En este caso solo tiene el campo mail, pero podía poner tantos campos como quiera dentro de la creación de formularios de Mautic. Es realmente muy interesante.
Bueno, alguno de vosotros podríais estar pensando, “voy a recargar el vídeo y es que cualquiera puede hacer clic en este enlace para verse el vídeo dentro de YouTube y no le hace falta meter los datos”.
Claro, esto es porque he metido en el ejemplo un vídeo de YouTube. Pero si yo meto un vídeo de Vimeo o MP4, no hay esa posibilidad.
La única posibilidad que tienes es de añadir este formulario para seguir viendo el vídeo.
Como os dije, era muy sencillo, está muy fácil de hacer y sobre todo es que nos da unos datos muy, muy interesantes para nuestro negocio. Por lo que ya sabéis, tenéis un curso completo de Mautic para el que lo quiera ver en mi zona premium. Espero que os haya gustado. Nos vemos el siguiente vídeo. Hasta luego.