search

holidaycheck / react-google-tag-manager

This repository contains a react based implementation for Google's Tag Manager snippet.
MIT License
192 stars 31 forks source link

GTM trigger as user scrolls down on page in ReactJS #82

Open simran-k opened 6 years ago

simran-k commented 6 years ago

I am using https://www.npmjs.com/package/react-google-tag-manager for managing GTM tags in ReactJS.

I have GoogleTagManager Component as suggested. I call this GoogleTagManager component everytime user scrolls down on the Product listing page. As user scrolls down, although the GoogleTagManager is getting rendered but GTM preview reports that GTM is triggered only once on page load. (Although I can clearly see my console statement from GTM component getting rendered as user scrolls down so indeed it is getting called)

Here's how I call it:

{this.state.callGTM===true && <GoogleTagManager gtmId='GTM-A12B12' additionalEvents={this.state.gaDataEvent}/>}

Here's what I see inside of script tag:

```

(function(w,d,s,l,i){w[l]=w[l]||[]; w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', "event":"productListingImpressions","ecommerce":{"currencyCode":"INR","impressions":[{"name":"Blue Top","id":21443,"sku":"IN1747567OTOPBLU-714","price":1199,"category":"Category Results","list":""}}]}}); var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''; j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl ; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-A12B12');



What I need to do is pass `this.state.gaDataEvent` as datalayer to GTM. But as I am using GTM preview, I see that it is not getting triggered again as the user scrolls down.