Using Microsoft Ads UET Tracker with Single Page Applications & GTM

If your site is utilising a framework like React, you are likely running a single-page application aka an SPA . In basic terms, a normal website will reload the page each time you click on an internal link to visit another page. When you do this, scripts and trackers like Microsoft Ads’ UET snippet are reloaded. They then capture the newly loaded page and send that information back to the platform so you can use it to build custom audiences and goals. This is the same for most pixels.

Because of the nature of SPAs, snippets of code like ads pixels don’t know when a change page has occurred. They only know about the original page load and landing page. This isn’t a fault of SPAs – they’re designed to be lightning fast and resource efficient – they’re great for mobile devices on bad connections. But, they don’t explicitly tell the browser that a page change has happened.

Luckily, most ad pixels come with SPA support. I want to write about Microsoft’s UET tag because it’s a little buried in their site. Plus, the support I’ve seen on their own forums is terrible and their own team answered the question incorrectly, twice.

Let’s get started. Grab your UET Tag ID from Microsoft Ads: Tools > Conversion tracking > UET tag

Next, head over to Google Tag Manager and add a new Tag using the following configuration:

ConfigurationValue
TypeBing Ads Universal Event Tracking
Bing Ads UET Tag ID<your UET ID>
UETQ Variable IDuetq
Event TypePage Load

Attach an All Pages trigger to this tag and save it.

This will be the initial loading of the UET script which will happen when somebody first visits your site. Even though SPAs don’t “load” pages in the usual way, any site regardless of technology will trigger an initial page load upon entering.

Finally, create a new HTML Tag and add the following snippet

<script>
  window.uetq = window.uetq || [];
  window.uetq.push('event', 'page_view', { page_path: '{{Page Path}}' });
</script>

As you can see, MS has set up a small event bus to handle pageview changes that occur within SPAs. It’s pretty basic but it’s good to see they’ve implemented it. They’re utilising their events object to handle the pageview which is processed on their side as a Page Load action.

You’ll need to trigger this when your SPA changes state. If you already know this and have a custom event trigger setup, attach it. If you haven’t done this. You’ll need to find out how your SPA changes state and if it sends an event to the dataLayer. In most cases, a default event is sent depending the SPA technology being used. For example, Gatsby has a built-in event called gatsby-route-change which can be monitored to handle page changes in trackers like Google Analytics. In most cases, ask your development team if they can implement a dataLayer event when the site loads a new state.