Syncing up Google Ads and Analytics to your React App.

#react #webdev

Getting setup

Google has made it quite simple to integrate Ads and Analytics. To get started you'll need an account for both services. You'll need to obviously enter in personal info, leaving that feeling like you're selling your soul to the devil. For Analytics you'll also need the URL of your site. Once you're setup head over to Analytics then proceed to admin -> property -> tracking info -> tracking code to fetch your trackingID. Keep the trackingID handy as you'll need it later in our App.

your trackingId should look something like

UA-XXXXXXX-X

We'll also need to to setup a GoogleAds account. Follow Google's setup process of creating an account and choosing a plan (more soul selling). Once you've gone through the initial setup, we'll want to link our Ads account to our Analytics Account. On the Ads dashboard, select the tools -> setup -> linked accounts. Select details and you should be prompted to add in the trackingID you grabbed from Analytics. Thats pretty much all there is to it.

Creating and using an event

React-ga is a package built off the Analytics API offering a variety of config options making it a breeze to implement Analytics in our App.

yarn install react-ga

Once installed we'll need to import react-ga inside of the main page where our app is built (App.js or Index.js). Then we'll pass it our Analytics trackingId we got earlier during setup, react-ga will handle all the boilerplate code needed in our app.

ReactGA.initialize('UA-XXXXXXX-X')

This next part is left up to you. Where ever in your code you'd like to place GoogleAds, you'll need to create a new Analytics event using ReactGA.event. No matter where you place your event, there are a few parameters that are important to remember because you'll need to set them exactly the same in Analytics. The event will look something like this


  ReactGA.event({
    category: 'some category',
    action: 'example_action',
    label: 'example label',
  })

There are some configurations you can add to the event object, but these three are the important ones. Once this is done, head on back over to GoogleAnalytics and back under the admin page, find Goals and select Create A New Goal.

You'll want to create a new custom goal in the initial setup and then provide a description and select Event for the type. Now, under goal details place fill in Category, Action and Label exactly as you did before in the ReactGA.event(). Once you're done save your event.

Tying it all together.

Head on over to your GoogleAds dashboard and under Tools & Settings select conversions. There'll be a nice blue + sign in the upper left corner to add a new conversion, give it a click and then select import. By syncing our Ads and Analytics accounts up earlier, we're now able to import our newly created goal in Analytics as a conversion in Ads and BOOM! we're all set. Any Ad campaigns you've set up for the conversion should now be tracked in Google Ads.