Dynamisch data opslaan in een Google spreadsheet met de Image tag

Oktober 10, 2023
Google Tag Manager

Verzend dynamische data naar een Google-spreadsheet met Google Tag Manager. Stel dat je Google Spreadsheets wilt gebruiken als een eenvoudige manier om data op te slaan vanuit formulieren, inclusief gedetailleerde informatie zoals formulierinzendingen, GCLID en e-mailadressen.

Verzend dynamische data naar een Google-spreadsheet met Google Tag Manager. Stel dat je Google Spreadsheets wilt gebruiken als een eenvoudige manier om data op te slaan vanuit formulieren, inclusief gedetailleerde informatie zoals formulierinzendingen, GCLID en e-mailadressen.  

In GA4 is het echter niet toegestaan om privacygegevens op te slaan. Je kunt dit automatiseren met behulp van twee scripts. Het eerste script haalt de GCLID op en slaat deze op als een waarde in de HTML. Het tweede script haalt de data op en voegt deze automatisch toe aan een spreadsheet.  

Je kunt dezelfde functionaliteit bereiken met Zapier, waarbij het coderingsaspect verborgen is achter hun interface. Let op dat hun gratis versie tot 100 taken per maand ondersteunt.  

Laten we beginnen met het maken van een eenvoudig blad. Mijn contactformulier heeft verschillende velden die ik wil aanroepen, zoals naam, e-mailadres en onderwerp. Uiteindelijk slaan we deze data op met behulp van de Image Tag in Google Tag Manager. Deze tag vraagt om het opslaan van specifieke parameters uit een URL. Het interessante is dat door dit verzoek feitelijk informatie naar een server wordt verzonden. De parameterwaarde wordt dynamisch opgeslagen en met een script in een spreadsheet ingevoegd.  
 

GCLID opslaan in een cookie

Om de GCLID op te slaan, moeten we de waarde opslaan achter een hidden field. We kunnen dit dan uitlezen met een custom HTML script:


 

<script>
function getParam(p) {
var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
function getExpiryRecord(value) {
var expiryPeriod = 90 * 24 * 60 * 60 * 1000; // 90 day expiry in milliseconds
var expiryDate = new Date().getTime() + expiryPeriod;
return {
value: value,
expiryDate: expiryDate
};
}
function addGclid() {
var gclidParam = getParam('gclid');
var gclidFormFields = ['gclid_field', 'foobar']; // all possible gclid form field ids here
var gclidRecord = null;
var currGclidFormField;
var gclsrcParam = getParam('gclsrc');
var isGclsrcValid = !gclsrcParam || gclsrcParam.indexOf('aw') !== -1;
gclidFormFields.forEach(function (field) {
if (document.getElementById(field)) {
currGclidFormField = document.getElementById(field);
}
});
if (gclidParam && isGclsrcValid) {
gclidRecord = getExpiryRecord(gclidParam);
localStorage.setItem('gclid', JSON.stringify(gclidRecord));
}
var gclid = gclidRecord || JSON.parse(localStorage.getItem('gclid'));
var isGclidValid = gclid && new Date().getTime() < gclid.expiryDate;
if (currGclidFormField && isGclidValid) {
currGclidFormField.value = gclid.value;
}
}
window.addEventListener('load', addGclid);
</script>


 

Spreadsheet aanmaken

Nu maken we een spreadsheet aan. We voegen daar de onderstaande kolommen aan toe:  
 


Nu klikken we op ‘Apps script’. Je voegt daar het onderstaande script aan toe:  

 

// Usage
// 1. Enter sheet name where data is to be written below
// 1. Enter sheet name and key where data is to be written below
var SHEET_NAME = "Sheet1";
var SHEET_KEY = "insert-sheet-ID-here";
// 2. Run &gt; setup
//
// 3. Publish &gt; Deploy as web app
// - enter Project Version name and click 'Save New Version'
// - set security level and enable service (most likely execute as 'me' and access 'anyone, even anonymously)
//
// 4. Copy the 'Current web app URL' and post this in your form/script action
//
// 5. Insert column names on your destination sheet matching the parameter names of the data you are passing in (exactly matching case)
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service
// If you don't want to expose either GET or POST methods you can comment out the appropriate function
function doGet(e){
return handleResponse(e);
}
function doPost(e){
return handleResponse(e);
}
function handleResponse(e) {
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
try {
// next set where we write the data - you could write to multiple/alternate destinations
var doc = SpreadsheetApp.openById(SHEET_KEY);
var sheet = doc.getSheetByName(SHEET_NAME);
// we'll assume header is in row 1 but you can override with header_row in GET/POST data
var headRow = e.parameter.header_row || 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
// loop through the header columns
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
row.push(new Date());
} else { // else use header name to get data
row.push(e.parameter[headers[i]]);
}
}
// more efficient to set values as [][] array than individually
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// return json success results
return ContentService
.createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
.setMimeType(ContentService.MimeType.JSON);
} catch(e){
// if error return this
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": e}))
.setMimeType(ContentService.MimeType.JSON);
} finally { //release lock
lock.releaseLock();
}
}


We moeten ons blad specificeren, dus kopiëren we het gedeelte tussen /d/ en /edit en plak het tussen de aanhalingstekens voor het invoegen van de ID op regel 5.  
 


We geven het project een naam, zoals we dat graag willen en slaan het script op. De volgende stap is het publiceren van de app. Implementeren als webapp, wijzigen we de instellingen zodat iedereen toegang heeft tot de app. En dan klikken we op de button: Implementeren.  
 


De eerste keer dat er om autorisatie wordt gevraagd, klik je op Doorgaan en Toestaan ​​en krijg je de URL van de webapp te zien:  
 

  
 

Opzoeken waarde uit velden in HTML

Nu dienen we de waarden te halen uit de formuliervelden. Ik wil in dit voorbeeld twee velden ophalen en verzamelen in een spreadsheet.


 

  

We kunnen dit testen door het veld te inspecteren en de waarde op te roepen met een JavaScript-functie, waarmee we elementen in de HTML kunnen selecteren op basis van hun name-attribuutwaarde. Je kunt deze functie gebruiken in de JavaScript-console om elementen te selecteren en er bewerkingen op uit te voeren. Nu gaan we de web app URL testen en de variabelen aanmaken in Google Tag Manager:  
 

function() {
var inputField = document.getElementsByName("gclid_field")[0];
return inputField.value || "";
}


Doe dit ook voor het e-mail veld:  
 

function() {
var inputField = document.getElementsByName("email")[0];
return inputField.value || "";
}



Nu hebben we al onze variabelen en gaan we deze oproepen. Nu zorgen we nog voor de juiste trigger. In het geval van mijn eigen website wil ik deze alleen triggeren als een bezoeker een formulier heeft ingevuld.  
 


Voila, de data wordt op de juiste manier opgeslagen en toegevoegd aan de spreadsheet:  
 

jermaya leijen
Jermaya Leijen arrow icon

In de loop der jaren heb ik de liefde ontwikkeld voor automation, AI en data(analyse). Hoewel ik me altijd heb gericht op Google Ads, ben ik al geruime tijd betrokken bij uiteenlopende SEO-projecten. Ik heb mezelf Python en JavaScript aangeleerd om automation en data(verwerking) te kunnen integreren in zowel mijn eigen projecten als die van klanten, met als doel hen te ondersteunen bij het behalen van hun bedrijfs- en omzetdoelstellingen.

Cases Blogs Audit