
#### Table of Contents

1. Introduction
2. Requirements
3. Add Google Sign-In callback
4. Use with next-session
5. Conclusion

### Introduction

This tutorial shows how to integrate sign in with Google account, and how to handle callback response from Google Sign-In.

### Requirements

- GCP
  - Has knowledge of using Google Cloud.
  - Already setup google sign-in setting OAuth Client ID and Secret at Google Cloud, or reference [here](/blog/post/how-to-sign-in-with-google-for-web-application-about-setup) for how to setup Google Sign.

### Add Google Sign-In callback

Once setup the Google Sign-In, OAuth Client, and redirect URLs, then first thing we can do is add call back function at the application to handle the response sending by the Google Sign In.

If define as below as **_http://localhost:3000/api/auth/callback/google_**, then once user successfully sign-in with google will redirect to that URL with JWT token, so will need logic to process the information, for instance, save the **_name_**, **_email_** to the database, or save the email to the session. So this article will demonstrate how to use `next-session` to save to the session, cookie and how to clear session build custom logic with logout function.

![OAuth Create Screen](/images/sign-google-nextjs/img2.png)

Below is sample code, so once google callback come to this function, you can start parse the credential as **_jwt_** token, then read the value from, for instance below you should be able to get name and email who successfully sign-in with google.

```TypeScript
export default async function auth(req: NextApiRequest, res: NextApiResponse) {

const credential = req.body.credential;

const jwtToken = JSON.parse(Buffer.from(credential.split('.')[1], 'base64').toString())

const name = jwtToken.name;

const email = jwtToken.email;

}

```

### Use with next-session

Once build callback function, you need to store those information at the web application. One of the way to do is using the **_next-session_**.

```TypeScript
export const getSession = nextSession({
  cookie: {
    sameSite: 'lax',
    maxAge: 60 * 60 * 24 * 365,
  }
});
```

### Conclusion
This blog demo example code how to google sign-in callback works and how you can using ***next-session*** to store user specific information across your application.

This tutorial shows how to integrate sign in with Google account, and how to handle callback response from Google Sign-In.

Sign In with Google at Next.js and Next-Session


#### Table of Contents

1. Introduction
2. Requirements
3. Create Google OAuth Client ID and Secret
4. Configure OAuth Consent Screen
5. Load with Default Setting
6. Conclusion

### Introduction

This tutorial shows how to integrate sign in with Google, along with setup the Google API, Create OAuth Client.

### Requirements

- GCP
  - Has knowledge of using Google Cloud.
  - Has set up project by using Google Cloud.

### Create Google OAuth Client ID and Secret

Since use Google Account for sign in, first we'll need to create OAuth Client ID an Client Secret.

Go to the APIs & Services' Credentials Page
Once land at the Credentials Page, you'll see _APIKeys_, _OAuth 2.0 Client IDs_, _Service Accounts_.

Click _CREATE CREDENTIALS_ and choose _OAuth Client ID_.
![Choose Create OAuth](/images/sign-google-nextjs/img1.png)

For the detail of the OAuth Client ID, reference as below

- Application Type
  - Choose _Web Application_, since we'll use the _Next.js_.
- Name
  - Enter any meaningful name following your application's standard.
- Authorized Javascript Origins
  - _http://localhost:3000_, for testing, our next.js will start port as _3000_.
- Authorized redirect URIs
  - _http://localhost:3000/api/auth/callback/google_, this's the redirect URL after user authorized with Google Account, will redirect to this URL with.

![OAuth Create Screen](/images/sign-google-nextjs/img2.png)

Click the _Create_ button, once create the OAuth, we'll be able to obtain the Google client ID and secret, store these for now cause we'll need these value later.

### Configure OAuth Consent Screen

First of all, what's this OAuth Consent Screen, right?
So enter the information at OAuth Consent Screen, can control below options when user use Google Account to Sign In.

- Application Name
- Application Logo
- Support email
- Application HomePage / Privacy Policy / Terms of Service Links

As you can see, Enter detail information can help user to find more detail about the application during the sign-in process.

### Load with Default Setting

Once create OAuth Client ID, Secret and fill out OAuth Consent Screen, the Setting for the Google part is done, now, base on the Google Account's instruction, at very minimal with below information you can use the Google Account now.

First, add following script file to the page.

```Javascript
<script src="https://apis.google.com/js/platform.js" defer></script>
```

Then, create button with _OAuth Client ID_

```HTML
<div
  id="g_id_onload"
  data-client_id="{Your_OAuth_Client_ID}.apps.googleusercontent.com"
  data-context="signup"
  data-ux_mode="popup"
  data-login_uri="auth"
  data-auto_prompt="false"
>Sign In</div>
```

Now, with these setup, once launch the app with port _http://localhost:3000_ and click the button Sign In will open Google Account, and once finish the Google Account's authentication will redirect to your app's redirect URL and post the JWT token information.

You can enhance above code so you can use the Google Account Sign in, but at this tutorial we'd like also try the _next-auth.js_ for authentication.

### Conclusion

Sign In with Google is the quick way to let your user to authenticate to your application, without manage user's password, this blog is focus on how to setup the Google Sign-in at Google, next will demo how to use the same setting to create Google Sign-in with next-auth or build system your self to intergrade with Google Sign-in.


This tutorial shows how to integrate sign in with Google account, focus on how to setup at the GCP.

How to Configure Google Sign-In with Google


#### Table of Contents

1. Introduction
2. Requirements
3. Get started with NextAuth.js with Google Sign In
4. Conclusion

### Introduction

This tutorial shows how to integrate sign in with Google by use _next-auth.js_ under Next.js Web Application, for how to setup or configure google sign-in, please reference [here](/blog/post/how-to-sign-in-with-google-for-web-application-about-setup) for detail about setup google sign-in.

### Requirements

Since this tutorial assume we're use Google Account with _next-auth.js_ Next.js, so below are least requirements to get further of this tutorial.

- GCP
  - Has knowledge of using Google Cloud.
  - Has set up project by using Google Cloud.
- Next.js
  - Already has application built with _Next.js_.
  - Has knowledge of how to use _Next.js_.

### Client ID, Secret, OAuth Consent Screen Setup

Regarding Google OAuth Client ID and Secret, OAuth Consent Screen setup, please reference [here](/blog/post/how-to-sign-in-with-google-for-web-application-about-setup) to see more detail.

### Get started with NextAuth.js with Google Sign In

Here we'll setup NextAuth.js to the Next.js
First, let's install the dependencies packages.

```node.js
npm install next-auth
```

Next, let's replace `_app.js` with below code.

**Before**

```Javascript
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

**After**

```Javascript
import { SessionProvider } from 'next-auth/react';

export default function App({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}
```

Create **[...nextauth...].js** under **pages/api/auth** location.
_NextAuth.js_ has many different provider, Google Account is just one of them, replace the below client*id and client_secret with the one you already created at the OAuth. Also, \_NextAuth.js* has different callbacks, you can use one of this to intergrade with your own system, such as check the user if already register at your application or not.

```Javascript
import type { NextApiRequest, NextApiResponse } from 'next';
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
  return await NextAuth(req, res, {
    providers: [
      GoogleProvider({
        clientId:
          'my_client_id',
        clientSecret: 'my_client_secret',
      }),
    ],
    callbacks: {
      async jwt({ token, account, isNewUser, profile, user }) {
        return token;
      },
      async signIn({ user, account, profile, email, credentials }) {

        if (account.provider === 'google') {
          // check if user already exist or not with custom db

          else {
            // existing user
          }
        }
        return true;
      },
      async redirect({ url, baseUrl }) {
        return baseUrl;
      },
      async session({ session, token, user }) {
        return session;
      },
    },
    theme: {
      colorScheme: 'light',
      brandColor: '#343434',
      logo: '',
      buttonText: '#333',
    },
  });
}
```

### Conclusion

Sign In with Google is strict forward way to let your user to authenticate with your application, with `next-auth` is even better that due to it's able to manage the session and make it easy to manager the user information or intergrade with Google Sign-In and other third-party sign-in platform. Next, will be without using the `next-auth`, how to intergrade with Google Sign-in with Next.js web application.


This tutorial shows how to use Next-Auth to integrate sign in with Google under Next.js web application.

How to Use Next-Auth with Google Sign-In


### get total page view count for the month

Return 202305's each date's page count

```SQL
with data as (
SELECT event_date, event_name, count(*) as total
FROM `ga4_table.events_intraday_202305*`
group by 1, 2
having event_name = 'page_view'
order by 1
)
select event_date, total from data;
```

Total event count with event_name

```SQL
with data as (
SELECT event_name, count(*) as total
FROM `ga4_table.events_intraday_202306*`
group by 1
order by 1
)

select * from data;
```


GA4 Big Query Sample Query


This blog show how to add user properties to Google Analytics 4, aka GA4, will demo how to use `gtag` or use google tag manager to archieve this, also at each way will show how the actual user properties data show on big query for ga4.

## pre requirement

This blog already your website already setup with ga4 with google tag manager, and `gtag` and `dataLayer` global variables are available at your page.

- website is setup with ga4.
- `https://www.googletagmanager.com/gtag/js` is loaded.

## How to use `gtag` to add user properties

Here we'll start how to use `gtag` to add user properties to GA4, and will verify at Big Query as well.

Following is an example code snippet which will fire ga4 event with user properties, the first line of code is set the user_properties with the key as `favorite_color`, this `favorite_color` we assume is some user specificy related to your site and you want to update to the event you sent to ga4, so we set the `favorite_color` as blue, so the next line is send ga4 event `test_up_data1` to the ga4.

```
gtag("set", "user_properties", {favorite_color: "blue"});
gtag("event", "test_up_data1", {other_data: "test up properties"});
```

When you run above code from your browser console, you should see ga4 event sending from your browser as below. `ep` is event parameters, and `up` is event properties.
![send ga4 user_properties event](/images/send-user-properties/img1.png)

How does above show at the Big Query table? You can see in the Big Query table we can see the event we just fire from our browser had received by Big Query, and the user_properties has `favorite_color` and the value exist. Also you notice the page_view and user_engagement event doesn't have that value. These two events are fire by ga4 and automatically collected.
![send ga4 user_properties and big query](/images/send-user-properties/img2.png)

Now, if you run the same code again at this browser, you'll notice the browser is firing the event but without the user properties `favorite_color` fields.

```
gtag("set", "user_properties", {favorite_color: "blue"});
gtag("event", "test_up_data1", {other_data: "test up properties"});
```

This is the big query result after we made the second gtag request from the browser, although we had the set with the user properties but no user properties had add to the same event.
![big query with user properties](/images/send-user-properties/img3.png)

### Configure Custom definitions for User Properties

Not sure why use the `gtag` with `set` the user properties has above weird behavior, which only the first event sent to Big Query will has the user_properties, but looks like we need to configure the user property at the GA4 property's `Custom definitions` section.

Following is how we configure the user property at `Custom definitions`, as you can see below we create dimentions name `favorite_color` and the Scope as `User`.
![Config Custom Dimentions for User Properties](/images/send-user-properties/img4.png)

After set the custom dimentions at GA4 property, it might take sometime then the result will affect, but we did following test as result. The `user_pseudo_id` is session store at the ga4 BQ table, you can we load the page then the browser fire few events `first_visit`, `scroll`, `session_start` and `page_view`, and all of them doesn't have the `favorite_color` at the user_properties table, after page load we fired few same event `test_up_data1` few times, and you can see they all have the `favorite_color` record.

The next is, you can see we fire the `test_up_data` which contains the `favorite_color`, then we also fire another event `test_up_data2` and you can notice this custom event also contains the user properties `favorite_color`, so looks like after we user `gtag` to `set` the user properties with the configuration at the GA4 property, any custom event after the `set` will also fire the same user properties, which make sense that's the user scope of events.
![User Properties at Big Query](/images/send-user-properties/img5.png)

### What about the page_view events for user properties

We also did another test as below, you can see we start a new session, since the `user_pseudo_id` changed, when we first load the page, you can see the `page_view`'s user_properties is empty, but once we manully run the code above, you can start seeing event with `favorite_color` user properties filled into the automatical collected events, also any other event will also include the same user properties as well, in addition, you can see we load the page again with the same session and the user properties still contains the same `favorite_color` value.
![User Properties at Big Query](/images/send-user-properties/img6.png)

### GTAG Sample Code

Following is the sample of above code, once you click the button, the subsequent event include page_view will also include the user property `favorite_color`. Also, you need to add `favorite_color` to the custom dimention at ga4 property.

```
<button
  className="ga4"
>
test_up_data1
</button>

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{Measurement ID}', {
      send_page_view: false
});

var buttonEle = document.querySelector(".ga4");
buttonEle.addEventListener('click', function(e) {
    gtag("set", "user_properties", {favorite_color: "blue"});
    gtag("event", "test_up_data1", {other_data: "test up properties"});
});
</script>
```

### Page load events doesn't contains the user_properties

There's one issue with above code, if you start the page from new session, the page view events doesn't contains the user_properties we have earlier. To solve this we can use dataLayer along with user property at the ga4 configuration.
![Big Query User Property - First Visit](/images/send-user-properties/img7.png)

Here, we define a dataLayer variable as favorite_color, then later create a user property `favorite_color` at the GA4's configuration.
![GA4 Configuration - User Properties](/images/send-user-properties/img7.png)

Now, we just need to add the code to the page during the page load. Also, make the below code before the gtm scripts.

```
// place this code before gtm load scripts.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    favorite_color: "green"
})
```

### Conclusion

In summary, if you have GA4 fields are user property, then following below code looks like will be correct implementation.

- create custom dimension at GA4 property, set the type as user
- create dataLayer variable for your property
- create GA4 configuration and set the dataLayer as user property
- at the code, set the dataLayer value before the gtm script
  Now, page view and any subsequent events's user_properties should contain the your new user property type.


User scoped custom demensions in GA4, this blog show how to set user properties in GA4 by using gtag or google tag manager.

How to Set User Properties in GA4


https://developers.google.com/analytics/devguides/collection/ga4/reference/config

GA4 has its few

## client_id

stored as part of first-party analytics cookie for 2 year, use for identify each user.

```
gtag('set', 'client_id', '123456');
gtag('event', 'test_gtag_set', { test_id: 'client_id'});
```

The `collect?v=2` request's query string key will be `cid`. Big Query column is `user_pseudo_id`, also the cookie `_ga` value will be update to GA.1.1.`123456`.
Update this value, the subsequence request will always set the same value since cookie updated.

## language

by default using the window object's `nagigator.language`'s value.

```
gtag('set', 'language', 'en-ca');
gtag('event', 'test_gtag_set', { test_id: 'language'});
```

The `collect?v=2` request's query string key will be `ul`. BQ column is `device.language` will be update to `en-ca`. The navigator.language won' update.

## page_location

By default using the window object's `document.location`'s value, not sure what condition need to update this value.

```
gtag('set', 'page_location', '/test2');
gtag('event', 'test_gtag_set', { test_id: 'page_location'});
```

The `collect?v=2` request's query string key will be `dl`. BQ column is `event_params.page_location` will be update to `/test2`.

## page_referrer

By default using the window object's `document.referrer`'s value, if is direct come to the site, `document.referrer` should be empty and BQ will have no value.

```
gtag('set', 'page_referrer', 'https://technoapple.com');
gtag('event', 'test_gtag_set', { test_id: 'page_referrer'});
```

The `collect?v=2` request's query string key will be `dr`. BQ column is `event_params.page_referrer` will be update to `https://technoapple.com`, because of `page_referrer` has value, `event_params` will add 2 more values, `medium` value is `referral` and `source` has value is `technoapple.com`.

## page_title

By default using the window object's `document.title`'s value, not sure what condition need to update this value.

```
gtag('set', 'page_title', 'my title');
gtag('event', 'test_gtag_set', { test_id: 'page_title'});
```

The `collect?v=2` request's query string key will be `dt`. BQ column is `event_params.page_title` will be update to `my title`.

## user_id

The user's id provide by the site.

```
gtag('set', 'user_id', '123');
gtag('event', 'test_gtag_set', { test_id: 'user_id'});
```

The `collect?v=2` request's query string key will be `uid`. BQ column is `user_id` will be update to `123`. Once this value is set subsequent gtag request will always contains user_id as `123`.

## user_properties

Additional user preference information, update to 25 additional user properties. name max is 24, value max is 36.

```
gtag('set', 'user_properties', {
  "data1": "1 data"
});
gtag('event', 'test_gtag_set', { test_id: 'user_properties'});
```

The `collect?v=2` request's query string key will be something start with `up`, e.g. `up.data1`. BQ column is `user_properties`, it should contains the object `data1` and value `1 data`.

```
gtag('config', 'G-NFY53GVWDK', {
   'user_properties': {
      "data_10": "10 data"
  }
});
gtag('event', 'test_gtag_set', { test_id: 'user_properties'});
```


View Simple Steps to Setup Google Universal Analytics at Your Web Site.

About GA4 Configuration fields

# About Universal Analytics

This page is showing example of how to setup Universal Analytics for learning purpose, please be aware the Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll have to switch to Google Analytics 4 Property.


## Setup Universal Analytics
If you're first to use Google Analytics, you'll need to setup account, once you have setup google analytic account, you can create property as the screen shows below.

Again, this blog just for learning purpose so choose the Universal Analytics property but mostlikely you'll need to use the GA4 property.

### Setup Property 
![Setup Property](/images/setup-analytics/img1.png)

### Add Basic Information 
![Add Basic Information](/images/setup-analytics/img2.png)

### Setup Tracking Code

At this point, you should be gettting the Google Tracking code snippet, you'll need to setup this to your WebSite, so the site can start tracking for your website.

![Setup Tracking Code](/images/setup-analytics/img3.png)

### Add Tracking Code to Web Page
As the description at the setup Tracking Code, you'll need to copy the Google Tracking Code to any page of your site need tracking.


Following is sample code how to add Google Tag Manager script to the Next.js.

```
import Script from 'next/script'
export default function Nextra({ Component, pageProps }) {
  return (
    <>
      <Script
            strategy="afterInteractive"
            src='https://www.googletagmanager.com/gtag/js?id=UA-{Your Property ID}' />
      <Script
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-{Your Property ID}');
          `,
        }}
      />
    </>
  )
}

```

### Verify the tracking code

After adding the above tracking code to your site, go back to the Google Analytics and check if there's any record or not.

The above code will sends a pageview to the Google Analytics.
```
gtag('config', '{your tracking ID}');
```


Most of the site already using the Universal Analytics, this blog show how to setup both Universal Analytics and GA4 from Google Tag Manager.

Category Google Analytics