Способ передачи заявок с сайта в Google Таблицы (Google Sheets) и затем в Google Analytics 4, используя Measurement Protocol.
Вы наверное знаете уже эту реализацию от Якова, статья подробно описывает способ с примерами кодов для HTML-тегов и функций для пользовательских переменных. Реализация использует тег типа Пользовательское изображение и как по мне не всегда удобно прописывать переменные.
В моей реализации я изменил и переписал код для отправки данных в Google Таблицы, переписал код для отправки оффлайн событий через Measurement Protocol в Google Analytics 4.
Посмотрите мое видео руководство как использовать данный метод:
Материал который вам понадобится:
1. Код для вставки в тег типа Пользовательский HTML в Google Tag Manager:
// Разрешенный URL
var allowedUrl = {{Domen}}; // Заменить на домен
// Замените URL на URL вашего веб-хука Google Apps Script
var url = {{Веб Хук Google Sheets}};
// Проверка разрешенного URL
if (document.location.host !== allowedUrl) {
console.error('Недопустимый источник запроса. Доступ запрещен.');
} else {
// Замените эти данные на те, которые вы хотите отправить
var dataToSend = {
"Date": {{Date}},
"Name": {{All_Form_Name_gra}},
"Email": {{All_Form_Email_gra}},
"Phone": {{All_Form_Phone_gra}},
"timestamp": {{timestamp_micros GA4}},
"Site": {{Site}},
"utm-source": {{utm-source}},
"utm-medium": {{utm-medium}},
"utm-campaign": {{utm-campaign}},
"utm-content": {{utm-content}},
"utm-term": {{utm-term}},
"client_id": {{Client id GA4}},
"engagement_time": {{engagement_time_msec GA4}},
"session_id": {{session ID GA4}},
"gclid": {{gclid GA4}}
};
// Опции для HTTP-запроса
var requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
mode: 'no-cors', // Добавляем эту опцию
body: JSON.stringify(dataToSend)
};
// Отправка HTTP-запроса
fetch(url, requestOptions)
.then(function(response) {
return response.text();
})
.then(function(result) {
console.log('Запрос успешно отправлен:', result);
})
.catch(function(error) {
console.error('Ошибка отправки запроса:', error);
});
}
Ключи и значения вы можете подстраивать под себя, как я рассказываю в видео
2. Код для вставки в Google Таблицы Apps Script (для входа данных)
// Вставить название Листа
var SHEET_NAME = "Sheet1";
// Вставить ваш ID Sheets
var SHEET_KEY = "test";
function doPost(e) {
var lock = LockService.getScriptLock();
lock.waitLock(30000);
try {
var jsonString = e.postData.contents;
var jsonData = JSON.parse(jsonString);
var doc = SpreadsheetApp.openById(SHEET_KEY);
var sheet = doc.getSheetByName(SHEET_NAME);
var lastRowWithData = sheet.getLastRow();
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
// Ищем первую пустую строку, начиная с строки номер 2
var firstEmptyRow = 2;
while (firstEmptyRow <= lastRowWithData && sheet.getRange(firstEmptyRow, 1).getValue() != "") {
firstEmptyRow++;
}
// Добавляем данные в первую пустую строку
for (var j = 0; j < headers.length; j++) {
if (headers[j] in jsonData) {
sheet.getRange(firstEmptyRow, j + 1).setValue(jsonData[headers[j]]);
}
}
} catch (e) {
return ContentService.createTextOutput(JSON.stringify({ "result": "error", "error": e })).setMimeType(ContentService.MimeType.JSON);
} finally {
lock.releaseLock();
}
return ContentService.createTextOutput("Данные успешно добавлены в таблицу.").setMimeType(ContentService.MimeType.TEXT);
}
Укажите правильно название листа и айди вашего sheets из URL.
3. Код для вставки в Google Таблицы Apps Script (для отправки оффлайн событий в Google Analytics 4)
var DATE_COLUMN = 1;
var NAME_COLUMN = 2;
var SITE_COLUMN = 3;
var PHONE_COLUMN = 4;
var EMAIL_COLUMN = 5;
var UTM_SOURCE_COLUMN = 6;
var UTM_MEDIUM_COLUMN = 7;
var UTM_CAMPAIGN_COLUMN = 8;
var UTM_TERM_COLUMN = 9;
var UTM_CONTENT_COLUMN = 10;
var CID_COLUMN = 11;
var TIM_ID_COLUMN = 12;
var ETM_COLUMN = 13;
var SID_COLUMN = 14;
var STATUS_COLUMN = 16;
var GLID_COLUMN = 15;
function onDropdownChange(e) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); // Получаем активный лист
var lastRow = sheet.getLastRow();
var row = e.range.rowStart;
if ((sheet.getName() == 'Sheet1') && (e.range.columnStart == STATUS_COLUMN) && ((row > 1) || (row < lastRow + 1))) {
var date = sheet.getRange(row, DATE_COLUMN).getValue();
var name = sheet.getRange(row, NAME_COLUMN).getValue();
var site = sheet.getRange(row, SITE_COLUMN).getValue();
var phone = sheet.getRange(row, PHONE_COLUMN).getValue();
var email = sheet.getRange(row, EMAIL_COLUMN).getValue();
var utm_source = sheet.getRange(row, UTM_SOURCE_COLUMN).getValue();
var utm_medium = sheet.getRange(row, UTM_MEDIUM_COLUMN).getValue();
var utm_campaign = sheet.getRange(row, UTM_CAMPAIGN_COLUMN).getValue();
var utm_term = sheet.getRange(row, UTM_TERM_COLUMN).getValue();
var utm_content = sheet.getRange(row, UTM_CONTENT_COLUMN).getValue();
var cid = sheet.getRange(row, CID_COLUMN).getValue();
var tim = sheet.getRange(row, TIM_ID_COLUMN).getValue();
var etm = sheet.getRange(row, ETM_COLUMN).getValue();
var sid = sheet.getRange(row, SID_COLUMN).getValue();
var status = e.value;
var glid = sheet.getRange(row, GLID_COLUMN).getValue();
// Введите ваше название События
var event_name = 'Lead_CRM';
// Введите ваш Measurement ID (G-XXXXXXXXXX)
var measurement_id = 'G-';
// Введите ваш API Secret
var api_secret = 'API';
var url = 'https://www.google-analytics.com/mp/collect?api_secret=' + api_secret + '&measurement_id=' + measurement_id;
// Можете добавить и менять параметры
var payload = {
'client_id': cid,
'timestamp_micros': parseInt(tim),
'non_personalized_ads': true,
'events': [{
'name': event_name,
'params': {
'status': status,
'engagement_time_msec': etm,
'session_id': sid,
'utm_source': utm_source,
'utm_medium': utm_medium,
'utm_campaign': utm_campaign,
'utm_content': utm_content,
'utm_term': utm_term,
'name': name,
'site': site,
'date': date,
'phone': phone,
'email': email,
'glid': glid
},
}],
};
var options = {
'method': 'POST',
'payload': JSON.stringify(payload)
};
try {
var response = UrlFetchApp.fetch(url, options);
Logger.log(response);
SpreadsheetApp.getUi().alert('Событие передано' + response.getResponseCode());
} catch (e) {
Logger.log('Ошибка: ' + e);
}
}
}
Не забудьте:
- в коде указать идентификатор вашего потока G-
- сгенерировать API Key для Measurement Protocol
- указать название вашего листа
После этого создаем веб-приложение, по факту веб хук и вставляем его в переменную Веб Хук Google Sheets.
Формировать Payload для передачи в Params, я лично использую этот инструмент.
Возможно в видео я не показал все возможности данной реализации, это чтобы вы могли проводить свои эксперименты.
Если у вас не хватает времени или желания делать столько переменных или тегов как у меня, вы можете приобрести готовый шаблон для GTM, заполнив форму ниже.
[Шаблон Google Tag Manager] Заявки с сайта в Google Таблицы с передачей данных в Google Analytics 4
