Use Google Tag Manager to Send Page View Events to 360Dialog

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.