Calculate time between two string timestamps with Vanilla JS and RegEx

jsnHow-To's0 Comments

When dealing with the dataLayer, you are presented with the challenge that variables are returned as either strings or numbers. This is particularly an issue when calculating the time between events is required and all you have to work with is a string, instead of the Date Object. With the later, you have the luxury to use methods such as:
Date.prototype.getHours()
Date.prototype.getMinutes() etc.

However, when dealing with a simple string, some manipulation is required to do the maths.

Let’s take the following example where we have a specific dataLayer push on two events and we have to calculate the time between the two:

dataLayer push on event 1:

<script>
  dataLayer = [{
    'event': 'timingEvent1',
    'timeStampt1': 'Thu Jan 24 2019 16:52:50 GMT+0000 (Greenwich Mean Time)'
  }];
</script>

dataLayer push on event 2:

<script>
  dataLayer = [{
    'event': 'timingEvent2',
    'timeStampt2': 'Thu Jan 24 2019 16:52:59 GMT+0000 (Greenwich Mean Time)'
  }];
</script>

The manipulation steps required to calculate the time between event 1 and event 2 are the following:

1. Extract the HH:MM:SS part of the String using RegEx
2. Separate hour, minutes and seconds in variables
3. Convert the strings to numbers using parseInt()
3. Calculate the total number of seconds.
4. Subtract t1 from t2.

Since we will be working with GTM, in order to capture the timestamps, we have to create two dataLayer variables:
dataLayer var - timeStampt1
dataLayer var - timeStampt2

The two dataLayer vars will then be used in the following custom JavaScript variable:

function(){
  var t1 = {{dataLayer var - timeStampt1}}.replace(/\s[a-z]{3}\+.*/gim, '');
  var t1Hour = Number(t1.match(/.{8}$/gim)[0].match(/^[0-9]{2}/gim)[0]);
  var t1Min = Number(t1.match(/.{5}$/gim)[0].match(/^[0-9]{2}/gim)[0]);
  var t1Sec = Number(t1.match(/.{5}$/gim)[0].match(/.{2}$/gim)[0]);
  var t1TotalSeconds = ((Number(t1Hour)*3600) + (Number(t1Min)*60) + Number(t1Sec));
  
  var t2 = {{dataLayer var - timeStampt2}}.replace(/\s[a-z]{3}\+.*/gim, '');
  var t2Hour = Number(t2.match(/.{8}$/gim)[0].match(/^[0-9]{2}/gim)[0]);
  var t2Min = Number(t2.match(/.{5}$/gim)[0].match(/^[0-9]{2}/gim)[0]);
  var t2Sec = Number(t2.match(/.{5}$/gim)[0].match(/.{2}$/gim)[0]);
  var t2TotalSeconds = ((Number(t2Hour)*3600) + (Number(t2Min)*60) + Number(t2Sec));

return t2 - t1;
}

Using RegEx, the code above does the following:

1. Remove the last bit of the string ‘GMT+0000 (Greenwich Mean Time)’ using /\s[a-z]{3}\+.*/gim
2. Match the ’16:52:50′ part of the string using (/.{8}$/gim)[0]
3. From there to get the hours it will match on /(^[0-9]{2}/gim)[0] to get ’16’
4. Match the ’52:50′ part of the string using (/.{5}$/gim)[0] where:
4.1 (/^[0-9]{2}/gim)[0] to get the minutes – ’52’
4.2 and (/.{2}$/gim)[0] to get the seconds – ’50’

The same then applies for the second timestamp.

Then, since we’d have the collected time in seconds, we just subtract t1 from t2 and we have the total time it took from event 1 to event 2, which is returned by the custom JavaScript variable.

We now have a custom JavaScript variable that we can use on the “timingEvent2” event to return the time it took since the “timingEvent1” event fired.

List of references and useful tools:

Date Object
RegEx
parseInt()
Tool to test RegEx

Share this Post

Leave a Reply

Your email address will not be published. Required fields are marked *