Come aggiungere un pulsante di iscrizione alle notifiche push nei popup

Stai cercando un modo per aggiungere un pulsante di iscrizione alle notifiche push ai tuoi popup?

I popup sono un ottimo modo per aumentare le tue conversioni e far crescere una lista email. Ma non è tutto ciò che puoi fare con loro. Se usi il costruttore di popup giusto, puoi personalizzare tutto sui tuoi popup.

Per impostazione predefinita, le notifiche push includono anche finestre popup modali. Ma puoi ottenere molte più opzioni di personalizzazione con un costruttore di popup.

Quindi, useremo un costruttore di popup per creare il popup e aggiungere un link di iscrizione per raccogliere iscritti alle notifiche push.

Puoi facilmente aggiungere un pulsante per raccogliere iscritti alle notifiche push direttamente dai tuoi popup. Ed è super facile da fare. Tutto ciò di cui hai bisogno è un costruttore di popup e un software per notifiche push per impostare popup personalizzati per raccogliere iscritti alle notifiche push.

Iniziamo.

Come Creare un Popup per Raccogliere Iscritti alle Notifiche Push

Iniziamo creando un popup. Consigliamo di utilizzare OptinMonster per creare tutti i tuoi popup.

OptinMonster è il toolkit di conversione numero 1 al mondo e lo abbiamo utilizzato noi stessi. OptinMonster rende semplicissimo creare potenti popup che convertono. E non dovrai mai usare alcun codice.

OptinMonster ha praticamente tutto ciò di cui hai bisogno per iniziare, far crescere e scalare il tuo processo di lead generation.

Ecco una rapida panoramica di ciò che puoi fare utilizzando il toolkit:

• Raccogli iscritti alle notifiche push utilizzando un popup
• Converti i visitatori alla prima visita in lettori abituali
• Riduci i tassi di abbandono del carrello e abbandono della navigazione
• Crea offerte a tempo limitato con timer effettivi per il conto alla rovescia
• Aumenta i download di eBook e le vendite di prodotti digitali
• Crea un funnel per eventi dal vivo
• Migliora l'interazione sul sito utilizzando popup gamificati
• Reindirizza il tuo traffico verso pagine e post che ti fanno guadagnare

Usiamo OptinMonster parecchio e abbiamo persino scritto una recensione completa di OptinMonster. Puoi darci un'occhiata, o iniziare subito con la tua campagna. Tutto quello che devi fare è iscriverti a OptinMonster e seguire il resto di questo articolo.

Passaggio #1: Crea una Campagna Popup per Raccogliere Iscritti

Vai alla tua dashboard di OptinMonster e premi il pulsante Crea:

Seleziona l'opzione Modello per iniziare a creare un opt-in utilizzando un modello predefinito:

Per questo tutorial, creeremo un popup per il Black Friday. Seleziona il tipo di campagna Popup e cerca un modello di campagna

Puoi scegliere qualsiasi modello ti piaccia, ma per questo tutorial useremo il modello di campagna Black Friday.

Dopo aver selezionato il tuo modello, dai un nome alla tua campagna. Ricorda, questo nome di campagna è per te e probabilmente creerai un sacco di questi popup con diverse opzioni di targeting. Quindi, dai alla campagna un nome significativo o finirai davvero confuso in seguito.

Inoltre, a seconda del tuo piano, puoi anche utilizzare OptinMonster su più siti. Quindi, seleziona anche il sito web in cui desideri visualizzare la tua campagna. Premi Inizia a Costruire quando hai finito.

Passaggio n. 2: Modifica il tuo popup per personalizzare l'aspetto

Con OptinMonster, otterrai un generatore di popup visivo drag and drop. Una volta terminato di nominare la tua campagna, potrai modificare anche i più piccoli dettagli del tuo popup.

La parte più sorprendente è che basta fare clic su qualsiasi testo si desideri modificare e cambiarlo inline. Non è necessario compilare un modulo o modificare alcun codice HTML nel popup.

Puoi modificare tutto ciò che desideri riguardo al tuo popup, comprese le immagini. Quando sei soddisfatto dell'aspetto dell'optin, puoi passare a impostazioni più avanzate.

Il modo in cui questo particolare modello è impostato è che ci sono tre parti nel popup. Hai una schermata iniziale Sì/No in cui i visitatori scelgono un coupon per il Black Friday. È quello che vedi nell'immagine sopra. Per impostazione predefinita, è un coupon di spedizione gratuita. Ma puoi aggiungere qualsiasi offerta o coupon desideri.

Quando i tuoi visitatori fanno clic sul pulsante Sì nel popup, vengono inviati alla schermata Optin. È qui che raccoglieresti gli iscritti. Per impostazione predefinita, la schermata di optin raccoglie le email. La sostituiremo con un pulsante per raccogliere iscritti push.

Infine, hai una schermata Successo che appare quando il tuo visitatore si iscrive.

Facciamolo un passo alla volta.

Passaggio n. 3: Rimuovi l'optin email dal popup

Puoi modificare qualsiasi modulo nel popup desideri. Vai alla schermata Optin nella barra in basso:

Qui, puoi passare il mouse sopra il modulo di optin email e fare clic sul pulsante di eliminazione per rimuoverlo:

Ora che l'optin email è scomparso, aggiungeremo un pulsante che raccoglie iscritti alle notifiche push.

Passaggio n. 4: Aggiungi un pulsante Click to Subscribe al tuo popup

Innanzitutto, aggiungi un blocco HTML al tuo popup dalla barra laterale in OptinMonster.

Qui è dove aggiungeremo il codice per raccogliere gli iscritti alle notifiche push. Per prima cosa, incolla il seguente codice per creare un pulsante cliccabile:

<button class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

Incolla il codice dove dice che puoi aggiungere HTML. A questo punto, dovresti vedere un nuovo pulsante nel tuo popup:

Successivamente, scorri verso il basso e incolla il seguente CSS nel contenitore CSS:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

A questo punto, dovresti vedere un bellissimo pulsante sul tuo popup:

Passaggio n. 5: Ottieni il codice di iscrizione da PushEngage

Le notifiche push ti aiutano a far crescere il traffico del tuo sito web e l'engagement in modo automatico. Le notifiche push web sono un modo efficace per riportare gli utenti che potrebbero aver abbandonato la loro sessione o lasciato il sito web. Aiuta a coinvolgere nuovamente gli utenti notificandoli di nuovi contenuti, offerte o eventi.

Le notifiche push includono anche messaggi chiari e attuabili e pulsanti di call to action, incoraggiando gli utenti a intraprendere azioni specifiche, come leggere un articolo, completare un acquisto o partecipare a un evento.

Puoi personalizzare le notifiche push in base alle preferenze, al comportamento e agli interessi degli utenti, per assicurarti che i messaggi siano pertinenti e di valore per ciascun utente. Gli utenti devono accettare di ricevere notifiche push web. Ciò garantisce che i messaggi non vengano visti come spam e che vengano inviati con il permesso degli utenti.

La parte più interessante è che puoi raccogliere iscritti alle notifiche push dal tuo popup email. Quindi, nel caso in cui i visitatori del tuo sito non vogliano cedere il loro ID email, puoi comunque farli iscrivere utilizzando le notifiche push web.

Consigliamo di utilizzare PushEngage per inviare notifiche push web.

Ecco una rapida panoramica di ciò che ottieni con PushEngage:

• Campagne automatizzate ad alta conversione
• Opzioni di targeting multiplo e pianificazione delle campagne
• Monitoraggio obiettivi e analisi avanzate
• Smart A/B test
• Un responsabile del successo dedicato

Puoi iniziare gratuitamente, ma se fai sul serio nel far crescere la tua attività, dovresti acquistare un piano a pagamento. Inoltre, prima di acquistare qualsiasi servizio di notifiche push, dovresti consultare questa guida ai costi delle notifiche push.

E se gestisci un negozio online, PushEngage ti aiuta anche a far crescere le tue vendite aiutandoti a creare notifiche push e-commerce automatizzate.

Vedrai che PushEngage è senza dubbio la scelta migliore se vuoi aumentare traffico, engagement e vendite per la tua attività. E se hai un budget limitato, puoi sempre essere un po' creativo con le tue notifiche push.

Vai alla pagina principale di PushEngage e fai clic sul pulsante Inizia:

Quindi, vorrai selezionare il piano gratuito per provare PushEngage o scegliere un piano a pagamento se fai sul serio nel far crescere la tua attività. I piani a pagamento offrono più opzioni di campagna e la possibilità di creare elenchi di iscritti ancora più grandi.

Nella tua dashboard PushEngage, vai su Impostazioni sito » Dettagli sito e fai clic sul pulsante Fai clic qui per le istruzioni di configurazione. Sotto Qualsiasi sito, otterrai il tuo codice di installazione:

ATTENZIONE: Devi copiare il codice che ottieni dalla tua dashboard. Il codice è unico per ogni utente di PushEngage. Non sarai in grado di copiare il codice nell'immagine e raccogliere gli iscritti alle notifiche push.

Una volta che hai il codice nella tua dashboard PushEngage, prendi il secondo script e aggiungi del codice extra. Il tuo codice finale dovrebbe assomigliare a questo:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>

Passaggio n. 6: Aggiungi il tuo codice di iscrizione al blocco HTML nel tuo popup

Aggiungi questo codice al blocco HTML in OptinMonster e hai finito!

Al termine, premi semplicemente i pulsanti Salva e Pubblica.

Passaggio n. 7: Aggiungi il tracciamento dei clic e la chiusura della campagna

L'ultima cosa che dobbiamo fare è aggiungere il codice di tracciamento dei clic per considerare ogni iscritto come una conversione in OptinMonster. Inoltre, quando il visitatore si iscrive, vorrai che passi alla schermata Successo o esca dalla campagna.

All'interno dello snippet Javascript, aggiungi le seguenti righe di codice:

Per abilitare il tracciamento delle conversioni, aggiungi questo codice:

om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster

Per spostare il tuo iscritto alla schermata di successo, aggiungi questo codice:

om{{id}}.changeView('success'); // Show Success view on submission

Per chiudere la campagna all'iscrizione, aggiungi questo codice:

om{{id}}.startClose();// Close campaign on submission

Puoi aggiungere anche più snippet di codice. Ti consigliamo di spostare gli iscritti alla schermata di successo e di tracciare la conversione. Quindi, lo snippet di codice finale che consigliamo di utilizzare (incluso il pulsante e tutto il Javascript) è:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
	<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

In alternativa, puoi usare questo codice per chiudere direttamente la campagna:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
	<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Copia e incolla semplicemente il codice nel blocco HMTL del tuo popup OptinMonster.

E per entrambi gli snippet di codice, ricorda di aggiungere il seguente CSS nella sezione CSS del tuo blocco HTML:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

Al termine, fai clic su Salva. Se controlli il tuo sito web, dovresti ora vedere il popup che raccoglie iscritti sia via email che tramite notifiche push:

E in un attimo, stai raccogliendo iscritti push dal tuo popup. Le notifiche push hanno i loro modali popup. Ma sono un po' difficili da personalizzare. Quindi, puoi creare bellissimi popup usando OptinMonster e poi usarli come tuoi popup per le notifiche push.

Passaggio n. 8: Pubblica il tuo popup Exit Intent in WordPress

Quando crei una nuova campagna, è in pausa per impostazione predefinita.

Vai alla scheda Pubblica dal menu in alto per vedere le Opzioni di pubblicazione. Quindi, imposta lo stato su Pubblica e seleziona la piattaforma del sito web:

Se gestisci un sito WordPress, il plugin OptinMonster gestisce automaticamente il resto della configurazione. Lo stesso vale per Shopify e BigCommerce. Per qualsiasi altro sito, fai clic su Qualsiasi sito e incolla il codice di incorporamento nell'intestazione del tuo sito web:

E hai finito!

Passaggio bonus: Disabilita l'installazione rapida in PushEngage

Quick Install è un metodo per aggiungere iscritti alle notifiche push a un sito web senza un certificato SSL. Al giorno d'oggi, quasi tutti i siti hanno un certificato SSL, ma nel caso non ne avessi uno installato, ti consigliamo vivamente di installarne uno subito. Dai un'occhiata a questo articolo su come installare un certificato SSL in WordPress.

Quindi, prima di iniziare a raccogliere iscritti sul tuo sito, ti consigliamo anche di disabilitare Quick Install. Vai alla dashboard di PushEngage e vai su Design » Popup Modals. Quindi, disabilita Quick Install:

E ora, sei pronto per promuovere il tuo sito web e raccogliere più iscritti per il Black Friday!

Cosa fare dopo aver iniziato a raccogliere iscritti alle notifiche push

Questo è tutto per questo, gente!

Facci sapere se questo articolo ti è stato d'aiuto. La creazione di popup sul tuo sito può aiutarti a convertire il tuo traffico in iscritti alle notifiche push e in lead aziendali reali. E ti consigliamo vivamente di iniziare subito a creare popup di exit intent.

E se stai cercando un modo conveniente per aumentare il tuo traffico, ti consigliamo di utilizzare le notifiche push. Le notifiche push possono aiutarti a generare più traffico di ritorno e coinvolgimento del sito. Puoi anche creare campagne di notifiche push automatizzate che generano vendite.

Non sei convinto? Dai un'occhiata a queste risorse:

• 7 Strategie Intelligenti per Aumentare l'Engagement dei Clienti
• Le notifiche push sono efficaci? 7 statistiche + 3 consigli degli esperti
• Come impostare le notifiche push per carrelli abbandonati (tutorial facile)
• Come aggiungere un plugin WordPress per notifiche web al tuo sito

Ti consigliamo di utilizzare PushEngage per creare le tue campagne di notifiche push. PushEngage è il software di notifiche push numero 1 al mondo. Quindi, se non l'hai già fatto, inizia oggi stesso con PushEngage!