Come Aggiungere Facilmente Smart App Banner in WordPress

Molti sviluppatori di app ci hanno chiesto: c'è un modo per promuovere le app mobili direttamente dal tuo sito WordPress? La risposta è sì, ed è più facile di quanto pensi.

Uno dei modi più semplici per farlo è con i banner per app intelligenti. Questi banner appaiono nella parte superiore del tuo sito web quando visualizzati su iPhone e iPad, incoraggiando i visitatori a scaricare o aprire la tua app. Puoi persino mostrare banner agli utenti Android utilizzando il plugin giusto.

I banner per app intelligenti non sono fastidiosi come i popup. Invece, si integrano naturalmente con il tuo sito e danno ai visitatori una leggera spinta a scaricare o aprire la tua app. Il risultato? Più download, un migliore coinvolgimento degli utenti e un'esperienza mobile più professionale.

Abbiamo testato vari metodi per aggiungere questi banner a WordPress e abbiamo trovato due approcci che funzionano perfettamente per qualsiasi livello di competenza.

Il primo utilizza un semplice snippet di codice per aggiungere il banner nativo di Apple per iOS, mentre il secondo utilizza un plugin che supporta sia i dispositivi iOS che Android con personalizzazione completa del design. Ti guideremo attraverso entrambe le opzioni passo dopo passo.

TLDR Riassunto Rapido: I banner per app intelligenti sono banner nativi iOS che appaiono in Safari, incoraggiando i visitatori a scaricare o aprire la tua app. Il modo più semplice per aggiungerli in WordPress è con un plugin gratuito chiamato WPCode.

Se vuoi anche mostrare banner agli utenti Android, puoi utilizzare il plugin Mobile Smart App Banner, che supporta entrambe le piattaforme e ti consente di personalizzare completamente il design del banner.

Perché Aggiungere Smart App Banner in WordPress?

Utilizzare un banner per app intelligente sul tuo sito web WordPress può aiutarti a ottenere più download e acquisti della tua app mobile.

Molti proprietari di siti web creano un'app mobile complementare in cui i visitatori possono navigare i loro contenuti in un modo ottimizzato per dispositivi mobili.

Poiché queste app sono progettate per dispositivi mobili, spesso offrono un'esperienza utente migliore. Puoi anche mostrare promemoria, contenuti personalizzati, offerte, aggiornamenti e altro ancora utilizzando le notifiche push mobili. Tutto ciò significa maggiore coinvolgimento, conversioni e vendite.

Puoi incoraggiare gli utenti di iPhone e iPad a scaricare la tua app mobile utilizzando un banner per app intelligente.

Questo è un banner che appare nella parte superiore dello schermo quando un utente iOS visita il tuo sito utilizzando il browser Safari.

I visitatori possono fare clic sul banner per scaricare la tua app dall'App Store. Se il visitatore ha già la tua app, il banner gli chiederà di aprirla invece. In questo modo, puoi ottenere più download e interazioni con l'app.

Se il visitatore utilizza un dispositivo non Apple o un browser web diverso, il banner nativo per app intelligenti di Apple non apparirà.

Tuttavia, come ti mostreremo nel Metodo 2, puoi utilizzare un plugin per visualizzare banner di download di app anche agli utenti Android e ai visitatori che utilizzano altri browser.

Detto questo, vediamo come puoi aggiungere banner intelligenti per app in WordPress. Utilizza semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

Metodo 1: Utilizzo di WPCode (Mostra un banner intelligente per app su tutto WordPress)

Il modo più semplice per aggiungere banner di app intelligenti al tuo sito Web WordPress è utilizzare WPCode. Questo plugin gratuito ti consente di mostrare lo stesso banner su ogni pagina e post utilizzando una sola riga di codice.

Quando aggiungi codice personalizzato a WordPress, alcune guide ti chiederanno di modificare il file functions.php del tuo sito. Non lo consigliamo, poiché anche un piccolo refuso o errore potrebbe causare errori comuni di WordPress o persino rendere il tuo sito inaccessibile.

Utilizzando WPCode, puoi aggiungere codice personalizzato ai file del tuo tema WordPress senza alcun rischio. Puoi anche abilitare e disabilitare gli snippet di codice con un clic.

Innanzitutto, devi installare e attivare il plugin gratuito WPCode. Per ulteriori istruzioni, consulta la nostra guida per principianti su come installare un plugin WordPress.

Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet. Successivamente, fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’.

Successivamente, devi selezionare ‘Snippet HTML’ come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Questo ti porterà alla pagina ‘Crea Snippet Personalizzato’, dove potrai digitare un nome per lo snippet di codice.

Questo è solo per tuo riferimento, quindi puoi usare quello che vuoi.

Per il passaggio successivo, dovrai conoscere l'ID della tua applicazione.

Per ottenere queste informazioni, apri una nuova scheda del browser e vai alla pagina Strumenti di marketing dei servizi Apple. Qui, digita il nome dell'applicazione che desideri promuovere e fai clic sull'icona "Cerca".

Per vedere tutte le app iOS che corrispondono al tuo termine di ricerca, scorri semplicemente fino alla sezione ‘App’.

Qui, trova l'app che desideri promuovere e fai clic su di essa.

In fondo alla schermata, vedrai un ‘Link Contenuto’.

L'ID dell'app è il valore tra id e ?. Avrai bisogno di queste informazioni nel passaggio successivo, quindi lascia questa scheda aperta o prendi nota dell'ID dell'app.

Ora che hai l'ID dell'app, torna alla dashboard di WordPress.

Ora puoi aggiungere il seguente snippet nell'editor di codice, sostituendo l'ID dell'app con le informazioni che hai ottenuto nel passaggio precedente:

<meta name="apple-itunes-app" content="app-id=12345678">

Fatto ciò, scorri fino alla casella "Inserimento".

Se non è già selezionato, fai clic su "Inserimento automatico" e quindi seleziona "Intestazione sito" dal menu a discesa.

Quando sei pronto, scorri fino in cima alla pagina e sposta l'interruttore ‘Inattivo’ su ‘Attivo’.

Infine, fai semplicemente clic sul pulsante ‘Salva Snippet’ per memorizzare le tue modifiche.

Ora, il banner dell'app intelligente apparirà sul tuo sito Web WordPress.

Come mostrare banner diversi su pagine e post specifici

Come hai visto, è facile aggiungere un banner intelligente a WordPress utilizzando WPCode.

Ma cosa succede se vuoi promuovere app diverse su pagine diverse?

Ad esempio, forse gestisci un blog di lifestyle e hai un'app di ricette che vuoi promuovere sui tuoi post relativi al cibo. Allo stesso tempo, potresti avere un'app di fitness che vuoi promuovere sulle tue pagine di allenamento.

In tal caso, ti consigliamo di eseguire l'aggiornamento a WPCode Premium (a partire da $49/anno). Questo plugin dispone di una logica condizionale intelligente che ti consente di controllare esattamente dove vengono eseguiti gli snippet di codice. Ciò significa che puoi creare più banner di app intelligenti e quindi visualizzarli su qualsiasi pagina o post. 

Per prima cosa, visita il sito Web di WPCode e acquista un abbonamento. Puoi quindi procedere all'installazione, proprio come qualsiasi altro plugin di WordPress.

Successivamente, vai su WPCode » Impostazioni nella tua bacheca di WordPress e inserisci la tua chiave di licenza.

Puoi trovare queste informazioni accedendo al tuo account sul sito Web di WPCode, o controllando l'email di conferma dell'acquisto che hai ricevuto quando hai acquistato WPCode. 

Fatto ciò, vai su Snippet di codice » Aggiungi snippet nella tua bacheca di WordPress. Qui, passa il mouse sopra la sezione 'Aggiungi il tuo codice personalizzato'.

Quando appare, seleziona 'Aggiungi snippet personalizzato'.

Nel pannello successivo, fai clic su 'Snippet HTML'.

Successivamente, dai al tuo snippet un nome descrittivo in modo da poter identificare facilmente l'app che promuove.

Ad esempio, potresti chiamarlo 'Banner App Intelligente – App Ricette'.

Nell'Editor di codice, aggiungi il meta tag per la tua prima app.

Assicurati di sostituire l'ID dell'app con quello corretto per la tua applicazione:

<meta name="apple-itunes-app" content="app-id=YOUR_FIRST_APP_ID">

Quindi, scorri fino alla sezione 'Inserimento' e seleziona 'Inserimento automatico', se non è già selezionato.

Successivamente, apri il menu a discesa 'Posizione' e seleziona 'Intestazione sito'.

Successivamente, scorri un po' più in basso fino alla sezione 'Logica condizionale intelligente'. 

Qui, fai clic per attivare l'impostazione 'Abilita logica'.

Ora è il momento di creare la tua regola di logica condizionale intelligente.

Per iniziare, apri il menu a discesa 'Condizioni' e seleziona 'Mostra'. Quindi, fai clic su 'Aggiungi nuovo gruppo'.

Successivamente, fai clic sul primo menu a discesa (che mostra 'Connesso' per impostazione predefinita).

Questo aggiunge una sezione completamente nuova.

Nel menu di sinistra, seleziona 'Dove'.

Quindi, scegli 'Post/Pagina'.

Fatto ciò, fai clic sul secondo menu a discesa e scegli 'È uno di', se non è già selezionato.

Infine, fai clic sul terzo campo e cerca la pagina o il post specifico in cui desideri visualizzare questo banner dell'app.

Vuoi mostrare questo banner su più pagine o post? Allora fai semplicemente clic su 'Aggiungi nuovo gruppo'.

Ora puoi ripetere questi passaggi per selezionare post o pagine aggiuntivi.

Quando sei soddisfatto di come è configurato questo snippet, scorri fino in cima alla pagina e sposta l'interruttore 'Inattivo' su 'Attivo'. Infine, fai clic sul pulsante 'Salva snippet' per memorizzare le tue modifiche.

Ora, ripeti questo processo per ogni app aggiuntiva che desideri promuovere. 

WPCode mostrerà ora il banner dell'app intelligente corretto in base alla pagina o al post che il visitatore sta attualmente visualizzando.

Come Testare il Codice del Banner Smart App in WordPress

Il modo migliore per testare il banner dell'app intelligente è visitare il tuo sito Web su un dispositivo iOS utilizzando l'app mobile Safari. Infatti, il banner dell'app intelligente non apparirà nemmeno se provi a visualizzare la versione mobile del tuo sito WordPress dal desktop.

Se hai bisogno di verificare rapidamente se lo snippet di codice funziona, una soluzione è utilizzare lo strumento Ispeziona del tuo browser. Ti consente di vedere se il codice <meta name> è stato inserito nella sezione <head> del tuo sito, il che suggerisce che sta funzionando come previsto.

Per fare ciò, vai a qualsiasi pagina o post sul tuo blog WordPress. Quindi, fai clic con il pulsante destro del mouse in un punto qualsiasi della pagina e seleziona "Ispeziona".

Si aprirà un nuovo pannello che mostrerà tutto il codice del sito.

Trova semplicemente la sezione <head> e fai clic sulla sua freccia per espanderla.

Ora, cerca il codice <meta name="apple-itunes-app"> che hai aggiunto nel passaggio precedente.

Se vedi questo codice, il banner dell'app intelligente dovrebbe apparire sui dispositivi iOS.

Metodo 2: Utilizzo di Mobile Smart App Banner (Aggiungi banner per iOS e Android)

Se desideri un plugin che supporti sia gli utenti iOS che Android, ti consigliamo di utilizzare il plugin Mobile Smart App Banner.

È un plugin gratuito che rileva automaticamente il dispositivo del visitatore e mostra il link appropriato all'app store. 

Il banner include un pulsante ‘Chiudi’ integrato in modo che i visitatori possano chiuderlo e utilizza i cookie per ricordare questa decisione.

Tieni presente che il banner non apparirà per 7 giorni dopo essere stato chiuso.

Innanzitutto, dovrai installare e attivare il plugin Mobile Smart App Banner. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin di WordPress.

Dopo l'attivazione, vai su Impostazioni » Mobile Smart App Banner nella tua bacheca di WordPress.

Qui, seleziona la casella accanto all'opzione ‘Abilita banner app’ per attivare il banner sul tuo sito. 

Fatto ciò, fai clic sul pulsante ‘Carica’.

Quindi, seleziona l'immagine che desideri utilizzare come icona della tua app (consigliamo di utilizzare un'immagine di 512x512px).

Puoi anche scegliere dove appare il banner sullo schermo aprendo il menu a discesa ‘Posizione banner’ e scegliendo un'opzione dall'elenco.

Abbiamo scoperto che posizionare il banner in fondo allo schermo è meno invasivo e può spesso portare a un maggiore coinvolgimento.

Dopodiché, puoi digitare il nome della tua app nel campo ‘Nome app’ e inserire una breve descrizione nella casella ‘Sottotitolo app’. 

Successivamente, aggiungi il tuo link all’App Store e il tuo link al Play Store nei campi corretti.

Se desideri modificare l'aspetto del banner, scorri fino alla sezione ‘Impostazioni colore’. 

Qui puoi modificare il colore di sfondo, il colore del pulsante, il colore del testo del pulsante e altro ancora, utilizzando le varie impostazioni.

C'è anche un'anteprima in tempo reale, così puoi provare facilmente molte impostazioni per vedere quale funziona meglio. 

In alternativa, puoi utilizzare il banner smart app nativo di Apple in Safari, deselezionando la casella accanto a ‘Abilita banner smart app iOS’.

Dovrai quindi inserire il tuo ID App Store, che puoi trovare utilizzando lo stesso processo descritto nel Metodo 1. 

Quando questa opzione è abilitata, gli utenti di Safari vedranno il banner nativo di Apple, mentre gli utenti di Chrome, Firefox e altri browser iOS vedranno invece il tuo banner personalizzato.

Fatto ciò, scorri fino in fondo alla pagina e fai clic su ‘Salva modifiche’ per rendere attivo il tuo banner.

Domande frequenti sull'aggiunta di banner intelligenti per app in WordPress

Se hai ancora domande, ecco le nostre principali FAQ su come aggiungere banner intelligenti al tuo sito web WordPress.

Cos'è un banner per app intelligenti?

I banner delle app intelligenti appaiono nella parte superiore del browser web Safari e offrono agli utenti dell'app la possibilità di aprire un'app o scaricarla dall'Apple App Store.

Poiché sono stati creati da Apple, i banner delle app intelligenti hanno un design coerente che molti utenti iOS riconoscono. Appaiono solo alle persone che utilizzano iPhone e iPad con iOS 6 o versioni successive.

Perché non riesco a vedere il mio banner dell'app intelligente sul desktop?

Il banner dell'app intelligente non apparirà sui computer desktop, anche se visualizzi la versione mobile del tuo sito.

Per vedere il banner in azione, dovrai visitare il tuo sito su un iPhone o iPad utilizzando l'app mobile Safari.

Perché non riesco a vedere il banner dell'app intelligente sul mio iPhone o iPad?

I banner delle app intelligenti appaiono solo sui dispositivi con iOS 6 o versioni successive quando si utilizza l'app mobile Safari. Se non vedi il banner dell'app intelligente, dovresti iniziare controllando di avere le ultime versioni sia di iOS che dell'app mobile Safari.

Il banner dell'app intelligente rileva anche se il dispositivo supporta l'app e se l'app è disponibile nella tua posizione. Se non vedi il banner dell'app intelligente, è possibile che il tuo dispositivo non abbia superato uno di questi controlli.

Perché il banner dell'app intelligente è scomparso in Safari?

Se chiudi il banner facendo clic sul pulsante 'x', non apparirà più per impostazione predefinita.

A seconda del tuo dispositivo mobile, potrebbe essere necessario aprire una scheda del browser privata, cancellare la cache o i cookie, o eseguire altre azioni per reimpostare le impostazioni.

I banner smart app funzionano sui dispositivi Android?

No, i banner smart app nativi di Apple sono esclusivi per i dispositivi iOS che utilizzano il browser Safari. Android non ha un equivalente integrato.

Tuttavia, puoi utilizzare un plugin di WordPress come Mobile Smart App Banner per visualizzare banner personalizzati per il download di app ai visitatori Android.

Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere banner per app intelligenti in WordPress. Potresti anche voler consultare la nostra guida alle migliori pratiche per le call-to-action o le nostre scelte esperte per i migliori strumenti per lead magnet di WordPress per aumentare le conversioni.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.