How to Use Google Analytics in ReactJs Application to Track Events

0
votes

I want to track link in component clicks using Google Analytics in my reactjs app. I did below steps:

  1. npm install react-ga --save

  2. import ReactGA from 'react-ga'; ReactGA.initialize('UA-mytrackId');

  3. my index.html has javascript code:

    var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitCallback': function(){document.location = url;} }); }

How to track the , clicks in my component below:

import React from 'react';
import { Link} from 'react-router-dom';
const CourseDetail=({course, onCourseSelect})=>{
return (    
   <div>
     {course.SUBJECT} {course.CATALOG_NBR} - {course.COURSE_DESCR} 
     <ViewLink onCourseSelect={onCourseSelect} course={course}></ViewLink>
     <Link  to={{ pathname: '/course/'+course.CLASS_NBR
             
            }}
            target="_blank"
                        key={course.ID} onClick={()=>"ga('create', 'UA-mytrackId'); ga('send',   'event', 'Schedule', 'bookmarksClick', 'bookmarks');"} >
                        Bookmark link
                    </Link>
    </div>  
);
};
export default CourseDetail;
1
reactjsgoogle-analytics

1 Answers

0
votes

This is an example to send an event to Google Analytics in React:

const sendOutbound = (event) => {
  event.preventDefault();
  ReactGA.event({
   category: 'Schedule',
   action: 'bookmarksClick',
   label: 'bookmarks'
 });

<a href... onClick={sendOutbound}>
   ...
</a>