Connectif consente di aggiungere facilmente contenuti web personalizzati al tuo eCommerce senza la necessità di modificare il codice o alterare la sua struttura.
In questo articolo imparerai come inserire contenuti Connectif incorporati nel tuo sito web.
Tempo di implementazione: 15 minuti.
Difficoltà: Media
Quando utilizzarlo: Quando desideri includere contenuti (statici o dinamici) nel tuo sito web senza modificare il codice.
PASSO 1. Localizzazione del selettore appropriato nel codice
(In questa sezione si identifica l'etichetta appropriata del sito web in cui Connectif mostrerà il contenuto).
Puoi saltare questo primo passaggio e iniziare dal PASSO 2 se:
— Conosci già il selettore e l'identificatore unico da utilizzare.
— Vuoi creare un selettore specifico per il tuo contenuto web per evitare che modifiche o aggiornamenti nel codice del tuo eCommerce modifichino o impediscano la visualizzazione dei contenuti inseriti. In questo caso, ti consigliamo di utilizzare un blocco "div" con un identificatore (id) unico che lo distingua. Ricorda che dovrai aggiungerlo nel codice del tuo eCommerce prima di continuare.
1.1 Localizzare il selettore
Un selettore identifica un elemento HTML, situato in qualsiasi punto della pagina web, tramite il suo ID, classe o attributo. Questo selettore sarà il riferimento per indicare a Connectif dove vuoi visualizzare il contenuto.
1. Accedi alla pagina del tuo sito web dove desideri aggiungere il contenuto incorporato.
2. Visualizza il blocco che desideri utilizzare come riferimento.
Nel nostro esempio, l'obiettivo è inviare il contenuto affinché appaia proprio sopra il blocco "CUSTOM TEXT BLOCK".
3. Apri la console degli strumenti di sviluppo (DevTools) del browser.
Tutti i browser hanno un'opzione nel menu per aprirla. Qui trovi indicazioni per aprirla su Google Chrome (browser utilizzato nel nostro esempio), Mozilla Firefox, Microsoft Edge e Safari.
In alternativa, se stai utilizzando Chrome, Firefox o Edge, puoi utilizzare il tasto di scelta rapida F12.
4. Seleziona la scheda Elements nella console per visualizzare la struttura HTML.
5. Clicca sull'icona Ispeziona, la prima a sinistra nel menu superiore.
6. Posiziona il cursore del mouse sull'area del contenuto che intendi utilizzare come riferimento. Fai clic quando la selezione è corretta affinché l'etichetta venga evidenziata nella console.
Nel nostro esempio, l'etichetta evidenziata, "<div id=”customer-text”>", è caratterizzata dall'attributo globale "id" con il valore "custom-text". Questo blocco div contiene tutta l'area selezionata.
1.2 Verificare che il selettore sia unico.
(In questa sezione si verifica che il parametro per identificare l'etichetta non sia ripetuto in altre etichette).
7. Clicca sul contenuto della scheda Elements della console e utilizza la scorciatoia da tastiera Control + F per cercare il nome dell'etichetta o dell'attributo.
Nel nostro esempio, l'identificatore "custom-text" ha solo una corrispondenza, quindi è adatto per essere utilizzato come selettore.
Il selettore deve essere unico, per evitare che il contenuto venga visualizzato più volte in posizioni diverse. Se la ricerca mostra più di una corrispondenza, sarà necessario trovare un altro selettore appropriato.
Gli attributi hanno molteplici opzioni di utilizzo e sono comuni a molti contenuti web. Se desideri saperne di più su di essi per approfondire il loro utilizzo nei contenuti web di tipo inline, clicca qui.
8. Copia il nome del tuo selettore unico negli appunti o in un blocco note.
9. Chiudi la console di sviluppo.
PASSO 2. Visualizzare il contenuto incorporato nel sito web
2.1 Creare un workflow per visualizzare il contenuto
10. Accedi a "Workflows" e clicca su Crea nuovo workflow.
11. Progetta la tua strategia stabilendo le condizioni per visualizzare il contenuto incorporato ai contatti.
Un workflow con l'obiettivo di inserire contenuto incorporato nel sito web deve contenere almeno un nodo "Invia contenuto web".
Nel nostro esempio, è stata creata una strategia semplice che mostra un contenuto a tutti i contatti che visitano la home.
Ricorda che puoi utilizzare i nostri modelli che inviano contenuti incorporati.
12. Configura il resto dei nodi del workflow, ad eccezione del nodo "Invia contenuto web" (le istruzioni per configurarlo si trovano nel passo successivo).
Nel nostro esempio, il pubblico è stato definito nel nodo "Inizio" per tutti i contatti esistenti e nuovi. Il nodo trigger "Alla visita della pagina" è stato configurato per attivarsi esclusivamente nella home.
Se desideri saperne di più su questi due nodi, puoi consultare gli articoli Nodo "Inizio" e Nodi di tipo trigger.
2.2 Configurare il nodo "Invia contenuto web"
13. Nel nodo “Invia contenuto web”, fai clic su (Modifica configurazione nodo).
Se sei interessato a saperne di più sul nodo "Invia contenuto web", fai clic qui.
14. Nel primo passo della configurazione, seleziona o crea un nuovo contenuto inline.
Tra i diversi contenuti web, solo il tipo inline viene incorporato nella struttura del sito, mentre gli altri vengono visualizzati al di sopra di essa.
Per saperne di più sul contenuto web di tipo inline, fai clic qui.
15. Fai clic su Successivo .
16. Incolla nella sezione Selettore il nome ottenuto al punto 8 e seleziona il tipo nei pulsanti alla sua sinistra.
Nel nostro esempio, abbiamo lasciato selezionato l'attributo globale Id predefinito e incollato il valore "custom-text" ottenuto al punto 8.
17. Scegli la posizione rispetto all'elemento selezionato in cui verrà incorporato il tuo contenuto.
Puoi scegliere di inserire il tuo design immediatamente prima o dopo il blocco a cui punta il selettore, o anche all'interno di esso.
Se indichi di mostrare Sostituendo l'interno, il contenuto generato da Connectif sostituirà il contenuto originale, che non verrà visualizzato.
18. Fai clic su Successivo .
19. Associa le variabili se necessario.
Se non ci sono variabili definite nel tuo contenuto, come nel nostro esempio, non è necessario configurare nulla in questo passaggio.
Nel caso in cui il tuo contenuto contenga variabili personalizzate, dovrai associarle in questo passaggio alle informazioni provenienti da altri nodi.
Se desideri saperne di più sulle variabili, fai clic qui.
20. Fai clic su Fine .
21. Nel workflow, fai clic su Salva per salvare le modifiche e su Avvia per attivarlo.
22. Verifica sul tuo sito web che il contenuto venga visualizzato come previsto.
Successo!
Il tuo contenuto di Connectif è ora incorporato nel tuo sito web.
USI ALTERNATIVI
Utilizza i contenuti web incorporati in modo intelligente per migliorare ulteriormente i tuoi risultati.
1. Inserire contenuto incorporato invisibile al visitatore
(In questa sezione si spiega come includere da Connectif codice HTML nel tuo sito senza alcun elemento visivo).
I contenuti inline invisibili sono molto utili per eseguire azioni che non richiedono la visualizzazione di un contenuto. Un esempio molto utilizzato è quello di chiedere l'iscrizione alle notifiche push senza mostrare alcun contenuto web.
1. Accedi a “Contenuto > Contenuti web” e fai clic su Crea nuovo contenuto web.
2. Seleziona come tipo di contenuto web Inline.
3. Dai un nome al tuo contenuto.
3. Fai clic su Crea contenuto web.
4. Aggiungi un componente avanzato di tipo HTML.
5. Scrivi il contenuto del codice HTML.
6. Premi Salva.
7. Crea un workflow seguendo i passaggi di questa guida a partire dal PASSO 2, per utilizzare il tuo contenuto incorporato invisibile al visitatore.
Continua a imparare!
Per sfruttare tutto il potenziale del tuo account in Connectif, ti consigliamo di continuare con i seguenti articoli:
- Integrazione personalizzata per inviare dati, per inviare dati da Connectif a sistemi o applicazioni esterne.
- Rilevare e reagire a link web creati fuori da Connectif, per rilevare e reagire ai clic su qualsiasi link del tuo sito.
-
Integrazione con Facebook e Instagram, per collegare il tuo account Facebook Ads a Connectif e iniziare a gestire il tuo pubblico.
-
Formulari integrati, per integrare in Connectif i moduli già esistenti sul tuo sito.