# Google Analytics in React

HandsOn tutorial:
* [Google Analytics, Ultimate Beginner’s Guide](https://www.youtube.com/watch?v=gBeMELnxdIg)
* [Google Analytics Tutorial 2019: Beginner To Expert](https://www.youtube.com/watch?v=1T83gm6GBt0)

## Medium (Tech detail)
#### web
https://medium.com/@wendeehsu/google-analytics-in-react-js-c1b78dc1bbda

#### App + Web
https://medium.com/@wendeehsu/react-js-with-google-analytics-web-app-c6e51ebf1d7b
# Term
* [`Session`](https://support.google.com/analytics/answer/2731565?hl=en): A session is a group of user interactions with your website that take place within a given time frame.
###### session ends when:
1. After 30 minutes of inactivity


2. At midnight
以我們GA裡的時區為主，可以改時區

3. Campaign change
ex. web opened through google ends when the user open it from fb link afterwards
> 所以連點同一個campaign來的網址session都算是同一個～

* `Campaign`: In its broadest definition, campaign tracking refers to a method of identifying ==how users discover your site.==

* `Bounce rate` = single page session / all sessions ([read more](https://yoast.com/understanding-bounce-rate-google-analytics/))
* `% Exit` : number of exit / number of pageviews

> ### Exit Rate vs. Bounce Rate
> [calculation](https://support.google.com/analytics/answer/2525491?hl=en) / [explanation](https://cxl.com/guides/bounce-rate/bounce-rate-vs-exit-rate/)
> 
> 

* `Acquisition`: where our users come from ( can use [Campaign url builder](https://ga-dev-tools.appspot.com/campaign-url-builder/) )

* [scroll](https://www.optimizesmart.com/implementing-scroll-tracking-via-google-tag-manager/)

## Implement (Web)
### Init

// index.tsx
export const initGA = () => {
  if (isProduction) {
    ReactGA.initialize('UA-153780028-1');
  }
};

// app.tsx
useEffect(() => {
  initGA();
}, []);

### PageView

// index.tsx
export const GApageView = (page) => {
  if (isProduction) {
    ReactGA.pageview(page);
  }
}

// landing.tsx
useEffect(() => {
  GApageView("landing");
}, []);


## Scroll

const updateScroll = () => {
    const height = document.documentElement.scrollHeight;
    const currentPosition = document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const scrollPercent = (currentPosition + windowHeight)/height;
    console.log(scrollPercent);
    
    if (scrollPercent >= 0.25 && scrollPercent < 0.26) {
      console.log("25%");
      GAevent("scroll","25%");
    } else if (scrollPercent >= 0.5 && scrollPercent < 0.51) {
      console.log("50%");
      GAevent("scroll","50%");
    } else if (scrollPercent >= 0.75 && scrollPercent < 0.76) {
      console.log("75%");
      GAevent("scroll","75%");
    } else if (scrollPercent === 1) {
      console.log("100%");
      GAevent("scroll","100%");
    }
  };
  
useEffect(() => {
    document.addEventListener('scroll',updateScroll);
}, []);

## [Event]((https://www.optimizesmart.com/event-tracking-guide-google-analytics-simplified-version/#a16))

// index.js
export const GAevent = (categoryName, eventName) => {
  if (isProduction) {
    ReactGA.event({
      category: 'categoryName',
      action: 'eventName',
      label: 'wendeeTest_nonInteraction',
      value: 10,
      nonInteraction: false
    });
  }
}

// landing.tsx 
<Button onClick={ () => GAevent('user','get started_up') }>
  GET STARTED
</Button>


##### nonInteraction:
[read more](https://www.bounteous.com/insights/2019/11/19/non-interaction-events-google-analytics/)
Non-interaction events are not accounted for when calculating bounce rate of time metrics. This means that if a visitor views a single page and fires a non-interaction event, the session is still considered a bounce and has a session duration of zero minutes. It affects bounce rate if set to true

## Timing

// index.tsx
export const GAtiming = (categoryName, variableName, valueNum) => {
  if (isProduction) {
    ReactGA.timing({
      category: categoryName,
      variable: variableName,
      value: valueNum,
      label: 'wendeeTest_timing'
    });
  }
};

// landing page
const currentTime = new Date().getMilliseconds();
  useEffect(() => {
    GApageView("landing");
    GAtiming('Timing','landingPage_render', new Date().getMilliseconds() - currentTime);
  }, []);

## Exception

// index.js
export const GAexception = (detail) => {
  if (isProduction) {
    ReactGA.exception({
      description: detail
    });
  }
};

// authentication.js
case FAILURE(ACTION_TYPES.LOGIN):
  GAexception("login fail");


## GTM
**Tag**: A tag is code that send data to a system such as Google Analytics.
**Trigger**: A trigger listens for certain events, such as clicks, form submissions, or page loads. When an event is detected that matches the trigger definition, any tags that reference that trigger will fire.
**Variable**: A variable is a named placeholder for a value that will change, such as a product name, a price value, or a date.
**Data layer**: Tag manager implements a data layer to temporarily hold values in the client so that they can be used by tags, triggers, and variables.