Syncing up Google Ads and Analytics to your React App.
Tags: react, webdev
Published: 2019-12-05 05:23:37

---
title: Syncing up Google Ads and Analytics to your React App. 
published: true
description: 
tags: #react #webdev
cover_image: https://user-images.githubusercontent.com/17259420/69598691-76f97a00-100a-11ea-9a70-820bbc33890b.jpg
---

# 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 

```javascript

  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.