training g614faf6d3 1280

Gestire CTA ad un minuto preciso incorporando un video Vimeo

Scopriamo come, partendo da un video Vimeo, possiamo far apparire una CTA (Call to Action) ad un minuto preciso del video e allo stesso tempo taggare l’utente sul vostro autorisponditore tramite Zapier.

Requisiti:

  • Una pagina HTML dove inserire il video Vimeo
  • Un account di Zapier
  • Un account di Vimeo

Prima di vedere il codice completo dobbiamo tenere presente che l’utente quando atterrerà nella pagina dovrà passare il parametro ‘em’ che conterrà la sua email (es: https://miodominio.com/pagina?em=email@email.com). In genere l’utente prima di accedere a questa pagina avrà compilato un form e quindi avremmo a disposizione la sua email.

Prima di copiare ed incollare il codice completo, vediamo solo le righe del codice che dovrai modificare (il resto non toccare!)

Qui dovrai sostituire XXXXXX con il link del tuo video Vimeo.

				
					<div id="myVideo" data-vimeo-url="XXXXXX" data-vimeo-autoplay="true" data-vimeo-controls="true" data-vimeo-width="800"></div> 
				
			

In questa riga dovrai inserire (in secondi) il momento del video un cui la CTA deve apparire. Quindi sostituisci ‘000’ con il numero di secondi.

				
					var TIME_TO_SHOW_CTA = 000; // quando deve apparire CTA in secondi
				
			

In questa riga andremmo ad indentificare l’oggetto nella pagine (pulsante, scritta, ecc…) che dovrà appararire come CTA e lo faremo prendendo l’ID assegnato all’oggetto tramite CSS. Quindi ricordatevi nelle impostazioni della CTA di mettere come ID ‘get-offer’.

				
					var HIDDEN_CONTENT_ID = 'get-offer'; // CSS ID del pulsante CTA
				
			

Qui dovrai inserire il link che hai generato tramite Zapier (Catch Hook).

				
					var LINK_ZAPIER = 'https://hooks.zapier.com/hooks/catch/XXX/YYY/'; // Modifica con il link del webhook di Zapier 
				
			

ECCO IL CODICE COMPLETO

				
					<div id="myVideo" data-vimeo-url="XXXXXX" data-vimeo-autoplay="true" data-vimeo-controls="true" data-vimeo-width="800"></div> 

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
	var TIME_TO_SHOW_CTA = 000;
	var HIDDEN_CONTENT_ID = 'get-offer';
	var LINK_ZAPIER = 'https://hooks.zapier.com/hooks/catch/XXX/YYY/';
	var CTA_VIEW = 'n';
  	var videoPlayer = new Vimeo.Player('myVideo');
  	videoPlayer.on('play', function() {
  	});
  	videoPlayer.on('timeupdate', function(data){
		if (data.seconds >= TIME_TO_SHOW_CTA) {
			showHiddenItem();
    		if (CTA_VIEW == 'n') {
				WH_Call();
				CTA_VIEW = 'y';
			}
		};
  	});
  	

	function showHiddenItem() {
		document.getElementById(HIDDEN_CONTENT_ID).style.visibility = 'visible';
		//document.getElementById(HIDDEN_CONTENT_ID).style.display = "block";
	}

	// Estrae email dal paremtro URL
	function getParameterByName(name, url = window.location.href) {
    	name = name.replace(/[\\[\\]]/g, '\\\\$&');
    	var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        	results = regex.exec(url);
    	if (!results) return null;
    	if (!results[2]) return '';
    	return decodeURIComponent(results[2].replace(/\\+/g, ' '));
	}

	// Avvia lo ZAP per il TAG dell'utente
	function WH_Call() {
		let email = getParameterByName('em') ? getParameterByName('em') : getParameterByName('email')
		fetch(LINK_ZAPIER + '?em=' + email, { method: 'GET' })
		.then(resp => console.log(resp))
		.catch(err => console.log(err))
	}
</script>

				
			

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.