Crea inviti all'azione (CTA)

Utilizza lo strumento "Call-to-action" (CTA) per creare pulsanti CTA, banner o pop-up da aggiungere alle tue pagine HubSpot e attirare nuovi visitatori. Puoi anche aggiungere CTA a pagine esterne.

Prima di aggiungere un CTA a una pagina esterna, devi installare il codice di tracciamento HubSpot oppure installare il plugin HubSpot per WordPress sul tuo sito WordPress. Dopo aver aggiunto un CTA, indirizza i visitatori verso pagine specifiche, link alle riunioni o URL esterni per generare traffico. 

Sui dispositivi mobili, nelle opzioni del CTA puoi scegliere se abilitare un layout reattivo o nascondere il CTA sugli schermi di piccole dimensioni. Dopo aver pubblicato il tuo CTA, scopri come creare un test A/B per il tuo CTA e analizzarne le prestazioni. 

Progetta un CTA

Nell’editor del CTA, personalizza il design del tuo CTA per attirare i visitatori. Quando crei i CTA, puoi anche utilizzare i contenuti intelligenti per visualizzare diverse versioni del tuo CTA in base alla categoria di visitatori. Scopri di più sull’utilizzo dei contenuti intelligenti nei CTA. 

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > CTA. Se Altro non appare nel tuo account, vai direttamente a Marketing > CTA.
2. In alto a destra, fai clic su Crea.
3. Nella parte superiore, seleziona la scheda " Pop-up " o la scheda " Incorporamenti e pulsanti ". 
   • I CTA a comparsa includono i seguenti tipi: 
     
     • Banner: un banner permanente fissato nella parte superiore o inferiore della pagina. Il banner rimarrà visibile mentre i visitatori scorrono la pagina. 
     • Finestra pop-up: una finestra pop-up che appare secondo una tempistica prestabilita. 
     • Slide-In: un banner che scivola in primo piano da un angolo del sito web. Il banner rimarrà visibile mentre i visitatori scorrono la pagina. 
   • I CTA incorporati e sotto forma di pulsante includono i seguenti tipi: 
     • Incorporato: un banner, una call-to-action o un pulsante che puoi utilizzare sul tuo sito web o nelle email di HubSpot per indirizzare i potenziali clienti verso pagine specifiche.
     • Immagine incorporata: un'immagine che puoi utilizzare sulle tue pagine HubSpot o nelle tue email.
4. Scegli unmodello in base al tipo di CTA che desideri creare.
   • Ogni modello di CTA avrà moduli personalizzabili, come immagini e campi di testo.
   • Ad esempio, puoi selezionare un modello “Clicca per chattare ” per aprire un link a WhatsApp, un modello “Popup riunione ” per visualizzare una pagina di prenotazione di riunioni o un modello “Evento” per consentire ai visitatori di registrarsi alla tua conferenza o al tuo workshop,
5. Nel pannello di sinistra, dalla scheda "Aggiungi ", aggiungi i moduli e modifica il layout del tuo CTA: 

• • Per aggiungere ulteriori contenuti al tuo CTA, clicca e trascina un nuovo modulo direttamente nel pannello di destra dell’editor.
    • È possibile aggiungere solo un modulo Modulo (Nuovo editor) o Riunione a un CTA. Un singolo CTA non può contenere sia un modulo Modulo che un modulo Riunione. 
    • Alcuni moduli possono essere aggiunti solo una volta, come il timer per il conto alla rovescia o i moduli video.
    • Puoi anche aggiungere video al tuo CTA; scopri di più sui requisiti per l’aggiunta di video ai tuoi CTA. 
  • Per modificare il layout del tuo CTA, passa il mouse su un modulo, cliccaci sopra e trascinalo in una nuova posizione.
  • Per duplicare il modulo, passa il mouse sul modulo e cliccasull'icona di duplicazione/clonazione.
  • Per eliminare il modulo, passa con il mouse sul modulo e cliccasull'icona "Elimina". 
     

• • Per modificare un modulo, clicca sul modulo.
    • Nel pannello di sinistra puoi modificare il contenuto e il design del modulo.
    • Per chiudere un CTA a comparsa dopo che un visitatore ha inviato il modulo, durante la personalizzazione del modulo del modulo, puoi attivare l'opzione "Chiudi dopo l'invio" . 
       

7. Nel pannello di sinistra, fai clic sulla scheda "Contenuto " per gestire i tuoi moduli. 
   • Per modificare un modulo, clicca sul nome del modulo. Nel pannello di sinistra, puoi modificare il contenuto e il design del modulo. Nei moduli di testo formattato , puoi utilizzare gli assistenti AIper creare o perfezionare i contenuti del tuo CTA. 
   • Per eliminare un modulo, passa il mouse sul modulo e cliccasull’icona di eliminazione. 
8. Nel pannello di sinistra, clicca sulla scheda Design per personalizzare e visualizzare l’anteprima del tuo CTA.
   • Per visualizzare l’anteprima del tuo CTA su pagine specifiche, in alto a destra, clicca su Anteprima. Quindi, clicca sul menu a tendina “Anteprima su pagina specifica” e seleziona la pagina HubSpot su cui visualizzare l’anteprima del CTA. 

• • Per personalizzare l’aspetto del tuo CTA, seleziona una delle seguenti opzioni. Quindi, configura le modifiche nel pannello di sinistra. 
    • Posizione: per i CTA a banner fisso, è possibile selezionare una posizione in alto o in basso. Per i CTA a comparsa, è possibile posizionare il CTA in alto a sinistra, in basso a sinistra, in alto a destra o in basso a destra della pagina. Si consiglia di utilizzare un solo CTA a comparsa per pagina. L’uso di più CTA a comparsa può causare conflitti e impedire la visualizzazione dei CTA.
    • Dimensioni: configura l’altezza del tuo CTA; puoi attivare l’opzione per impostare automaticamente l’altezza in base al contenuto del tuo CTA. Se questa opzione non è selezionata, a volte apparirà una barra di scorrimento sul tuo CTA, a seconda del tuo design. 
    • Layout: configura il layout del tuo CTA. Puoi aggiungere un margine interno al contenuto del tuo CTA. Puoi anche attivare l’opzione per abilitare un layout reattivo. Con un layout reattivo, le colonne del tuo CTA si impileranno verticalmente sugli schermi di piccole dimensioni.
    • Stili: imposta gli stili per il tuo CTA, come il font principale, il bordo e l’ombra. Puoi utilizzare font personalizzati con il tuo CTA; scopri di più sull’uso dei font personalizzati con i tuoi contenuti HubSpot. 
    • Sfondo: imposta uno sfondo per il CTA; puoi scegliere di impostare un colore di sfondo o caricare un’immagine di sfondo.
    • Opzione di chiusura: per i CTA a finestra pop-up, puoi attivare l’opzione che consente ai visitatori di chiudere il CTA cliccando in un punto qualsiasi al di fuori della finestra pop-up. Quando questa opzione è disattivata, i visitatori possono chiudere il CTA solo utilizzando l’icona di chiusura. 

Progettare un CTA HTML

Per creare un CTA HTML incorporato personalizzato e applicare i tuoi temi personalizzati o CSS:

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > CTA. Se Altro non appare nel tuo account, vai direttamente a Marketing > CTA.
2. In alto a destra, clicca su " Crea".
3. Nella parte superiore, clicca sulla scheda " Incorporamenti e pulsanti ".
4. Nel menu della barra laterale sinistra, vai su "Avanzate". Quindi, seleziona " HTML incorporato".
5. Nel pannello di sinistra, clicca sul menu a tendina " Collegamento a " e seleziona un'opzione a cui reindirizzare il tuo CTA:
   • Indirizzo e-mail: crea un link mailto. Per aprire questo link in una nuova pagina, seleziona la casella di controllo " Apri link in una nuova scheda ". 
   • Download file: collega il tuo CTA a un file nel tuo gestore di file. Seleziona un file esistente o carica un nuovo file, quindi seleziona la casella di controllo "Apri link in una nuova scheda " se desideri che i visitatori che cliccano sul pulsante CTA visualizzino l’immagine in una nuova finestra del browser. 
   • Link alla riunione: collega il tuo CTA a un link alla riunione di HubSpot. Fai clic sul menu a discesa "Scegli un link alla riunione ", quindi seleziona un link alla riunione. Per aprire questo link in una nuova pagina, seleziona la casella di controllo "Apri link in una nuova scheda ". 
   • Una delle tue pagine: collega il tuo CTA a una delle tue pagine HubSpot o a un post del blog. Fai clic sul menu a discesa "Pagina", quindi seleziona una pagina o un post. Il link del pulsante CTA sarà associato all’ID della pagina e qualsiasi modifica all’URL della pagina aggiornerà automaticamente il link del pulsante CTA. Per aprire questo link in una nuova pagina, seleziona la casella di controllo "Apri link in una nuova scheda". 
   • URL: collega il tuo CTA a una pagina esterna a HubSpot. Nel campo " URL del link ", inserisci l’URL del sito web a cui desideri indirizzare i visitatori. Per aprire questo link in una nuova pagina, seleziona la casella di controllo "Apri link in una nuova scheda ". 
   • CTA: utilizza il CTA personalizzato per attivare un banner fisso, una finestra pop-up o un CTA a scorrimento.
6. Nel campo " Contenuto del pulsante ", inserisci il testo del tuo CTA. 
   

Nota:i collegamenti tra domini diversi non sono supportati nei CTA, anche se l’impostazione relativa ai collegamenti tra domini è stata attivata. 

7. Per personalizzare ulteriormente il design del tuo CTA, clicca su " Avanzate"
8. Nella pagina "Avanzate ", puoi aggiungere classi CSS personalizzate o regole:
   • Classi CSS personalizzate: inserisci una classe personalizzata per il tuo CTA. Utilizza le classi personalizzate per applicare stili di design, come le famiglie di caratteri, a più CTA presenti nel tuo sito web. Qualsiasi classe CSS personalizzata deve essere inclusa nel foglio di stile CSS utilizzato nelle tue pagine HubSpot.
   • Regole CSS personalizzate: aggiungi regole personalizzate per applicare stili inline specifici al tuo CTA.
     • Per aggiungere una nuova regola CSS, clicca su " Aggiungi una " o su " + Aggiungi " e, d , configura il selettore e lo stile. 
       • Selettore: inserisci un selettore CSS. Questo valore è facoltativo e verrà combinato con il selettore del CTA. Ad esempio, se il selettore inserito è :hover, il selettore combinato diventa ${ctaSelector}:hover
       • Stile: inserisci una regola di stile CSS personalizzata da applicare al selettore configurato. Puoi inserire uno stile senza specificare un selettore. Ad esempio, color: yellow;.
         
         

9. Per modificare una regola CSS esistente, passa il mouse sulla regola e fai clic sull’icona di modifica. 
10. Per clonare una regola CSS, passare il mouse sulla regola e fare clic sull'icona" duplicate " ( clona). 
11. Per gestire la priorità delle regole CSS, clicca e trascina ciascuna regola per disporle in ordine di priorità.
12. Per rimuovere una regola CSS, passa il mouse sulla regola e clicca sull'icona di eliminazione. 
13. Per applicare al CTA lo stesso codice HTML e le stesse classi dei CTA legacy, seleziona la casella di controllo "Usa markup legacy ". Se nelle pagine sono presenti fogli di stile CSS che definiscono lo stile dei CTA legacy, selezionando questa casella di controllo il CTA HTML adotterà gli stessi stili. 
14. Per completare la configurazione del design del tuo CTA, clicca su «Salva e applica».
     

Personalizza dove e quando visualizzare il tuo banner fisso, la finestra pop-up o il CTA a comparsa

Se hai configurato un banner fisso, una finestra pop-up o un CTA a scorrimento, seleziona i visitatori a cui rivolgerti scegliendo quando desideri che questo CTA appaia sul tuo sito. Scopri di più sull’aggiunta di CTA alle tue pagine. 

Puoi utilizzare i filtri per combinare più insiemi di regole relative ai visitatori a cui mostrare il tuo CTA. Scopri di più sulla configurazione delle regole di targeting.

Trigger di attivazione 

Seleziona un trigger di attivazione per determinare quando il CTA verrà visualizzato sulla tua pagina. Il CTA apparirà non appena verrà soddisfatto il primo trigger selezionato. 

1. Nella parte superiore, fai clic sulla scheda Targeting.
2.  Nella sezione " Quando deve essere visualizzato ", clicca per attivare o disattivare l’interruttore accanto ai trigger di attivazione che desideri utilizzare:
   • Attiva al clic sul pulsante: il CTA apparirà quando un visitatore clicca su un pulsante. Scopri come configurare i tuoi CTA a comparsa affinché si attivino al clic sul pulsante. Per impostazione predefinita, questa opzione è sempre attiva. 
     • Configura questa opzione nelle tue pagine HubSpot con un modulo pulsante predefinito oppure sulle tue pagine esterne personalizzando la classe di un pulsante.
     • Per impostare questo trigger su una pagina esterna, è necessario che sia installato il codice di tracciamento di HubSpot . 
   • Attivazione allo scorrimento della pagina: il CTA apparirà quando il visitatore avrà fatto scorrere la pagina oltre una percentuale specificata.
   • Attivazione all’intento di uscita: il CTA apparirà quando il visitatore mostra l’intento di uscire dalla pagina. 
     • Su desktop, il CTA apparirà quando il visitatore sposta il cursore sulla barra superiore della finestra del browser.
     • Su dispositivi mobili, il CTA apparirà quando: 
       • Il visitatore seleziona il pulsante “Indietro” nel browser, quando tenta di tornare a una pagina precedente.
       • Il visitatore riduce a icona la finestra del browser, per poi tornare successivamente al tuo sito web utilizzando lo stesso browser.
   • Attivazione dopo un certo periodo di tempo: il CTA apparirà dopo il numero di secondi specificato.
   • Attivazione in seguito a inattività: il CTA apparirà dopo che il visitatore sarà rimasto inattivo per un numero specificato di secondi.

URL del sito web

Aggiungi una logica condizionale per URL di pagine web specifici o valori dei parametri di query nella stessa scheda “Targeting ”. Per impostazione predefinita, il CTA apparirà su tutte le pagine.

1. Per visualizzare il CTA quando un visitatore si trova su un URL specifico del sito web, nella sezione "URL del sito web":
   • Fai clic sul primomenu a tendina eseleziona "URL del sito web".
   • Fare clic sul secondomenu a discesa eselezionare una regola di targeting.
   • Inserisci i criteri della regola nel campo di testo.
2. Per visualizzare il CTA quando un visitatore si trova su una pagina del sito web il cui URL include specifici parametri di query:
   • Fare clic sul primomenu a tendina eselezionare "Parametro di query".
   • Nel primo campo di testo, inserisciil nome del parametro di query.
   • Fai clic sul secondo menu a tendina e seleziona una regola di targeting.
   • Nel secondo campo di testo, inserisciil valore del parametro di query.
3. Per aggiungere un'altra regola, clicca su "Aggiungi regola".
4. Per escludere le call-to-action da determinate pagine, fare clic suAggiungi regola di esclusione. Ad esempio, potresti voler aggiungere un'esclusione per una pagina relativa all'informativa sulla privacy.

1. Nella sezione A chi verrà mostrata , imposta il pubblico per la tua CTA. Puoi scegliere tra le seguenti opzioni:
   • Tutti i visitatori: la CTA verrà visualizzata da tutti i visitatori. 
   • Visitatori filtrati: la CTA verrà visualizzata solo ai visitatori specificati
2. Nella sezione "Con quale frequenza verrà mostrata ", imposta la frequenza del tuo CTA. Fai clic sul menu a tendina "Mostra di nuovo " e seleziona una delle seguenti opzioni:
   • Dopo un determinato periodo di tempo:il CTA apparirà nuovamente dopo il periodo di tempo specificato. 
   • Ripeti: il CTA apparirà ogni volta che il visitatore naviga sulle pagine web selezionate ed esegue l’azione di attivazione, anche se ha già interagito con esso in precedenza.
   • Non mostrare più: non visualizzare mai più il CTA allo stesso visitatore. 
     
     

Personalizza le opzioni del tuo CTA

Nelleschede "Opzioni ", personalizza le diverse opzioni del CTA, ad esempio se visualizzarlo su schermi di piccole dimensioni, le campagne associate e la pianificazione del CTA. 

1. In alto, fai clic sulla scheda "Opzioni ".
2. Per i CTA sotto forma di banner fisso, finestra pop-up o slide-in, è possibile nascondere il CTA sugli schermi di piccole dimensioni. Nella sezione " Schermi di piccole dimensioni", seleziona la casella di controllo "Disattiva sugli schermi di piccole dimensioni".
3. Se disponi di un abbonamento a Marketing Hub Professional o Enterprise, puoi associare il CTA a una campagna:
   • Per associare il tuo CTA a una campagna esistente, fai clic sul menu a discesa "Campagna " e seleziona una campagna.
   • Per associare il tuo CTA a una nuova campagna, fai clic sul menu a discesa "Campagna " e seleziona "Crea campagna". Quindi, prosegui con la configurazione della campagna. 
   • Se non hai mai creato una campagna prima d'ora, fai clic su "Crea una campagna". Quindi, prosegui con la configurazione della campagna. 
4. Configura come desideri monitorare i clic con il tuo CTA. Scegli tra le seguenti opzioni: 
   • Traccia i clic tramite reindirizzamento: traccia i clic sul tuo CTA indirizzando i visitatori a un URL iniziale, che associa il clic al CTA, prima di reindirizzarli alla pagina finale. Questa opzione è selezionata per impostazione predefinita.
   • Traccia i clic tramite il browser: traccia i clic in modo asincrono tramite il browser del visitatore. Questa opzione ti consente di utilizzare i tag di ancoraggio poiché non sono presenti reindirizzamenti; il CTA indirizzerà i visitatori all’URL impostato. 
5. Per i banner fissi, le finestre pop-up o i CTA a comparsa, puoi programmare quando un CTA viene visualizzato:
   
   • Per programmare quando il CTA inizia a essere visualizzato, attiva l’interruttore “Programma per dopo ”. Quindi, seleziona una data e un’ora di inizio. 
   • Per programmare quando il CTA smette di essere visualizzato, attiva l'interruttore "Imposta data e ora di rimozione ". Quindi, seleziona una data e un'ora di fine . 
     
     

Pubblica il tuo CTA 

Una volta completata la configurazione del tuo CTA, pubblicalo per renderlo attivo. 

1. In alto a destra, fare clic su "Rivedi e pubblica".
2. Nel pannello di destra, controlla il tuo CTA, quindi fai clic su "Pubblica ora". Il CTA verrà pubblicato automaticamente sulle pagine di destinazione.