Categories
Uncategorized

Estrarre un prezzo da una pagina con Google Tag Manager13/06/2020

Estrarre un prezzo da una pagina con Google Tag Manager
Mentre DOM raschiatura non è raccomandata (perché è abbastanza fragile) nel monitoraggio web, a volte basta avere altra scelta. Chiedendo uno sviluppatore per spingere un certo punto i dati al livello dati è sempre la migliore pratica, ma in alcuni progetti, hai solo due opzioni:




Io sono infatti persuaso che né morte né vita, né angeli né principati, né presente né avvenire, né potenze, né altezza né profondità, né alcun'altra creatura potrà mai separarci dall'amore di Dio, in Cristo Gesù, nostro Signore.

cercare di recuperare un certo valore dalla pagina da soli
o non fare nulla e continuare senza quel particolare punto di dati
In questo post del blog, ho voluto mostrare diversi script piccoli che vi aiuterà a spuntare un prezzo, se si tratta di un elemento visibile in una pagina.

Questo non è stato progettato per recuperare tutti i prezzi in una pagina e costruire oggetti complessi-ish, ecc Facciamo un passo indietro. Questo post del blog è per quelle situazioni in cui si desidera lavorare solo con un prezzo.

Dove può essere utile?

Forse si vuole monitorare l’impressione di un prodotto e si desidera inviare il prezzo di tale prodotto a qualche strumento? Se sì, questa guida fa per voi.
Forse si vuole monitorare gli acquisti e si desidera inviare il totale dell’ordine di qualche pixel di monitoraggio? Se sì, allora troverete questa guida utile.
In questo post del blog, mi concentrerò solo su come estrarre un prezzo da una pagina, non il modo di inviarlo ad altri / strumenti di marketing analytics.

Variabile JavaScript personalizzato
In questa guida, userò una variabile personalizzata JS. Sì, lo so che modello personalizzato sarebbe una soluzione migliore, ma sembra che in questo momento, modelli personalizzati non consentono di elementi di accesso su una pagina. Se mi sbaglio, per favore correggetemi. Sarei felice di creare un modello variabile personalizzato per questo.

Ci sono vari modi di come i siti web visualizzano i prezzi, ad es .:

12.00 USD
$ 12.00
Prezzo: $ 12,000.00, etc.
Inoltre, la tua definizione di “prezzo estratto” potrebbe essere diverso dal mio. Alcune persone vogliono solo sbarazzarsi del simbolo del dollaro, gli altri vogliono trasformare le stringhe in numeri, ecc Ecco perché ho posterò diverse opzioni del codice personalizzato JavaScript e dovrete scegliere quello che si adatta alle vostre esigenze al meglio.

Nota: ovviamente, questi codici non copre tutte le possibili variazioni di prezzo formattazione. Stavo cercando di risolvere le situazioni più comuni. Quindi, se avete qualche caso limite, fatemelo sapere nei commenti e vedrò cosa posso fare.

Requisiti
Per implementare correttamente questa soluzione, è necessario avere familiarità con i selettori CSS. Di solito, le basi sono sufficienti. In questa guida, presumo che si dispone già di quella conoscenza.

Opzione # 1: Se si desidera solo per sbarazzarsi dei segni di testo e di valuta
Questa opzione funziona se il prezzo sul tuo sito web corrisponde ad uno dei seguenti esempi (funziona con qualsiasi codice di valuta o segno):

un testo 12.00 (per es Prezzo: 12.00). La variabile personalizzato JavaScript restituirà una stringa ’12 .00‘ .
un testo 12.00 del testo. La variabile personalizzato JS restituirà una stringa ’12 .00‘ .
$ 12.00 (vale anche per altri segni di valuta troppo). La variabile personalizzato JS restituirà una stringa ’12 .00‘ .
12.00USD (o qualche altro codice di valuta). La variabile personalizzato JS restituirà una stringa ’12 .00‘ .
12.000,00 USD o $ 12,000.00. La variabile personalizzato JS restituirà una stringa ’12, 000.00‘
Questi erano gli scenari che mi stava mettendo alla prova contro. E qui è il codice stesso:

funzione() {
var priceText = document.querySelector ( ‘ENTER_YOUR_SELECTOR’);
if (priceText) {
var regex = /([0-9.,]+)/;
if (regex.test (priceText.innerText)) {
ritorno priceText.innerText.match (regex) [0];
}
}
}
Importante: è necessario modificare la parte EDIT_YOUR_SELECTOR e inserire il selettore effettivo dell’elemento che contiene il prezzo. Per esempio:

se l’elemento prezzo ha la classe selezionata-ticket-prezzo, il selettore CSS sarà .selected-ticket-prezzo
se l’elemento prezzo ha l’ID ordine-totale, il selettore CSS sarà # ordine-totale, etc.
Ecco una guida che può aiutare con i selettori CSS. Troppo confuso? Considero l’iscrizione nel mio corso intermedio / avanzato GTM e ti insegnerò cosa diavolo è questo.

Opzione # 2: Se si vuole sbarazzarsi del testo, simboli di valuta, e le virgole
Questa opzione funziona se il prezzo sul tuo aspetto sito come questo (migliaia sono separate da virgole):

12.000,00 USD. La variabile personalizzato JS restituirà una stringa ’12, 000.00‘ .
$ 12,000.00. La variabile personalizzato JS restituirà una stringa ’12, 000.00‘ .
Se c’è del testo prima o dopo il prezzo, verrà rimosso automaticamente.

funzione() {
var priceText = document.querySelector ( ‘ENTER_YOUR_SELECTOR’);
var regex = /([0-9.,]+)/;
if (regex.test (priceText.innerText)) {
ritorno priceText.innerText.match (regex) [0] .Rimontare (/, / g, ”);
}
}
Se confrontiamo questo script con l’opzione # 1, questo utilizza un metodo di sostituzione che rimuoverà tutte le virgole nel prezzo estratti.

Ancora una volta, è necessario sostituire l’ENTER_YOUR_SELECTOR con un selettore effettivo dell’elemento sito Web che contiene un prezzo.

Opzione # 3: Se si desidera anche la variabile per restituire il numero (invece di una stringa)
Alcuni strumenti potrebbero richiedere di passare il prezzo non come una stringa (’12 .99’ ), ma come numero (12.99 – senza virgolette). Se questo è il vostro caso, è necessario utilizzare il metodo parseFloat nella dichiarazione di ritorno, per esempio:

funzione() {
var priceText = document.querySelector ( ‘ENTER_YOUR_SELECTOR’);
var regex = /([0-9.,]+)/;
if (regex.test (priceText.innerText)) {
ritorno parseFloat (priceText.innerText.match (regex) [0] .Rimontare (/, / g, ”));
}
}

Se si dispone già di un prezzo come variabile
Che cosa succede se si dispone già di un prezzo non trattato come variabile in Google Tag Manager? Ad esempio, un layer di dati variabili che restituisce $ 12.00?

In tal caso, è possibile sostituire document.querySelector ( ‘ENTER_YOUR_SELECTOR’) e inserire la variabile circondato da doppie parentesi graffe. Inoltre, sbarazzarsi della proprietà “innerText”. Il risultato finale:

funzione() {
var priceText = {{INSERIRE IL TUO VARIABILE QUI}};
var regex = /([0-9.,]+)/;
if (regex.test (priceText)) {
ritorno priceText.match (regex) [0] .Rimontare (/, / g, ”);
}
}
Per ulteriori informazioni su come inserire le variabili in GTM, potete leggere questa guida.

Ulteriori suggerimenti per quanto riguarda quando utilizzare questa variabile
Tenete a mente che qualsiasi di queste variabili restituirà il valore corretto solo se l’elemento prezzo esiste in una pagina.

Se l’elemento è reso quando la pagina viene caricata, è possibile iniziare ad usarlo sul DOM Ready e gli eventi successivi. Non lo uso sul contenitore Loaded (Visualizzazioni di pagina anche noto come).
Se l’elemento prezzo sembra dinamicamente dopo una particolare interazione dei visitatori, iniziare a utilizzare questa variabile nel tag sull’evento Visibilità Element (quando compare il prezzo) e gli eventi successivi.
Per riassumere: non provare ad attivare i tag (che utilizzano queste variabili personalizzate JS) quando l’elemento prezzo non viene eseguito il rendering di una pagina ancora.

Estrarre un prezzo da una pagina con GTM: Considerazioni finali
E questo è tutto. In questo breve resoconto, ho condiviso diversi frammenti personalizzati JavaScript che dovrebbe aiutare a estrarre un prezzo da una pagina con l’aiuto di Google Tag Manager. Se è possibile chiedere uno sviluppatore per spingere il prezzo al livello dati, andare sempre con questa opzione. Considerate questo post del blog come un piano B.

Perché questo è più fragile? Perché DOM raschiatura è più soggetto a errori. Se gli sviluppatori di modificare il codice del front-end del sito, tali soluzioni di monitoraggio possono facilmente rompere.

Extract a Price from a Page with Google Tag Manager