CODEWITHSUNDEEP
javascriptreactjsgoogle-analyticsgoogle-tag-manager
love-for-coding
love-for-coding

Reputation: 227

GTM layer not pushing data

I am working on a hybrid application in which login page is written in php and rest application is written on react. I want to implement google analytics for the same SPAs. I am pushing data layer in componentWillMount and my gtm script is being added via php code in index.php file.

The problem that I am facing is on first time and whenever page is transitioning from non-react to react pages, my GTM layer is not pushing data into gtm. if move with in react pages, everything is working fine.

Any help is highly appreciated.

Thanks

Upvotes: 0

Views: 1290

Answers (1)

Raoul Dundas
Raoul Dundas

Reputation: 426

The problem you are facing is very common when using SPAs.

Let me give you an example:

  1. When you move from https://digitalmarketingbloq.com to https://digitalmarketingbloq.com/2018/08/07/how-to-filter-internal-traffic-in-google-analytics-with-google-tag-manager/ The browser communicates with the server. The page is being rendered and GTM gets initiated.
  2. In your example on the first-page view of your SPA, it works fine because the communication with the server is established . But in an SPA moving from one page to the other happens, client side. Do GTM does not have anything to act upon.

How can you solve this?

The first option is to enable the built-in variables in the "History" (Variables > Configure > History) section: Google Tag Manager - Built-in variables - History

Second, create a trigger (Triggers > New > History Change) that fires on all History changes: Google Tag Manager - Trigger history change - all

In preview mode, you can check if your SPA pick up on history changes. Read more information about the variables here: https://support.google.com/tagmanager/answer/7182738?hl=en&ref_topic=7182737#history and about the trigger here https://support.google.com/tagmanager/answer/7679322?hl=en.

If that doesn't work you need to develop "virtual page view" events in the SPA when transitions are completed. Let me give you some more perspective. When a transition from page A to page B is completed fire the following event:

  dataLayer.push({
    'virtualPageTitle': 'My Login Screen',
    'virtualPageURL': 'https://www.my-example/login',
    'event': 'VirtualPageview'
  });

The above will push virtualPageTitle and virtualPageURL to the dataLayer as and event VirtualPageview. GTM will be able to pick this up but you need to create 2 user-defined variables virtualPageTitle and virtualPageURL. The trigger will be VirtualPageview.

Hopefully, this clarifies things for you.

Upvotes: 1

Related Questions