AdWords Conversion tracking on a Single Page React App

Question

Context:

In not familiar with google AdWords at all, and I don't have access to the AdWords configuration system (whatever it may be). I'm on the dev team who built a food delivery platform. The client has outsourced the marketing aspects to a marketing company.

The application is build in:

• React
• Redux
• Connected-Router
• Redux-Beacon
• GTM (for tools like GA, Floodlight, Hotjar etc)

We have a separate auth portal living on a subdomain called auth.scoot.co.za, which a user MUST go through at some stage (e.g ordering cant be done without an account)

The marketing team has published pay for ads on google.

The problem:

Problem Summary:

The marketing team claims that the ads aren't being picked up as the source of conversion / sales on the app. From my very limited understanding it seems that this Ad Context is lost somehow, and by the time the sale is made the source of the sale is inferred as organic inside GA vs Paid Search (CPC) (see image below)

What I've seen in my testing:

When clicking on the link in google the ad does append the gclid like below

https://**********/?gclid=EAIaIQobChMIjsTu_8jl6gIVTe7tCh1Xsw--EAAYASAAEgI5DvD_BwE

But when clicking on any other link in the app the url will get replaced with the relevant new url (without preserving the gclid query string)

https://**********/menu
https://**********/order-history
etc..

I have also seen that the following cookies are present on the app, _gcl_aw seems to align to the query string value that was supplied initially via the google ad link.

Other potential relevant info:

• I have enabled the conversion linker in GTM
• I have setup subdomain tracking

What am I missing? There doesn't seem to be a lot of info online with how to setup Google Ads correctly online within the context of a SPA app, and me not knowing marketing well enough & the marketing guys not knowing dev well enough has created some confusion.

Answer 1

I came across this blog post.

https://www.simoahava.com/gtm-tips/fix-rogue-referral-problem-single-page-sites/

In there Simo highlights that the issue is to do with the location being updated, this I believe is something intrinsic to SPA apps. His solution of just creating a new property in the dataLayer didn't work for all our application's use cases, as during some workflow of this SPA, we DO leave the single page.

Thus I ended up creating a slightly different implementation of his suggested solution. I ended up persisting the original location in session storage (as it is the most likely to be cleared out when, well.. the session ends.) See code below:

<script>
  if(!{{DLV - OriginalLocation}}) { 
    window.dataLayer = window.dataLayer || [];  
    var _ol = document.location.protocol + '//' +  
         document.location.hostname +  
         document.location.pathname +  
         document.location.search;   
    
    var sessionItem = sessionStorage.getItem('{{Const - OriginalLocation Key}}');
    
    if(sessionItem) {    
       window.dataLayer.push({  
         originalLocation: sessionItem
       });  
    } else {
      sessionStorage.setItem("{{Const - OriginalLocation Key}}", _ol);    
      window.dataLayer.push({  
        originalLocation: _ol
      }); 
    }    
  }  
</script>

I then made a variable that gets connected to the GA tracking config.

function(){
  var sessionItem = sessionStorage.getItem('{{Const - OriginalLocation Key}}');
  if(sessionItem) {
    return sessionItem;
  }  
  return null;
}

Variations of the fix above (that didn't work).

• I did try to manually rebuild the original location using the existing _gclid, this did work, but I think it would have causes issues when we start to introduce utm parameters.
• I tried to make my own custom cookie, but this could result in the cookie persisting a bit too long, and then we could potentially get false ad hits (if the cookie hasn't expired and the user re-visits on the same day via another link)