Questo script consente di recuperare tutte le informazioni dai FORM presenti sulla pagina. Lo script legge tutti i form presenti, e inoltra un evento chiamato “form_submitted_custom*”* al dataLayer allegando i campi inseriti dall’utente.
<script>
// Seleziona tutti i form presenti nella pagina
var forms = document.querySelectorAll('form');
// Itera su ogni form
Array.prototype.forEach.call(forms, function(form) {
// Aggiungi un event listener per il submit di ciascun form
form.addEventListener('submit', function(event) {
// Prevenire il comportamento predefinito del form
//event.preventDefault();
console.log('Aggiunto Listener al FORM');
console.log(form);
// Funzione per recuperare tutti i valori dei campi del form
function getAllFieldValues() {
var values = {};
var inputs = form.querySelectorAll('input, textarea, select');
Array.prototype.forEach.call(inputs, function(input) {
// Usa l'attributo name, o se non presente, l'attributo id
var key = input.name || input.id;
if (key && input.type !== 'submit' && input.type !== 'button') {
values[key] = input.value;
}
});
return values;
}
// Recupera tutti i valori dei campi
var fieldValues = getAllFieldValues();
// Visualizza i valori raccolti nella console per il debug
console.log('Valori dei campi raccolti:', fieldValues);
// Verifica che il dataLayer esista
if (window.dataLayer) {
// Aggiungi un evento al dataLayer includendo tutti i valori dei campi
dataLayer.push({
event: 'form_submitted_custom',
fakeid: 'home_{{Random Number}}',
formId: form.id || form.name || 'unknown', // Usa l'ID del form, altrimenti il nome, altrimenti 'unknown'
fieldValues: fieldValues, // Includi tutti i valori dei campi
'gtm.uniqueEventId': new Date().getTime() // Usa un timestamp come uniqueEventId
});
// Visualizza il dataLayer per il debug
console.log('Push al dataLayer:', dataLayer);
} else {
console.warn('dataLayer non è definito');
}
// Rimuovere il commento qui sotto per permettere l'invio del form dopo il debug
// form.submit();
});
});
</script>
https://github.com/agolca123/google-sheets-webhook
Il modello di GTM. Il link sopra è la repository Github ma naturalmente il modello è installabile direttamente da Google Tag Manager.
Basta cercare Google Sheet dalla galleria di modelli dei tag per trovarlo e si può installare in One Click. Una volta installato è possibile mandare i dati Sheet sfruttando un Webhook ed il seguente codice:
function doGet(e) {
// Prende i parametri dall'URL
var orderId = e.parameter.orderId;
var conversionName = e.parameter.conversionName;
var conversionTime = e.parameter.conversionTime;
var adjType = "RESTATE";
var adjValue = 1;
var currency = "EUR"
var name = e.parameter.name;
var email = e.parameter.email;
// Apri il Google Sheet e il foglio specifico
var ss = SpreadsheetApp.openById('1XJ-fdsfdsfds'); //qui mettere l'ID dello Sheet
var sheet = ss.getSheetByName('Lead Home'); //Qui mettere il nome del Foglio
// Aggiunge i dati in una nuova riga
sheet.appendRow([orderId, conversionName, conversionTime, adjType, adjValue, currency,name,email]);
return ContentService.createTextOutput("Dati Scritti su Sheet");
}
Qui è possibile scaricare il modello per il caricamento delle conversioni avanzate per i click. Il link diretto comunque lo lascio qui sotto:
https://docs.google.com/spreadsheets/d/1g0-rFycZvezi8lr9lroysKx2qqAawWiRnr6F1IKwMh8/copy
Qui il template per modificare il valore di conversione dalle nostre conversioni lavorando in ROAS Target con una Lead Generation.