Get Battery Status Extension for iQ

[steve_lake]

It is possible within Tealium iQ to add a javascript extension to get the battery status from the browser, much like it is within the mobile SDKs. This is a relatively easy custom extension that adds battery status (i.e. charging or not), percentage of charge and the time until the battery is flat to the data layer, for use within other tags or to send to the CDH. 

The Tech

The extension uses a javascript function called navigator.getBattery() to get the details from the battery manager API. This is currently supported by Chrome, Edge, Opera, and many other browsers, although not by Firefox or Safari.

See https://caniuse.com/battery-status for more information on which browsers support it.

However, rather than thinking of this as data that you sometimes can’t get, think of it as data can get which provides additional useful and interesting insight into a site visitor’s status.

Setting Up the Code

Add a new javascript extension, call it something useful like “Get Battery Status” and set the scope to “Pre loader”.

This means the extension will run before any of the tags or load rules, and as it’s updating the on-page data layer, it will be available for use when all of the load rules fire and determine which tags to trigger. This will prove useful if you want to stop some tags from running if someone’s battery is going flat.

The code below creates the default utag_data object* if it doesn’t already exist, then sets up the updateBatteryStatus function which sets three variables within the utag_data object.

(*If your default data layer object is called something else, you can just change it in the code)

These are:

device_ischarging - set to either ‘charging’ or ‘not charging’
device_battery_percent - set to the percentage of charge remaining
device_dischargeTime - How much time is remaining until the battery goes flat.

The initial promise setup triggers the first updateBatteryStatus to update the variables on the page load event, and then sets up listener functions for onchargingchange to track changes in the charging status, onlevelchange to track changes in the charge and ondischargingtimechange to track the amount of battery time remaining.

utag_data= utag_data || {};
   
function updateBatteryStatus(battery) {
  utag_data['device_ischarging'] = battery.charging ? 'charging' : 'not charging';
  utag_data['device_battery_percent'] = battery.level;
  utag_data['device_dischargeTime'] = battery.dischargingTime / 60;
}
 
navigator.getBattery().then(function(battery) {
  // Update the battery status initially when the promise resolves ...
  updateBatteryStatus(battery);
  
  // .. and for any subsequent updates.
  battery.onchargingchange = function () {
    updateBatteryStatus(battery);
  };
  
  battery.onlevelchange = function () {
    updateBatteryStatus(battery);
  };
  
  battery.ondischargingtimechange = function () {
    updateBatteryStatus(battery);
  };
 
})

The Use Cases

Ok, so it’s kind of cool to be able to get the data, but what can we actually do with it?

Example 1: Don’t serve battery hungry tags.
Everything on a webpage uses power, which if the battery is low, is actually surprisingly important. On my phone, Chrome is currently the app which has used the most power over the last 7 days and accounts for 7.2% of the total. (The next hungriest is Messenger with 2.5%)

Once you know the battery status, if you are using iQ to serve any power-hungry tags such as some that push in video adverts or similar, you can add the details to the load rules to make sure that you don’t push that content in if it will drive their battery flat.

Example 2: Battery data to CDH
Does the visitor often use their device while not charging - this could indicate that they are more ‘mobile oriented’ and used to moving around rather than sitting at a desk, and could be useful in campaigns. Or it could be that they always let it get to 2% before charging, which may indicate a “just in time” type of personality trait.