You can send Google Tag Manager events to 360dialog, as long as they are based on Page View.
Configure Custom HTML Tag
Navigate to Google Tag Manager. Under the section Tags, click on New and you should see the page as below.
For Tag Configuration, choose Custom HTML.
Paste the following JS code and make sure to replace clientId
and apiKey
with the values provided by your Client Manager.
<script>
var clientId = "client_id_here";
var apiKey = "api_key_here";
var baseUrl = 'https://api.signals.360dialog.io/v1/clients';
(function() {
captureUTM();
processExistingEvents();
initializeDataLayerListener();
})();
function processExistingEvents() {
if (window.dataLayer && window.dataLayer.length > 0) {
window.dataLayer.forEach(function(data) {
handleDataLayerEvents(data);
});
}
}
function initializeDataLayerListener() {
window.dataLayer = window.dataLayer || [];
var originalPush = dataLayer.push;
dataLayer.push = function(data) {
handleDataLayerEvents(data);
return originalPush.apply(this, arguments);
};
}
function handleDataLayerEvents(data) {
if ((Array.isArray(data) || data.length >= 2) && data[0] === "event") {
var eventName = data[1];
switch(eventName) {
case 'view_item':
sendEvent("Product Viewed");
break;
case 'add_to_cart':
sendEvent("Added to Cart");
break;
case 'begin_checkout':
sendEvent("Checkout");
break;
case 'purchase':
sendEvent("Sales");
break;
}
} else if (data.event) {
switch(data.event) {
case 'view_item':
sendEvent("Product Viewed");
break;
case 'add_to_cart':
sendEvent("Added to Cart");
break;
case 'begin_checkout':
sendEvent("Checkout");
break;
case 'purchase':
sendEvent("Sales");
break;
}
}
}
// Get and save UTM params
function captureUTM() {
var params = new URLSearchParams(window.location.search);
var utm_source = params.get('utm_source');
var utm_campaign = params.get('utm_campaign');
if (utm_campaign) {
setCookie('360d_tracking_id', utm_campaign, 30);
setCookie('360d_utm_source', utm_source, 30);
}
}
// Cookie utils
function setCookie(name, value, days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
}
function getCookie(name) {
var value = '; ' + document.cookie;
var parts = value.split('; ' + name + '=');
if (parts.length === 2) return parts.pop().split(';').shift();
return '';
}
// Send event to API
function sendEvent(action) {
var tracking_id = getCookie('360d_tracking_id') || '';
var utm_source = getCookie('360d_utm_source') || '';
if (!tracking_id || tracking_id == 'null') {
return;
}
if (!utm_source || utm_source !== '360dialog') {
return;
}
var payload = {
action: action,
tracking_id: tracking_id,
};
fetch(baseUrl + '/' + clientId + '/pixel/gtm', {
method: 'POST',
headers: {'Content-Type': 'application/json', 'X-API-KEY': apiKey},
body: JSON.stringify(payload)
})
.catch(function(error) {
console.error('Error:', error);
throw error;
});
}
</script>
For Triggering, choose All Pages.
Click Save.
Preview the newly created Tag, so you can open the console and see if there are any related errors.
If not, you can Submit the tag so it is set as live.
Test configuration
Access a page that has GTM installed with the following parameter:
?utm_source=whatsapp?utm_campaign={{generated_tracking_id}}&utm_medium=SMS
Confirm with 360dialog that event has been sucessfully received.
β