Nei tipi di touchpoint Barra di ricerca e Contenuto integrato viene chiesto di selezionare una posizione per il contenuto. Dopo aver scelto un elemento, il nostro script di tracciamento è in grado di sostituire l'HTML di questo elemento o di iniettare HTML prima o dopo di esso. È inoltre possibile aggiungere CSS o Javascript ai touchpoint per personalizzarli o renderli interattivi.

Abbiamo creato un pratico selettore CSS che vi permette di scegliere l'elemento da utilizzare per il touchpoint. Alcuni siti web, tuttavia, bloccano l'iFraming. Per questo motivo abbiamo creato altri due metodi per ottenere il selettore CSS di un elemento. In genere consigliamo di provare prima l'opzione 1, perché è la più semplice. Se non funziona, provate la 2. Solo se entrambe le opzioni non funzionano, provate la 3.

Per utilizzare questo selettore, inserire nella barra l'URL della pagina web a cui si vuole aggiungere il contenuto integrato. Il formato di questo URL deve essere http:// o https://. Dopo aver inserito l'URL, fare clic sul pulsante "Scegli un elemento" per aprire l'URL appena inserito. Ora vi viene chiesto di selezionare un elemento del vostro sito web. Questo elemento determinerà la posizione del contenuto.

Come si può vedere nella schermata, abbiamo selezionato l'elemento che visualizza i "prodotti popolari". Se ora torniamo all'editor del touchpoint, si può notare che il selettore CSS è stato compilato.

Se il vostro sito web consente l'iframing, questo dovrebbe essere sufficiente per mostrare il vostro contenuto. (L'occorrenza e il posizionamento dei contenuti saranno discussi più avanti).

2. Copiare la posizione del CSS

Se il vostro sito web non viene visualizzato nell'opzione precedente, è probabile che l'iFraming del vostro sito web sia bloccato. Passiamo quindi alla seconda opzione.

Selezionate il pulsante Vai alla pagina web mostrato nella schermata precedente. Una volta entrati nel vostro sito web, fate clic sull'elemento che desiderate utilizzare per la vostra selezione CSS.

Dopo aver fatto clic sull'elemento, verrà visualizzata una finestra a comparsa. Copiare i dati del selettore CSS e copiarli nel campo Selettore CSS dell'editor del touchpoint.

3. Copiare manualmente il percorso CSS

A volte né l'opzione 1 né l'opzione 2 mostrano alcun contenuto. In questo caso, possiamo prendere manualmente i dati CSS usando l'ispettore del sito web.

Per fare ciò, accedere al sito web e posizionare il mouse sull'elemento che si desidera selezionare. Fare clic su di esso con il tasto destro del mouse e selezionare "ispeziona".

A questo punto dovrebbe aprirsi una finestra con il codice sorgente del vostro sito web e l'elemento utilizzato per aprirla dovrebbe essere evidenziato. Fare clic su questo elemento (il codice) con il tasto destro del mouse e selezionare copia - copia selettore CSS.

Incollare questo selettore nel selettore CSS dell'editor del touchpoint e il contenuto dovrebbe essere visualizzato.

Quando un elemento appare più di una volta nella pagina web a cui si vuole aggiungere un touchpoint integrato, è possibile impostare la ricorrenza per scegliere quale elemento deve essere selezionato. È quasi sempre possibile lasciare questo valore a "1st occurrence".

Questa opzione determina dove aggiungere il touchpoint integrato rispetto all'elemento selezionato della pagina web. È possibile posizionarlo prima dell'elemento selezionato, al posto dell'elemento selezionato o dopo l'elemento selezionato.

Poiché il codice sorgente del sito web viene sempre letto dall'alto verso il basso, prima significa sopra e dopo significa sotto.