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. È possibile aggiungere CTA anche 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.

Se si dispone di CTA preesistenti, si consiglia di migrarle al nuovo editor. Per saperne di più sulla migrazione delle CTA (legacy).

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ù sulle opzioni e sui requisiti necessari per aggiungere video alle CTA.
  • Per modificare il layout della CTA, passate il mouse su un elemento e fate clic e trascinatelo in una nuova posizione.
  • Per duplicare l'elemento, passare il mouse sull'elemento e fare clic sull'icona duplicate.
  • Per eliminare l'elemento, passare il mouse sull'elemento e fare clic sull'icona deletedelete.
  • 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 gli assistenti AI 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 con banner adesivo, è possibile selezionare una posizione superiore o inferiore. Per le CTA a scorrimento, è possibile 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 caricare un'immagine di sfondo.
    • Opzione di chiusura: per le CTA a comparsa, è possibile attivare l'opzione che consente ai visitatori di chiudere la CTA quando fanno clic in un punto qualsiasi al di fuori della casella a comparsa. Quando questa opzione è disattivata, i visitatori possono chiudere la CTA solo utilizzando l'icona di chiusura.

Progettare una CTA HTML

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

• 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. Per aprire questo link in una nuova pagina, selezionare la casella Apri link in una nuova scheda.
  • Download di file: collegare la CTA a un file nel file manager. Selezionate un file esistente o caricatene uno nuovo, quindi selezionate la casella di controllo Apri link 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 il link 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 del pulsante CTA sarà legato all'ID della pagina e qualsiasi modifica dell'URL della pagina aggiornerà automaticamente il link del pulsante CTA. Per aprire il link in una nuova pagina, selezionare la casella Apri link in una nuova scheda.
  • URL: collega la CTA a una pagina esterna a HubSpot. Nel campo URL del link, inserire l'URL del sito web a cui si desidera indirizzare i visitatori. Per aprire il link in una nuova pagina, selezionare la casella Apri link in una nuova scheda.
  • 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.
  

Personalizzare dove e quando viene visualizzato 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 vedranno 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

Aggiungete la logica condizionale per URL specifici di pagine web o valori di parametri di query nella stessa scheda Targeting . Per impostazione predefinita, la CTA apparirà su tutte le pagine.

• Per mostrare la CTA quando un visitatore si trova su un URL specifico di un 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 secondo menu a discesa 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 alcune pagine, fare clic su Aggiungi regola di esclusione. Ad esempio, è possibile aggiungere un'esclusione per una pagina di informativa sulla privacy.

Informazioni e comportamento dei visitatori

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

• Per visualizzare la CTA a tutti i visitatori dei siti web specificati, selezionare Tutti i visitatori. Questa opzione è selezionata per impostazione predefinita.
• Per visualizzare le CTA a visitatori specifici, fare clic sull'opzione Visitatori filtrati . Quindi, impostare i filtri:
  • Fare clic sul primo menu a discesa 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 le CTA, fare clic su Aggiungi regola e selezionare i filtri.

• • Selezionare quando nascondere la CTA:
    
    • Fare clic su Aggiungi regola di esclusione.
    • Fare clic sul primo menu a discesa per 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 chiuso 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: impostare il 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.
  • Nonmostrare di nuovo: mostrare la CTA ai visitatori una sola volta. Dopo la visualizzazione iniziale, non mostrare mai più la CTA.

Nota bene: questo non si applica alle CTA quando si utilizza Trigger on button click come trigger di attivazione di .

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 i banner adesivi, i riquadri a comparsa o le CTA a scorrimento, è possibile nascondere la CTA su schermi di piccole dimensioni. Nella sezione Dimensioni schermo piccole, selezionare la casella di controllo Disattiva su dimensioni schermo piccole.

• Se si dispone di un abbonamento a Marketing Hub Professional o Enterprise, è possibile associare la CTA a una campagna:
  • Per associare la CTA a una campagna esistente, fare clic sul menu a discesa Campagna e selezionare una campagna.
  • Per associare la CTA a una nuova campagna, fare clic sul menu a discesa Campagna e su Crea campagna. Quindi, continuare a impostare la campagna.

• • Se non si è mai creata una campagna, fare clic su Crea una campagna. Quindi, continuare a impostare la campagna.
• Configurare il modo in cui si desidera monitorare i clic con la CTA. Selezionare una delle seguenti opzioni:
  • Traccia i clic tramite reindirizzamento: traccia i clic sulla CTA indirizzando i visitatori a un URL iniziale, che associa il clic alla CTA, prima di reindirizzarli alla pagina finale. Questa opzione è selezionata per impostazione predefinita.
  • Traccia i clic attraverso il browser: traccia i clic in modo asincrono attraverso il browser del visitatore. Questa opzione consente di utilizzare i tag di ancoraggio, poiché non ci sono reindirizzamenti, la CTA indirizzerà i visitatori all'URL impostato.

• Per i banner adesivi, i riquadri a comparsa o le CTA a scorrimento, è possibile programmare la data di visualizzazione di una CTA:
  
  • Per programmare quando 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.