Creazione di call-to-action (CTA)

Scritto da HubSpot Support | Nov 3, 2022 1:31:37 PM

Utilizzate lo strumento Call-to-action (CTA) per creare Chiamate HubSpot, banner o domande a comparsa da aggiungere alle vostre pagine HubSpot e attrarre 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 rata il plugin HubSpot WordPress sul vostro sito WordPress. Dopo aver aggiunto una CTA, guidate il traffico indirizzando i visitatori verso pagine specifiche, link per riunioni o URL esterni.

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

Progettare una CTA

Nell'editor CTA, personalizzare il design della CTA per attrarre i visitatori. Quando si creano le CTA, si può anche utilizzare il contenuto intelligente per visualizzare versioni diverse della CTA in base alla categoria dell'utente. Per saperne di più sull'uso del contenuto intelligente nelle CTA.

In alto a destra, fare clic su Crea.
In alto, selezionare la scheda Domanda o la scheda Inclusi e pulsanti.
- Le CTA a domanda includono i seguenti tipi:
  - Banner: un banner permanente fissato nella parte superiore o inferiore della pagina. Il banner rimarrà quando i visitatori scorreranno la pagina.
  - Domanda: una domanda a comparsa che appare secondo un calendario prestabilito.
  - Slide-In: un banner che scorre da un angolo del sito. Il banner rimane mentre i visitatori scorrono la pagina.
- Le CTA di tipo embed e button includono i seguenti tipi:
  - Embedded: un banner, una call-to-action o un pulsante che potete utilizzare sul vostro sito web o nelle e-mail di HubSpot per condurre i clienti potenziali a pagine specifiche.
  - Immagine incorporata: un'immagine da utilizzare nelle pagine o nelle e-mail di HubSpot.
Scegliete un modello in base al tipo di CTA che volete creare.
- Ogni modello di CTA avrà elementi personalizzabili come immagini e campi di testo.
- Ad esempio, è possibile selezionare un modello Clicca per chattare per lanciare un link a WhatsApp, oppure un modello Evento per consentire ai visitatori di registrarsi a una conferenza o a un workshop.

Nel pannello di sinistra, dalla scheda Aggiungi , aggiungere elementi e modificare il layout della CTA:

- Per aggiungere altri contenuti alla CTA, fare clic e trascinare un nuovo elemento direttamente nel pannello destro dell'editor. È anche possibile aggiungere elementi video alle CTA, per saperne di più sulle opzioni e sui requisiti necessari per aggiungere 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 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 per i contenuti basati sull'IA per creare o perfezionare i contenuti 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 HubSpot di cui visualizzare l'anteprima della CTA.

- Per personalizzare l'aspetto della CTA, selezionare una delle opzioni seguenti. 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. È possibile utilizzare font personalizzati per la CTA, per saperne di più sull'utilizzo di font personalizzati con i contenuti di HubSpot.
  - Sfondo: imposta uno sfondo per la CTA; si può scegliere di impostare un colore di sfondo o di caricare un'immagine di sfondo.
  - Opzione di chiusura: per le CTA a domanda, è possibile attivare l'opzione che consente ai visitatori di chiudere la CTA quando fanno clic in un punto qualsiasi al di fuori della casella di pop-up. Quando questa opzione è disattivata, i visitatori possono chiudere la CTA solo utilizzando l'icona di chiusura.

Progettare una CTA in 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.
- Link per riunioni: collegare la CTA a un link per riunioni di HubSpot. Fare clic sul menu a tendina Scegli un link per riunioni, quindi selezionare un link per riunioni. 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 domanda a comparsa 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 stili inline specifici 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 per eliminarla.

Per applicare alla 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, la casella di domanda o la CTA a scorrimento

Se avete impostato un banner adesivo, un riquadro a domanda o una CTA a scorrimento, indirizzate 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 domanda in modo che si attivino al clic di un pulsante. Per impostazione predefinita, questa opzione è sempre attiva.
  - Configurate questa opzione nelle pagine di HubSpot con un modulo pulsante predefinito o nelle pagine esterne personalizzando la classe di un pulsante.
  - Per impostare questa attivazione su una pagina esterna, è necessario che sia rata 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.
- Attivazione dopo 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 del sito web, nella sezione URL del sito web
- Fare clic sul primo menu a tendina e selezionare URL 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 del sito 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 call-to-action da alcune pagine, fare clic su Aggiungi regola di esclusione. Ad esempio, è possibile aggiungere un'esclusione per una pagina di privacy policy.

Informazioni e comportamento dei visitatori

Nella scheda Contatto è possibile definire contatti specifici in base alle informazioni e ai comportamenti noti dei visitatori. Il tipo di regole di filtraggio che è possibile aggiungere dipende dagli abbonamenti 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 la 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 a comparsa 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à mostrato, fare clic sul menu a discesaMostra 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.
  - La frequenza impostata non si applica ai sottodomini del sito web, anche se il tracciamento tra domini è attivato.
  - Ad esempio, se un visitatore attiva e disattiva una CTA a comparsa su blog.hubspot.com, ma successivamente naviga su knowledge.hubspot.com, la stessa CTA a comparsa comparirà di nuovo anche se la frequenza impostata non è passata. Dopo aver eliminato la CTA a comparsa, questa apparirà su ogni sottodominio corrispondente solo dopo che sarà passata la frequenza impostata per quel sottodominio.

- Ripeti: mostra la CTA ogni volta che i visitatori visitano le pagine web selezionate ed eseguono l'azione di attivazione, anche se hanno già interagito in precedenza.
- Non mostrare di nuovo: mostrare la CTA ai visitatori una sola volta. Dopo la visualizzazione iniziale, non mostrare mai più la CTA.
  - Questa regola non si applica ai sottodomini del sito web, anche se il tracciamento tra domini è attivato.
  - Ad esempio, se un visitatore attiva e disattiva una CTA a comparsa su blog.hubspot.com, ma successivamente naviga verso una pagina di knowledge.hubspot.com, la stessa CTA a comparsa continuerà a comparire per quel sottodominio e per tutti gli altri sottodomini in cui non è mai apparsa prima.

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

Personalizzare le opzioni di 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, le domande 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 Campagne 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:
- Url di tracciamento 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 indirizza i visitatori all'URL impostato.

Per i banner adesivi, le domande a comparsa o le CTA a scorrimento, è possibile programmare la data di visualizzazione della 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.

Visualizza articolo completo