Anche se le notifiche sono un ottimo strumento, non sempre si desidera che le cose si muovano sullo schermo. A volte si desidera incorporare i contenuti nel sito web per farli sembrare parte del sito stesso. A questo scopo abbiamo i touchpoint di contenuto incorporato.
Per iniziare a configurarne uno, selezionare Sito web - Contenuti integrati.
Nota: dopo aver selezionato il contenuto, è importante impostare il selettore CSS. Se non vi è chiaro come funziona, consultate questo articolo.
Una volta completata la selezione del CSS, possiamo dedicarci all'editor.
In genere si desidera che il contenuto incorporato corrisponda allo stile del sito web. Per semplificare le cose, potete copiare le proprietà dei contenuti esistenti sul vostro sito web.
Per farlo, si possono seguire i seguenti passaggi:
Cliccate con il tasto destro del mouse sull'elemento che volete usare come modello;
Fare clic su Ispeziona;
3. Fare clic con il pulsante destro del mouse sull'elemento che si desidera utilizzare;
4. Copia - Copia outer HTML;
5. Infine, incollate il tutto nella scheda HTML dell'editor (Aspetto - Editor). Se volete rendere il vostro codice un po' più pulito senza dover lavorare, vi consigliamo di dare un'occhiata a questo strumento online.
Se sono stati selezionati più elementi html (come nella figura precedente), nell'editor di codice verrà visualizzato un elenco di elementi html. Assicuratevi di cancellare tutti gli elementi tranne 1. Il motivo è che vogliamo usare questo singolo elemento per generare dinamicamente tutti gli elementi necessari. Nel nostro esempio, ogni elemento è definito con "<article></article>".
Il codice dovrebbe ora avere un aspetto simile a questo. Lo abbiamo ripulito utilizzando lo strumento precedentemente citato e abbiamo cambiato "articoli popolari" in "consigliati per te".
Se ora guardiamo il sito web, ecco cosa appare:
Come si può vedere, mostriamo il testo "Consigliato per te" e l'elemento di contenuto da cui abbiamo preso l'outerHTML.
Guardando al sito web originale, tuttavia, si può notare che vengono utilizzate righe di 4 elementi. Al momento ne mostriamo solo uno. Fortunatamente abbiamo un articolo che contiene un modo per risolvere questo problema. Per risolvere il nostro problema utilizzeremo #each:
{{#each items}} itemcount='4'
<!-- YOUR HTML -->
{{/each}}Nota: L'aggiunta di #each è necessaria solo se si desidera visualizzare più di un elemento.
L'aggiunta di questo pezzo di codice al nostro html lo rende simile a questo:
La prima freccia rossa indica al sistema dove deve iniziare ogni sezione e la seconda dove deve finire. Assicuratevi di includere in ogni sezione solo le cose che volete effettivamente ripetere. Se inseriamo la parte "consigliata per te", la ripeteremo anche 4 volte.
Ora il sito web si presenta così:
Come si può vedere, ora vengono visualizzati correttamente 4 articoli in fila, proprio come l'originale.
Ma aspetta... sono tutti uguali e non personalizzati!
Questo problema sorge perché abbiamo semplicemente copiato l'HTML di un articolo esistente e lo abbiamo ripetuto 4 volte. Dobbiamo rendere il codice dinamico per consentire a Datatrics di inserire il contenuto più adatto alla vostra strategia di raccomandazione.
Come si fa? Dobbiamo entrare nel codice e rimuovere tutti i valori statici. Sostituiamo questi valori statici con attributi di elementi, in modo da poterli caricare dinamicamente. Poiché stiamo usando #each, possiamo semplicemente usare {{attributo}} invece di {{item.attributo}}. Per saperne di più, consultare il nostro articolo dedicato.
Come si può vedere nella schermata, abbiamo cambiato i valori richiesti alle variabili di attributo corrispondenti, come {{name}}, {{price}}, {{image}} e {{url}}, ottenendo il seguente risultato sul sito web:
Queste sono alcune delle cose che sono cambiate:
Gli articoli hanno tutti il loro nome corretto;
Le immagini corrispondono ai nomi;
I prezzi associati sono visibili;
I link conducono alla pagina corretta del prodotto.
Ovviamente ci sono molti modi diversi per impostare un contenuto incorporato e questo è solo un modo. Poiché si tratta di un processo piuttosto lungo, riassumeremo i passaggi ancora una volta:
Scegliere il tipo di contenuto integrato;
Selezionare il contenuto;
Selezionare la posizione del contenuto incorporato (selettore CSS);
Aggiungere l'outerHTML dal contenuto esistente o digitare il proprio HTML;
Opzionale: Aggiungere un ciclo #each per visualizzare più elementi;
Rendere il contenuto dinamico aggiungendo attributi.
Audience targeting
Dopo aver impostato un touchpoint integrato, è molto importante specificare dove deve essere mostrato. Se non c'è alcun targeting del pubblico, il touchpoint cercherà di aggiungere il touchpoint del contenuto incorporato in ogni singola pagina. Questo può portare a due situazioni:
Il touchpoint viene mostrato in una pagina in cui non si vuole che venga mostrato. Questo può accadere perché il selettore CSS di quella pagina è identico a quello della pagina in cui si voleva implementare il touchpoint. Questo può far sì che i touchpoint vengano mostrati su pagine non corrette.
Quando si hanno molti touchpoint senza specificare dove devono essere mostrati, tutti inizieranno a cercare il loro rispettivo selettore CSS nel momento in cui viene caricata una pagina. Questo può causare rallentamenti nel sito web. Così, mentre un solo touchpoint potrebbe essere mostrato, altri 6 potrebbero esplorare la pagina alla ricerca del loro selettore CSS.