Setup universal events for non-ecommerce websites – SegmentStream

"Non Idle" event
"Scroll" event
"Click" event
"Form Abandonment" event
"Form Input Change" event

"Non Idle" event

Inside your Google Tag Manager go to Tags, and click New:
Name the tag as it suits you, for example Custom Script - nonIdle, and choose the Custom HTML tag type:

Enter the following code and choose All Pages in the Firing Triggers option:

<script>
  (function() {
    var startEngage = new Date().getTime();
    var timeEngaged = 0;
    var idleTime = 0;
    var idle = true;
    var idleReport = false;
    var idleTimer, reportTimer;
    
    /*  Set the user as idle, and calculate the time
        they were non-idle */
    var setIdle = function() {
      idleTime = new Date().getTime();
      timeEngaged += idleTime - startEngage;
      idle = true;
    };
    
    /*  Reset the 5-second idle timer.
        If the user was idle, start the non-idle timer */
    var pulse = function(evt) {
      if (idle) {
        idle = false;
        startEngage = new Date().getTime();
        idleReport = false;
      }
      window.clearTimeout(idleTimer);
      idleTimer = window.setTimeout(setIdle, 5000); 
    };    
    
    //  Utility function for attaching listeners to the window
    var addListener = function(evt, cb) {
      if (window.addEventListener) {
        window.addEventListener(evt, cb);
      } else if (window.attachEvent) {
        window.attachEvent('on' + evt, cb);
      }
    };
    
    /* Push an event to dataLayer every 15 seconds
       unless the user is idle.
       Also, push an event when the user leaves the page */
    var report = function(evt) {
      if (!idle) {
        timeEngaged += new Date().getTime() - startEngage;
      }

      // Push the payload to dataLayer, and only push valid time values
      if (!idleReport && timeEngaged > 0 && timeEngaged < 3600000) { 
	    window.dataLayer.push({
    	  'event' : 'nonIdle',
          'nonIdleTimeElapsed' : timeEngaged
        });
      }
      if (idle) {
        idleReport = true;
      }
      
      // Fix possible beforeunload duplication problem
      if (evt && evt.type === 'beforeunload') {
	    window.removeEventListener('beforeunload', report);
      }
      timeEngaged = 0;
      startEngage = new Date().getTime();
      reportTimer = window.setTimeout(report, 60000);
    };
    
    addListener('mousedown', pulse);
    addListener('keydown', pulse);
    addListener('scroll', pulse);
    addListener('mousemove', pulse);
    addListener('beforeunload', report);
    idleTimer = window.setTimeout(setIdle, 5000);
    reportTimer = window.setTimeout(report, 60000);
  })();
</script>

Go to Triggers, and click New:
Name the trigger as it suits you, for example Event - nonIdle, and choose the Custom Event trigger type:
Enter nonIdle in the Event name field, which is the name of the event pushed into the dataLayer every 60 seconds by the script added in step 3. It should look like this:
In order to collect the non-idle time, we have to create a new variable. Go to Variables, click New:
Name the variable as nonIdleTimeElapsed, and select the Data Layer Variable type:
Enter nonIdleTimeElapsed in the Data Layer Variable Name field, your variable should look like this:
Go to Tags, click New:
Choose Universal Analytics or GA4 Event tag type (depending on which version you use).
Set Event - nonIdle as the trigger, and enter the settings described for your GA version. GA4:
- Event Name: non_idle
- Event Parameters:
  - non_idle_time - {{nonIdleTimeElapsed}}
Universal Analytics:
- Track Type - Event
- Category - Engagement
- Action - non_idle
- Label - {{nonIdleTimeElapsed}}

"Scroll" event

☝ This setup is required only for Universal Analytics. For Google Analytics 4 this can be enabled by default in the web stream settings. Please visit the Google documentation to learn more.

Inside your Google Tag Manager go to Triggers, and click New:
Create a new Scroll Depth trigger in GTM with the following settings:
Go to Variables, click Configure:
Enable the Scroll Depth Threshold built-in variable:
Go to Tags, and click New:
Create a new Universal Analytics event, set Event - Scroll as the trigger, and enter the following settings:
- Track Type - Event
- Category - Engagement
- Action - scroll
- Label - {{Scroll Depth Threshold}}

"Click" event

Inside your Google Tag Manager go to Triggers, and click New:
Create a new Click - All Elements trigger:
Go to Variables, click Configure:
Enable the Click Classes and Click Text built-in variables:
Click New in the Variables section to add a new variable, name it Click Text Formatted and select the Custom JavaScript variable type:

Enter the following code in the Custom Javascript field:

function() {
  return {{Click Text}}.substring(0,100);
}

Repeat the same process for the Click Classes variable, create a new variable, name it Click Classes Formatted, and paste the following code:
```
function() {
  return {{Click Classes}}.substring(0,100);
}
```
Go to Tags, click New, and choose Universal Analytics or GA4 Event tag type (depending on which version you use).
Set Event - Click as the trigger, and enter the settings described for your GA version. GA4:
- Event Name: click
- Event Parameters:
  - element_class - {{Click Classes Formatted}}
  - element_text - {{Click Text Formatted}}
Universal Analytics:
- Track Type - Event
- Category - Clicks
- Action - {{Click Text Formatted}}
- Label - {{Click Classes Formatted}}

"Form Abandonment" event

Inside your Google Tag Manager go to Tags, and click New:
Name the tag as it suits you, for example Custom Script - formAbandonment, and choose the Custom HTML tag type:

Copy the following code inside the HTML field, and choose All Pages in the Firing Triggers option, you tag should look like this:

<script>
(function() {
  if (typeof document.querySelectorAll === 'undefined') {
    return
  }

  window.addEventListener('beforeunload', function(e) {
    findUnsubmittedForms().forEach(function(it) {
      window.dataLayer.push({
        'event' : 'formAbandonment',
        'eventLabel' : it.name + ': ' + it.history.interactions.join(' > '),
        'eventValue': it.history.progress
      })
    })
  })

  var history = {};

  window.addEventListener('load', function() {
    document.addEventListener('change', function(e) {
      var target = e.target;
      var tagNames = ['INPUT', 'SELECT', 'TEXTAREA'];

      if (target && target.tagName && tagNames.indexOf(target.tagName) > -1) {
        var inputName = target.getAttribute('name')
        var form = target.form
        var elements = form.elements;

        var totalElements = 0;
        var filledElements = 0;

        for(var i = 0 ; i < elements.length ; i++) {
          var item = elements.item(i);
          
          if (item.name && item.type !== 'checkbox') {
            totalElements++
              
            if (item.value) {
              filledElements++
            }
          }
        }
          
        var filledPercent = Math.round(filledElements/totalElements * 100);

        if (form && inputName) {
          var formName = form.getAttribute('name');
          if (typeof history[formName] == 'undefined') {
            history[formName] = { 
              interactions: []
            };
          }
          if (history[formName].interactions.slice(-1) != inputName) {
            history[formName].interactions.push(inputName);
          }
          history[formName].progress = filledPercent;
        }
      }
    })
  })

  function findUnsubmittedForms() {
    return Object.keys(history).filter(hasNoFormSubmitEvent(window.dataLayer)).map(findFormFromHistory).filter(notEmpty)
  }

  function hasNoFormSubmitEvent(dataLayer) {
    return function(name) {
      return dataLayer.filter(isFormSubmitEvent).map(getFormName).indexOf(name) == -1
    }
  }

  function isFormSubmitEvent(e) {
    return e.event === 'gtm.formSubmit'
  }

  function getFormName(e) {
    return e['gtm.element'].name
  }

  function findFormFromHistory(name) {
    return {
      name: name,
      history: (history[name] || [])
    }
  }

  function notEmpty(form) {
    return form.history.interactions.length > 0
  }

})() 
</script>

Go to Triggers, and click New:
Name the trigger as it suits you, for example Event - formAbandonment, and choose the Custom Event trigger type:
Enter formAbandonment in the Event name field, which is the name of the event pushed into the dataLayer by the script added in step 3. It should look like this:
In order to collect information about the abandoned forms that were interacted with, we have to create two new variables. Go to Variables, click New:
Name the variable as eventLabel, and select the Data Layer Variable type:
Enter eventLabel in the Data Layer Variable Name field, your variable should look like this:
Repeat the steps 7 to 9 for the eventValue variable, it should look like this:
Go to Tags, click New:
Choose Universal Analytics or GA4 Event tag type (depending on which version you use).
Set Event - formAbandonment as the trigger, and enter the settings described for your GA version. GA4:
- Event Name: form_abandonment
- Event Parameters:
  - form_interactions - {{eventLabel}}
  - form_filled_percent - {{eventValue}}
Universal Analytics:
- Track Type - Event
- Category - Forms
- Action - Form Abandonment
- Label - {{eventLabel}}
- Value - {{eventValue}}

"Form Input Change" event

Inside your Google Tag Manager go to Tags, and click New:
Name the tag as it suits you, for example Custom Script - formInputChange, and choose the Custom HTML tag type: