Eventi Trigger che possono verificarsi in una pagina web

In questo articolo scoprirai come far scattare un evento (che può essere del pixel di Facebook o Google Analytics o altro) quando vorrai su una pagina di WordPress con Elementor, ma puoi utilizzare questi codici anche su altre piattaforme.

Puoi inserire il codice utilizzando il Widget di Elementor HTML, inserendolo a fine pagina.

Perchè non un utilizzare un popup per gli eventi e preferire il codice?

Perchè il popup è buono per visualizzare un contenuto che è già precaricato nella pagina, quindi se si imposta un evento direttamente nel popup, questo non scatterà quando appare, ma scatterà quando viene caricato in maniera nascosta dalla pagina principale che lo contiene

Ecco i codici (puoi rimuovere il testo tra /* e */), in questi esempi utilizzeremo gli eventi del pixel di Facebook : NB: utilizzeremo jQuery una libreria Javascript già presente per chi utilizza Elementor!

TRIGGERS:

  • Dopo 3 secondi
<script>
	setTimeout(function() {
		/* QUI IL TUO EVENTO */
		fbq('track','ViewContent');
	}, 3000); /* <-qui il tempo in millisecondi */
</script>
  • Dopo un certo caricamento della pagina, in questo caso l’evento ViewContent dopo che ha visualizzato il 75% della pagina
<script>
	var executeWhenReachedPagePercentage = function(percentage, callback) {
  if (typeof percentage !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof percentage,
      'instead',
    );
  }
  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }
  function getDocumentLength() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
  }
  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }
  function getScrollableLength() {
    if (getDocumentLength() > getWindowLength()) {
      return getDocumentLength() - getWindowLength();
    } else {
      return 0;
    }
  }
  var scrollableLength = getScrollableLength();
  window.addEventListener("resize", function(){
    scrollableLength = getScrollableLength();
  }, false)
  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }
  function getPercentageScrolled() {
    if (scrollableLength == 0) {
      return 100;
    } else {
      return getCurrentScrolledLengthPosition() / scrollableLength * 100;
    }
  }
  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getPercentageScrolled() > percentage) {
        wasExecuted = true;
        callback();
      }
    };
  })();
  if (getDocumentLength() == 0 ||
    (getWindowLength()/getDocumentLength() * 100 >= percentage)) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};
executeWhenReachedPagePercentage(75, function() {
/* QUI IL TUO EVENTO */
  fbq('track', 'ViewContent');
});
</script>
  • a Caricamento della pagina completo (quando avrà finito di caricare tutte le risorse e immagini)
<script>
window.onload = function() {
  /* QUI IL TUO EVENTO */
  fbq('track','ViewContent');
};
</script>
  • al click di un pulsante
<script>
jQuery('#idDelPulsante').click(function() {
     /* QUI IL TUO EVENTO */
    fbq('track', 'AddToCart');
  });
</script>
  • finto click di un pulsante dopo 10 secondi
<script>
setTimeout(function() {
  jQuery('#idPulsante button').trigger('click');
},10000);}
</cript>
  • all’inserimento di dati nel form
<script>
var initcheck=0;
jQuery( "#idModulo input" ).keyup(function() {
if(initcheck==0) {
    fbq('track','InitiateCheckout');
    initcheck++;
    }
});
</script>
  • alla visualizzazione di una pagina
<script>
/* QUI IL TUO EVENTO */
    fbq('track', 'PageView');
</script>
  • alla visualizzazione di un elemento della pagina
<script>
function isScrolledIntoView(elem)
{
    var docViewTop = jQuery(window).scrollTop() + jQuery(window).height(); //pixels to scroll to top + height of visible window
    var elemTop = jQuery(elem).offset().top; //pixels of the top of element from the start of page
    return (elemTop <= docViewTop);
}
isScrolledIntoView("#idElementoVisualizzato");
var isFuncAlreadyFired = false;
jQuery(window).scroll(function() {
    if(!isFuncAlreadyFired && isScrolledIntoView("#**idElementoVisualizzato**"))
    {
        /* QUI IL TUO EVENTO */
	fbq('track','ViewContent');
        isFuncAlreadyFired = true;
    }
});
</script>

Invece un po più macchinoso aggiungere Tag o Inserire Persone a una lista in ActiveCampaign / MailChimp quando l’utente registrato vede un determinato video e vogliamo che il tag scatti dopo che ha visualizzato almeno 40 minuti di video.

Infatti qui useremo un trucchetto molto carino, dove andremo a creare un form nascosto e lo faremo scattare impostando un timer e inviando i dati dinamici dell’utente da Elementor ad ActiveCampaign!

Rimando al Video su Youtube per capire bene come fare, mentre qui ti darò il codice per nascondere un elemento!

<style>
	#idElementoForm {display:none}
</style>

mentre per lo script utilizzeremo quello già visto in precedenza per far scattare un pulsante dopo 10 secondi

<script>
setTimeout(function() {
  jQuery('#idPulsante button').trigger('click');
},10000);
</script>
Condividi l'articolo:
Ti possono interessare anche...