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:
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>