نحوه اضافه کردن Google Ad Sense Next.js 13 با روتر برنامه، تبلیغات خودکار و تبلیغات واحد
سلام به همه پس امروز می خواهم در مورد نحوه اجرای حس تبلیغات گوگل، واحدهای تبلیغات حس تبلیغات گوگل صحبت کنم.
مشکل چیه
ما می توانیم کد حس تبلیغات را به آن اضافه کنیم head برچسب روتر Nextjs13 App اما مشکل برای آن وجود دارد واحدهای تبلیغات حس تبلیغات گوگل.
در جدید، ما باید مؤلفه تبلیغ خود را به عنوان مشتری اختصاص دهیم و کد واحد تبلیغات Ad Sense در تغییرات صفحه بازخوانی نمی شود.
راه حل 1 برای تبلیغات خودکار (این را برای واحدهای تبلیغاتی نیز دنبال کنید)
ابتدا RootLayout را انتخاب کنید که به شکل زیر است
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='en'>
<head>
</head>
<body className='bg-gray-100 font-sans'>
{children}
</body>
</html>
);
}
و شما کد Google Adsense را دریافت کردید مانند زیر
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin/>
حالا کد را به جزء NextJs Script تبدیل کنید
<Script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
crossOrigin="anonymous"
strategy='lazyOnload'
/>
فقط این را اضافه کنید head برچسب و به یاد داشته باشید که استراتژی باید باشد lazyOnload که شانس بیشتری برای اجرای خوب کد و همچنین crossOrigin به عنوان ناشناس دارند.
راه حل 2: کدهای واحد تبلیغات حس تبلیغات گوگل در روتر برنامه
اکنون شما کد را از کد Google Adsense مانند این زیر دریافت کردید
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- Homepage Leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(window.adsbygoogle = window.adsbygoogle || []).push({});
</script>
حالا اینجا قسمت اول اینجا اولین script قبلاً در تگ head ارائه شده است که ما در راه حل تبلیغات خودکار اضافه کردیم، بنابراین ما فقط با کد باقیمانده می رویم.
پس از تبدیل آن به نسخه NextJs مانند زیر به نظر می رسد
<ins
className="adsbygoogle"
style={{ display: "inline-block", width: 728, height: 90 }}
data-ad-client="ca-pub-1234567890123456"
data-ad-slot={1234567890}
/>
<script dangerouslySetInnerHTML={{ __html: `(window.adsbygoogle = window.adsbygoogle || []).push({});`}} />
اکنون می‌توانیم این کد را اضافه کنیم، اما مشکلی دارد که باید صفحه را تازه‌سازی کنیم و سپس آگهی بارگیری می‌شود و همچنین به دلیل ناوبری صاف NextJS Built In، دوباره در صفحات دیگر بارگیری نمی‌شود.
برای حل این مشکل که باید کد خود را که پیچیده به نظر می رسد اما کاملاً کار می کند، به روز کنیم.
ابتدا جدید ایجاد کنید AdCode.jsx فایل باید باشد jsx نه ts یا tsx چون خطای خودش را برای تایپ اسکریپت دارد، این کار را انجام دهید.
ابتدا کد را در کامپوننت کلاس اضافه کنید (سعی نکنید این را در کامپوننت تابع با useEffect() اضافه کنید فقط تا حدی کار می کند) مانند زیر این فایل کامل است. ما باید مشتری کامپوننت خود را برای روتر کلاینت مورد نیاز خود بسازیم.
class AdCodeWithoutRouter extends React.Component {
renderAds() {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
componentDidMount() {
this.renderAds();
}
componentDidUpdate(prevProps) {
if (this.props.router.asPath !== prevProps.router.asPath) {
this.renderAds();
}
}
render() {
return (
<div className="container mx-auto text-center" aria-hidden={true}>
<ins
className="adsbygoogle"
style={{ display: 'block', width: '100%' }}
data-ad-client="ca-pub-1234567890"
data-ad-slot="123456"
data-ad-format="auto"
data-full-width-responsive="true"
></ins>
</div>
);
}
}
اکنون ما همچنین به برخی از اجزای وارداتی و عملکردی پس از اصلاح فایل کامل نیاز داریم که مانند زیر باشد. userRouter از «next/navigation» وارد شده است مطابق در nextjs13.
`jsx
‘use client’;
import React from ‘react’;
import { useRouter } from ‘next/navigation’;
class AdCodeWithoutRouter extends React.Component {
renderAds() {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
componentDidMount() {
this.renderAds();
}
componentDidUpdate(prevProps) {
if (this.props.router.asPath !== prevProps.router.asPath) {
this.renderAds();
}
}
render() {
return (
className=”adsbygoogle”
style={{ display: ‘block’, width: ‘100%’ }}
data-ad-client=”ca-pub-1234567890″
data-ad-slot=”123456″
data-ad-format=”auto”
data-full-width-responsive=”true”
>
);
}
}
const AdCode= () => {
const router = useRouter();
return ;
};
export default AdCode;
{% raw %}
here what is happening that when `componentDidMount` is ran when component is loaded for first time and it is rerendered on navigating to new pages because of `componentDidUpdate` method of Class Component.
Now I Know Many of you will try to make this in `useEffect` and Pure Single Functional Component. I tried and Failed to get what i actually wanted.
But If anybody Succeed Please Inform in the Comments maybe that helps this code to less complex.
Now you can use the Ad-code Component Wherever you want.
Bye.
