javascript - Push to dataLayer on initial app load Reactjs - Stack Overflow

admin管理员组

文章数量:1391981

I have an app which has GTM tracking. I'm currently checking when a route has taken place and pushing a page_view event to the dataLayer.

The problem I'm having is getting the dataLayer to push when the app loads initially. I have a back button which when clicked goes back to the home screen and fires an event but I can't get it to fire when the app loads initially. I can explicitly add the push event to the home ponent when it mounts, which will work but when I click the go back button it will fire twice.

Here's my code does anyone know how to get this to work when the app loads initially without duplicating the push?

ponentDidUpdate(prevProps) {
    if (this.props.path !== prevProps.path) 
    {
        this.routeChange();
    }
}
routeChange(){
   window.dataLayer.push({
        event: "page_view",
        url: this.props.path
    });
}

I have an app which has GTM tracking. I'm currently checking when a route has taken place and pushing a page_view event to the dataLayer.

The problem I'm having is getting the dataLayer to push when the app loads initially. I have a back button which when clicked goes back to the home screen and fires an event but I can't get it to fire when the app loads initially. I can explicitly add the push event to the home ponent when it mounts, which will work but when I click the go back button it will fire twice.

Here's my code does anyone know how to get this to work when the app loads initially without duplicating the push?

ponentDidUpdate(prevProps) {
    if (this.props.path !== prevProps.path) 
    {
        this.routeChange();
    }
}
routeChange(){
   window.dataLayer.push({
        event: "page_view",
        url: this.props.path
    });
}

• javascript
• reactjs
• analytics

Share Improve this question Follow edited Jul 17, 2018 at 10:06 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Jul 17, 2018 at 9:19 user3486427user3486427 48411 gold badge1111 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You could create your history object manually outside of the Router and listen to changes on that and also send an event directly when the file loads.

Example

import createBrowserHistory from "history/createBrowserHistory";

const history = createBrowserHistory();

history.listen(location => {
  const { pathname } = location;

  window.dataLayer.push({
    event: "page_view",
    url: pathname
  });
});

window.dataLayer.push({
  event: "page_view",
  url: window.location.pathname
});

function App() {
  return (
    <Router history={history}>
      {/* ... */}
    </Router>
  );
}

本文标签： javascriptPush to dataLayer on initial app load ReactjsStack Overflow