Creare inviti all'azione (CTA)

Utilizzate lo strumento delle chiamate all'azione (CTA) per creare pulsanti CTA, banner o pop-up da aggiungere alle vostre pagine HubSpot e attirare nuovi visitatori. È anche possibile aggiungere CTA a pagine esterne.

Prima di aggiungere una CTA a una pagina esterna, è necessario installare il codice di tracciamento HubSpot o installare il plugin HubSpot WordPress sul proprio sito WordPress. Dopo aver aggiunto una CTA, è possibile indirizzare i visitatori verso pagine specifiche, link a riunioni o URL esterni.

Sui dispositivi mobili, è possibile scegliere di attivare un layout reattivo o di nascondere la CTA su schermi piccoli nelle opzioni della CTA. Dopo aver pubblicato la CTA, imparate come analizzarne le prestazioni.

Progettare una CTA

Nell'editor CTA, personalizzare il design della CTA per attirare i visitatori.

• Nel vostro account HubSpot, andate su Marketing > Lead Capture > CTA.
• In alto a sinistra, fare clic sul menu a discesa e selezionare CTA.
• In alto a destra, fate clic su Crea.
• È possibile creare una nuova CTA da zero o da un modello:
  • Per creare una nuova CTA da un modello, nel pannello di sinistra fare clic su Modelli di HubSpot. Quindi, selezionare un modello che corrisponda ai propri obiettivi.
  • Per creare una nuova CTA da zero, nel pannello di sinistra fare clic su Inizia da zero. Quindi, selezionare un tipo di CTA:
    
    • Sticky Banner: un banner permanente fissato nella parte superiore o inferiore della pagina. Il banner rimarrà mentre i visitatori scorrono la pagina.
    • Riquadro a comparsa: un riquadro a comparsa che appare in base a un orario prestabilito.
    • Slide-In: un banner che scorre da un angolo del sito. Il banner rimane mentre i visitatori scorrono la pagina.
    • Embedded: un banner, una call-to-action o un pulsante che potete utilizzare nei vostri contenuti HubSpot per portare i potenziali clienti a pagine specifiche.
    • Immagine incorporata: un'immagine che potete utilizzare nelle vostre pagine HubSpot o nelle vostre e-mail.
    • Incorporato: un pulsante da utilizzare nelle pagine di HubSpot o nelle e-mail.
• Nel pannello di sinistra, dalla scheda Aggiungi , aggiungete elementi e modificate il layout della vostra CTA:

• • Per aggiungere altri contenuti alla CTA, fate clic e trascinate un nuovo elemento direttamente nel pannello destro dell'editor. È anche possibile aggiungere elementi video alla CTA, per saperne di più sull'aggiunta di video alle CTA.
  • Per modificare il layout della CTA, passare il mouse su un elemento , fare clic e trascinarlo in una nuova posizione.
  • Per duplicare l'elemento, passare il mouse sull'elemento e fare clic sull'icona duplicate.
  • Per eliminare un elemento, passarci sopra e fare clic sull'icona del cestino delete.
  • Per modificare un elemento, fare clic sull'elemento. Nel pannello di sinistra è possibile modificare il contenuto e il design dell'elemento.

• Nel pannello di sinistra, fare clic sulla scheda Contenuto per gestire gli elementi.
  • Per modificare un elemento, fare clic sul nome dell'elemento. Nel pannello di sinistra, è possibile modificare il contenuto e il design dell'elemento. Negli elementi di testo ricco , è possibile utilizzare l'assistente di contenuto per creare o perfezionare il contenuto della CTA.
  • Per eliminare un elemento, passare il mouse sull'elemento e fare clic sull'icona delete per eliminarlo.
• Nel pannello di sinistra, fare clic sulla scheda Progettazione per personalizzare e visualizzare l'anteprima della CTA.
  • Per visualizzare l'anteprima della CTA su pagine specifiche, in alto a destra fare clic su Anteprima. Quindi, fare clic sul menu a discesa Anteprima su una pagina specifica e selezionare la pagina di HubSpot di cui visualizzare l'anteprima della CTA.

• • Per personalizzare l'aspetto della CTA, selezionare una delle seguenti opzioni. Quindi, configurare le modifiche nel pannello di sinistra.
    • Posizione: per le CTA di tipo sticky banner, è possibile selezionare una posizione superiore o inferiore. Per le CTA di tipo slide-in, si può scegliere di posizionare la CTA in alto a sinistra, in basso a sinistra, in alto a destra o in basso a destra della pagina.
    • Dimensionamento: configura l'altezza della CTA; è possibile attivare l'opzione per impostare automaticamente l'altezza in base al contenuto della CTA.
    • Layout: configura il layout della CTA. È possibile aggiungere un padding al contenuto della CTA. Si può anche attivare l'opzione per abilitare un layout reattivo. Con un layout reattivo, le colonne della CTA si impileranno verticalmente sugli schermi piccoli.
    • Stili: impostare gli stili della CTA, come il carattere principale, il bordo e l'ombra della CTA.
    • Sfondo: impostare uno sfondo per la CTA; si può scegliere di impostare un colore di sfondo o di caricare un'immagine di sfondo.

Progettare una CTA HTML

Per creare una CTA HTML incorporata personalizzata e applicare i propri temi o CSS:

• Nel pannello di sinistra, fare clic su Inizia da zero.
• Quindi, fare clic su Espandi opzioni avanzate e selezionare HTML incorporato.
• Fare clic sul menu a discesa Collegamento a e selezionare un'opzione a cui reindirizzare la CTA:
  • Indirizzo e-mail: creare un link mailto.
  • Download di file: collegare la CTA a un file nel file manager. Selezionate un file esistente o caricate un nuovo file, quindi selezionate la casella di controllo Apri la pagina in una nuova scheda se volete che i visitatori che fanno clic sul pulsante CTA visualizzino l'immagine in una nuova finestra del browser.
  • Collegamento alla riunione: collegare la CTA a un collegamento a una riunione di HubSpot. Fare clic sul menu a tendina Scegli un link alla riunione, quindi selezionare un link alla riunione. Per aprire il link in una nuova pagina, selezionare la casella di controllo Apri pagina in una nuova scheda.
  • Una delle vostre pagine: collegate la CTA a una delle vostre pagine HubSpot o a un post del blog. Fare clic sul menu a discesa Pagina e selezionare una pagina o un post. Il link della CTA del pulsante sarà legato all'ID della pagina e qualsiasi modifica dell'URL della pagina aggiornerà automaticamente il link della CTA del pulsante.
  • URL: collega la CTA a una pagina esterna a HubSpot. Nel campo Link URL, inserire l'URL del sito web a cui si desidera indirizzare i visitatori.
  • CTA: utilizzare la CTA personalizzata per attivare un banner adesivo, una casella pop-up o una CTA a scorrimento.
• Nel campo Contenuto del pulsante, inserire il testo della CTA.
• Per personalizzare ulteriormente il design della CTA, fare clic su Avanzate.
  

• Nella pagina Avanzate è possibile aggiungere classi o regole CSS personalizzate:
  • Classi CSS personalizzate: inserire una classe personalizzata per la CTA. Utilizzate le classi personalizzate per applicare stili di design, come le famiglie di caratteri, a più CTA nel vostro sito web. Ogni classe CSS personalizzata deve essere inclusa nel foglio di stile CSS utilizzato nelle pagine di HubSpot.
  • Regole CSS personalizzate: aggiungere regole personalizzate per applicare uno stile in linea specifico alla CTA.
    • Per aggiungere una nuova regola CSS, fare clic su Aggiungi uno o + Aggiungi e configurare il selettore e lo stile.
      • Selettore: inserire un selettore CSS. Questo valore è facoltativo e sarà combinato con il selettore della CTA. Ad esempio, se il selettore inserito è :hover, il selettore combinato diventa ${ctaSelector}:hover
      • Stile: inserire una regola di stile CSS personalizzata da applicare al selettore configurato. È possibile inserire uno stile senza inserire un selettore. Ad esempio, color: yellow;.
        

• Per modificare una regola CSS esistente, passare il mouse sulla regola e fare clic sull'icona edit.
• Per clonare una regola CSS, passare il mouse sulla regola e fare clic sull'icona duplicate clone.

• Per gestire la priorità delle regole CSS, fare clic e trascinare ogni regola per disporla in ordine di priorità.
• Per rimuovere una regola CSS, passare il mouse sulla regola e fare clic sull'icona delete delete.

• Per applicare alle CTA lo stesso HTML e le stesse classi delle CTA precedenti, selezionare la casella di controllo Usa markup precedente. Se nelle pagine sono presenti fogli di stile CSS che definiscono le CTA precedenti, la selezione di questa casella di controllo consentirà alla CTA HTML di adottare gli stessi stili.

• Per terminare l'impostazione del design della CTA, fare clic su Salva e applica.
  

Personalizzate dove e quando vengono visualizzati il banner adesivo, il riquadro a comparsa o la CTA a scorrimento.

Se avete impostato un banner adesivo, un riquadro a comparsa o una CTA a scorrimento, potete indirizzare i visitatori scegliendo quando far apparire questa CTA sul vostro sito. Per saperne di più sull'aggiunta di CTA alle pagine.

È possibile utilizzare i filtri per combinare più serie di regole su quali visitatori vedano la CTA. Per saperne di più sulla configurazione delle regole di targeting.

Attivazione

Selezionare un trigger di attivazione per determinare quando la CTA verrà visualizzata sulla pagina. La CTA apparirà una volta soddisfatta la prima attivazione selezionata.

• Nella parte superiore, fare clic sulla scheda Targeting .
• Nella sezione Quando deve essere visualizzata, fare clic per attivare l'interruttore accanto ai trigger di attivazione che si desidera utilizzare:
  • Attivazione al clic del pulsante: la CTA viene visualizzata quando un visitatore fa clic su un pulsante. Scoprite come impostare le CTA a comparsa in modo che si attivino al clic di un pulsante. Per impostazione predefinita, questa opzione è sempre attiva.
    • Configurate questa opzione nelle vostre pagine HubSpot con un modulo pulsante predefinito o nelle vostre pagine esterne personalizzando la classe di un pulsante.
    • Per impostare questa attivazione su una pagina esterna, è necessario installare il codice di tracciamento di HubSpot .
  • Trigger on page scroll: la CTA appare quando il visitatore ha superato una determinata percentuale della pagina.
  • Trigger on exit intent: la CTA appare quando il visitatore sposta il cursore sulla barra superiore della finestra del browser.
  • Attivazione dopo il tempo trascorso: la CTA apparirà dopo il numero di secondi specificato.
  • Attivazionedopo l'inattività: la CTA apparirà dopo che il visitatore è rimasto inattivo per un determinato numero di secondi.

URL del sito web

È possibile aggiungere una logica condizionale per URL specifici di pagine web e/o valori di parametri di query nella stessa scheda Targeting . Per impostazione predefinita, la CTA appare su tutte le pagine.

• Per mostrare la CTA quando un visitatore si trova su un URL specifico del sito web, nella sezione URL del sito web
  • Fare clic sul primo menu a tendina e selezionare URL del sito web.
  • Fare clic sul secondo menu a discesa e selezionare una regola di targeting.
  • Inserire i criteri della regola nel campo di testo.

• Per mostrare la CTA quando un visitatore si trova su una pagina web il cui URL include parametri di query specifici:
  • Fare clic sul primo menu a discesa e selezionare Parametro di query.
  • Nel primo campo di testo, inserire il nome del parametro di query.
  • Fare clic sul menu a tendina e selezionare una regola di targeting.
  • Nel secondo campo di testo, inserire il valore del parametro di query.

• Per aggiungere un'altra regola, fare clic su Aggiungi regola.
• Per escludere le chiamate all'azione da determinate pagine (ad esempio, una pagina di informativa sulla privacy), fare clic su Aggiungi regola di esclusione.
  
  
  

Informazioni e comportamento del visitatore (facoltativo)

Nella scheda Targeting è possibile indirizzare le CTA a contatti specifici in base alle informazioni e al comportamento dei visitatori. Il tipo di regole di filtraggio che è possibile aggiungere dipende dalle sottoscrizioni dell'account.

• Nella sezione Informazioni sul visitatore e comportamento (opzionale), fare clic sul primo menu a tendina per scegliere come filtrare i visitatori.

• Fare clic sul menu a discesa successivo per selezionare le regole di filtraggio.
• Per aggiungere altre regole su quando mostrare la CTA, fare clic su Aggiungi regola e selezionare i filtri.

• Selezionare quando nascondere la CTA:
  
  • Fare clic su Aggiungi regola di esclusione.
  • Il primo menu a tendina consente di scegliere quando la CTA deve essere nascosta.
  • Fare clic sul menu a discesa successivo per selezionare le regole di filtraggio.
  • Per aggiungere altre regole per nascondere la CTA, fare clic su Aggiungi regola di esclusione e selezionare i filtri.

• Per creare un'altra serie di regole di filtraggio, fare clic su Aggiungi gruppo di filtri e selezionare le regole di filtraggio.

Frequenza di visualizzazione

Dopo che un visitatore ha eliminato il banner adesivo, la casella pop-up o la CTA a scorrimento per la prima volta, è possibile scegliere se la CTA deve essere visualizzata di nuovo e con quale frequenza. Nella scheda Targeting impostare la frequenza di visualizzazione della CTA:

• Nella sezione Con quale frequenza verrà visualizzata, fare clic sul menu a tendinaMostra di nuovo e selezionare una frequenza:
  • Dopo un determinato periodo di tempo: configurare l'intervallo di tempo che deve trascorrere dopo che un visitatore ha eliminato la CTA, prima che venga visualizzata di nuovo.
  • Ripeti: visualizza la CTA ogni volta che il visitatore visita le pagine web selezionate ed esegue l'azione di attivazione, anche se ha già interagito con essa.
  • Non mostrare di nuovo: mostrare la CTA ai visitatori una sola volta. Dopo la visualizzazione iniziale, non mostrare mai più la CTA.
    

Personalizzare le opzioni CTA

Nelle schedeOpzioni è possibile personalizzare diverse opzioni della CTA, come la visualizzazione o meno della CTA su dimensioni ridotte, le campagne associate e la programmazione della CTA.

• In alto, fare clic sulla scheda Opzioni .
• Per associare la CTA a una campagna, fare clic sul menu a discesa Campagna e selezionare la campagna a cui associare la CTA a comparsa.
• Configurare le seguenti opzioni quando si utilizzano CTA sticky banner, pop-up box o slide-in:
  • Per nascondere la CTA su schermi di piccole dimensioni, nella sezione Dimensioni schermo piccole, selezionare la casella di controllo Disattiva su schermi di piccole dimensioni.
  • Per programmare il momento in cui la CTA inizia a essere visualizzata, attivare l'interruttore Pianifica per dopo. Quindi, selezionare una data e un'ora di inizio.
  • Per programmare quando la CTA smette di essere visualizzata, attivare l'interruttore Imposta data e ora di non pubblicazione . Selezionare quindi una data e un'ora di fine .
    

Pubblicare la CTA

Una volta terminata l'impostazione della CTA, pubblicatela per renderla operativa.

• In alto a destra, fare clic su Rivedi e pubblica.
• Nel pannello di destra, rivedere la CTA, quindi fare clic su Pubblica ora. La CTA verrà pubblicata automaticamente sulle pagine mirate.