Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

The best practices to integrate the google analytics

See original GitHub issue

i.e. the best place to copy this code:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXX-X', 'auto');
  ga('send', 'pageview');

</script>

I tried to copy this code into html.js. But I got some errors.

Issue Analytics

State:
Created 8 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

4reactions

rickyPanzercommented, Mar 3, 2016

Following @sseppola 's suggestion, I incorporated the mozilla react gem. The directions aren’t super up to date: it still references Router.run, which I believe is pre react-router v1.0.

So I looked at suggestions from @criagrich, which were rather golden. https://github.com/mozilla/react-ga/issues/38

It had to be somewhat updated for this template, so I’ll show my code here, if it’s helpful.

Make sure you require ‘react-ga’ up top. This is in the create.js file.

import ga from 'react-ga';

Inside of the create store function, add the following and change the const middleware line

  function logPathChange({ getState }) {
    return (next) =>
      (action) => {

        if (action.type == '@@router/UPDATE_LOCATION'){
           console.info(`Route Changed: ${action.payload.pathname}`);
           ga.pageview(action.payload.pathname);
        }

        return next(action);

      };
  }

  const middleware = [createMiddleware(client), reduxRouterMiddleware, logPathChange];

That way, it leverages react router, and correctly reports page changes, unlike when just including the script tag!

Oh and I initialized the ga object in App.js, but sure there a bunch of places that could be fine.

Anyone please let me know if I’m wrong!

4reactions

davidecantonicommented, Dec 10, 2015

that’s because of JSX, try it like this:

<body>
{/* Google Tag Manager */}
  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=UA-XXX-X"
                    height="0" width="0" style={{display: 'none', visibility: 'hidden'}}></iframe></noscript>
  <script dangerouslySetInnerHTML={{__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});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','UA-XXX-X');`}} charSet="UTF-8"/>
{/* End Google Tag Manager */}
</body>

Top Results From Across the Web

Google Analytics Best Practices Checklist - Improvado

Create Multiple Views · Test that you are tracking Pageviews accurately · Filter out your internal traffic · Exclude Query parameters · Make...

5 Google Analytics Best Practices for Beginners - SpyFu

1. Take Google's Analytics Academy Courses · 2. Figure Out Your Website's Most Important KPIs · 3. Choose Your Analytics Views · 4....

The Ultimate Guide to Google Analytics in 2023 - HubSpot Blog

I've found the easiest way to think about it is: Dimensions: categorical variables. Simple examples include names, colors, and places. Metrics: ...

Best practices for using Google Analytics data in Search Ads ...

Leverage your existing Google Analytics conversion data · Use Google Analytics data for remarketing · Use Google Analytics data with automated rules ·...

Google Analytics Setup Best Practices and Tutorial

Stay away from secondary goals or goals that affect leads in an indirect way, such as time on site or page duration. These...