Safari detection using tealium extension

Gold Contributor
Gold Contributor


I'm trying to set a data layer variable via extension if the user is on safari and another one if it isn't safari. Is there a way to achieve this without custom JS extension?





Safari detection using tealium extension

Tealium Employee

Hi Arya!

Typically if I was building something like this, I'd probably use a JS extension - but I like a good challenge, so I've found a way to do it that doesn't use any JS. This solution uses the User Agent string, which has its own problems (not least of which: Google is working to phase them out in Chrome), but in any case:

Step 1: Data Layer Variables

UDO Variable: is_safari, to hold the true/false state:var-is-safari.png

JS Variable: navigator.userAgent, to read the User Agent string from the browser:var-navigator-useragent.png

Step 2: Extensions

Set Data Values extension scoped to Before Load Rules, set is_safari to false - this provides a default state:ext-is-safari-default.png

Another Set Data Values extension, also scoped to Before Load Rules (but run after the previous extension), set is_safari to true when the User Agent string contains the word Safari. There are a bunch of conditions here, owing to the way various non-Safari browsers set things up:ext-is-safari-check.png

In case those conditions are hard to read, here they are in order:

  • User Agent is defined
  • And: User Agent contains (ignore case) "Safari"
  • And: User Agent does not contain (ignore case) "Chrome"
  • And: User Agent does not contain (ignore case) "Android"
  • And: User Agent does not contain (ignore case) "CriOS"
  • And: User Agent does not contain (ignore case) "FxiOS"

There may be other non-Safari User Agents out there that contain Safari and also something else, but the above should catch most of them (it seems most non-Safari browsers use the Safari + Chrome combination).

Hope this is helpful!

- zac.