Exit pop-up: un modulo in Drupal 8 per convertire gli utenti che escono dal tuo sito

Pubblicato da Nicola Rainiero il 15-07-2019

Ormai ci sono molti siti web pieni di call to action ovvero dei metodi subdoli che ti invitano a fare un'azione che può essere cliccare un link, visitare una pagina, iscriversi a una mailing list e così via, anche quando esci dalle loro pagine. Potevo non mettere questa fastidiosa funzione sul mio sito? Certo che no, quindi ti mostro come aggiungere questo pop-up al tuo sito, installando e configurando Exit Pop UP Module per Drupal 8. Nell'articolo faccio vedere come Javascript può adattare la tua pubblicità di uscita in funzione della lingua del browser del navigatore.

Trovo queste operazioni di marketing leggermente fastidiose, ma devo ammettere che in questi ultimi mesi mi ha molto aiutato ad aumentare i Mi piace sulla mia pagina Facebook e in futuro cercherò di renderlo più specifico e articolato, adattando l'azione all'ultima pagina che l'utente ha visitato sul mio sito. Ma prima dovrei creare una landing page o qualcosa che mi porti un profitto, quindi ci sarà molto da aspettare ancora!

Ad ogni modo, tornando al modulo, l'autore lo descrive in questo modo:

Il modulo Exit Pop UP aiuta a convertire il visitatore in uscita dal tuo sito e fa crescere la tua attività coinvolgendo i navigatori. Ogni volta che l'utente tenta di lasciare il tuo sito apparirà un pop up che mostra un'offerta, o qualsiasi cosa desideri visualizzare.

In Drupal puoi trovarlo e seguire le istruzioni su come installarlo qui.

Exit pop-up: un modulo in Drupal 8 per convertire gli utenti che escono dal tuo sito

La mia personalizzazione

In parole povere basta usare un iframe per creare una inserzione molto più dinamica e reattiva di quanto il modulo consenta. Lo si può fare in 4 semplici passaggi.

  1. Installi e abiliti il modulo;
  2. vai nella sua pagina di configurazione all'indirizzo https://www.tuo_sito/admin/config/exitpopup;
  3. aggiungi un codice come questo nel campo HTML template:
    <iframe height="300" src="https://rainnic.altervista.org/path/index_new.html" width="600"></iframe>
  4. mentre l'index_new.html può essere ciò che vuoi, nel mio caso è questo:
    <!doctype html>
    <html>
    <head>
    <style>
    .epu_container{padding: 15px; } .epu_img_container{height: 100px; width: 100%; display: block; text-align: center; } .epu_img{margin: auto; height: 100px; width: 79px; } .epu_content{text-align: center; } .epu_btn {outline: none; border:none; padding: 15px 20px; vertical-align: middle; cursor: pointer; font-size: 16px; font-variant: small-caps; text-transform: uppercase; background: #09f; color: #fff; -webkit-box-shadow: 0px 5px 10px  -2px #aaa; box-shadow: 0px 5px 10px  -2px #aaa; }
    </style>
    </head>
    <body>
    
    
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var language = navigator.language || navigator.userLanguage; 
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
    if (language == "it")
    {
      js.src = 'https://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v3.0';
    }
    else
    {
      js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0';
    }
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    <div class="epu_container">
    <div class="epu_img_container"><img alt="Exit Pop up rocket" class="epu_img" src="logo_firma.jpg" /></div>
    &nbsp;
    
    <div class="epu_content">
    <h2 id="title">Thanks for your visit!</h2>
    
    <p id="paragraph">Please don’t forget to Like my Page!</p>
    <!-- <button class="epu_btn">Do Some Action PROVA!!!!</button> -->
    
    <script>
    var language = navigator.language || navigator.userLanguage; 
    if (language == "it" || language == "it-IT" )
    {
        document.getElementById("title").textContent = "Grazie per essere stato qui!";
        document.getElementById("paragraph").textContent = "Se vuoi restare aggiornato, puoi mettere un like alla mia pagina.";
    }
    else
    {
        document.getElementById("title").textContent = "Thanks for your visit!";
        document.getElementById("paragraph").textContent = "Please don't forget to Like my Page!";
    }
    </script>
    
    <div class="fb-like" data-href="https://www.facebook.com/rainnicadmin" data-layout="standard" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
    
    </div>
    </div>
    
    
    </body>
    </html>
    

In questo modo la personalizzazione è più flessibile e offre molte più possibilità. In futuro proverò ad aggiungere non solo la promozione della mia pagina Facebook ma anche diverse altre pagine di destinazione in base ad alcuni tag presenti nell'articolo di uscita.



Potrebbero interessarti anche:

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.

Aggiungi un commento

Il contenuto di questo campo è privato e non verrà mostrato pubblicamente.

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web ed indirizzi e-mail diventano automaticamente dei link.
  • Linee e paragrafi vanno a capo automaticamente.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.