Using Google Analytics
Step 1: Create a Google Analytics account
Sign in to Google Analytics:
Go to Google Analytics and sign in with your Google account.
Access the administration page:
In the lower left corner, click on the gear icon to access the administration settings.
Step 2: Create a property
Select an account:
If you already have a Google Analytics account, select the account in which you want to create the new property.
If you do not have an account, you will need to create a new account. To do so, click on "Create account" and follow the instructions.
Create a new property:
In the "Property" column, click on "Create property".
Select "Web" for the property type.
Enter the name of the property (for example, the name of your website).
Enter the URL of your website. Make sure you select the correct protocol (http or https).
Select your industry category and time zone for reporting.
Click "Next" to continue.
Configure the property:
On the next screen, select the options that best suit your needs.
Click on "Create" to finalize the creation of the property.
Step 3: Obtain the tracking ID
Obtain the tracking ID:
Once you have created the property, you will be redirected to the property configuration page.
Here you will see a tracking ID which has the format UA-XXXXX-Y. This is the ID you will need to set up Google Analytics on your website.
Copy the tracking code:
Below the tracking ID, you will see a tracking code snippet.
Copy this code snippet. It will look something like this:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y');
</script>Asegúrate de reemplazar UA-XXXXX-Y con tu propio ID de seguimiento.
Step 4: Add the tracking code to your website
Open your Next.js project:
Open your Next.js project in your code editor.
Add the tracking code in
_document.tsx:If you do not have a
pages/_document.tsxfile, create one.Add the following code to the
pages/_document.tsxfile: Replace UA-XXXXX-Y with your own tracking ID.
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html>
<Head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src={`https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y`}></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y');
`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Step 5: Verify that tracking is working
Publish your website:
Make sure your website is up and running. If you are working locally, make sure the Next.js development server is running.
Check in Google Analytics:
Go to the "Real Time" section in your Google Analytics dashboard.
Browse your website and verify that visits are being recorded in real time.
By following these steps, you should be able to create a property in Google Analytics and add tracking to your Next.js project.
Last updated