In this blog post, we’ll walk you through the process of integrating Google AdSense with your Next.js 13 application and creating an ads.txt file to ensure proper ad revenue attribution. By following this step-by-step guide, you’ll have your Next.js application displaying Google AdSense ads in no time.
Table of Contents
- Step 1: Sign up for a Google AdSense account
- Step 2: Get your AdSense publisher ID
- Step 3: Create an AdSense component
- Step 4: Add the AdSense script to your _document.js file
- Step 5: Add the AdSense component to your pages
- Step 6: Create and deploy an ads.txt file
- Conclusion
Step 1: Sign up for a Google AdSense account
If you don’t have a Google AdSense account, sign up at https://www.google.com/adsense/start. Complete the registration process and wait for Google to approve your account. This may take a few days.
Step 2: Get your AdSense publisher ID
Once your account is approved, sign in to your AdSense account and find your publisher ID. It should look like this: ca-pub-XXXXXXXXXXXXXXXX. You’ll need this ID to display ads on your website.
Step 3: Create an AdSense component
In your Next.js project, create a new file named AdSense.js inside the components folder. Add the following code to the file:
import { useEffect } from "react";
const AdSense = ({ adSlot }) => {
useEffect(() => {
if (window) {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
}, []);
return (
<ins
className="adsbygoogle"
style={{ display: "block" }}
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" // Replace with your publisher ID
data-ad-slot={adSlot}
data-ad-format="auto"
data-full-width-responsive="true"
></ins>
);
};
export default AdSense;
Code language: JavaScript (javascript)Replace ca-pub-XXXXXXXXXXXXXXXX with your actual AdSense publisher ID.
Step 4: Add the AdSense script to your _document.js file
If you don’t have a _document.js file in your pages folder, create one. Add the AdSense script to the head section of your _document.js file:
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<script
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Code language: JavaScript (javascript)Replace ca-pub-XXXXXXXXXXXXXXXX with your actual AdSense publisher ID.
Step 5: Add the AdSense component to your pages
Now, you can use the AdSense component in your pages. First, import the component:
import AdSense from "../components/AdSense";
Code language: JavaScript (javascript)Then, use the component in your JSX code and provide an ad slot ID:
<AdSense adSlot="1234567890" />
Code language: HTML, XML (xml)Replace 1234567890 with your actual AdSense ad slot ID. You can create ad units in your AdSense account to get unique ad slot IDs.
Step 6: Create and deploy an ads.txt file
To ensure proper ad revenue attribution, Google AdSense requires you to place an ads.txt file at the root of your domain.
Creating the ads.txt file
In your Next.js project, create a new file named ads.txt inside the public folder. The public folder is used to serve static assets, and any file you place here will be available at the root of your domain.
Open the ads.txt file and add the following line:
google.com, pub-XXXXXXXXXXXXXXXX, DIRECT, f08c47fec0942fa0
Code language: CSS (css)Replace pub-XXXXXXXXXXXXXXXX with your actual AdSense publisher ID.
Deploying the ads.txt file
Commit the changes to your repository and deploy your Next.js application using your preferred deployment platform. Once your application is deployed, you can verify the ads.txt file by visiting https://your-domain.com/ads.txt. Replace your-domain.com with your actual domain name. The contents of the ads.txt file should be visible in the browser.
Now, Google AdSense will be able to find and validate the ads.txt file on your domain, ensuring proper ad revenue attribution.
Conclusion
In this tutorial, we’ve shown you how to integrate Google AdSense with your Next.js 13 application and create an ads.txt file for proper ad revenue attribution. By following these steps, you’ll be able to display ads on your website and ensure that your ad revenue is correctly attributed.
If you’re interested in exploring more Next.js projects, you might want to check out our ChatGPT API Tutorial. This step-by-step guide demonstrates how to build a simple chat application using Next.js and OpenAI’s ChatGPT API, allowing you to create a powerful and engaging conversational AI experience for your users.
Additionally, you may find the official Next.js documentation helpful for diving deeper into Next.js features and best practices to further enhance your web development skills.
Happy coding!
thank you stefan