كيفية إضافة إعلانات جوجل أدسنس في React - Gatsby؟

في البداية علينا أن نوضح بأن جوجل أدسنس لديها نوعين من الإعلانات 

1. Auto Ads حيث نترك جوجل هي من تحدد مكان وحجم الإعلانات
2. Ad units حيث نحن من نقوم بتحديد مكان وحجم وشكل الإعلان المناسب للموقع الخاص بنا 

ولإستخدام النوع الأول يمكنك بكل بساطة إستخدام plugin gatsby-plugin-google-adsense.
وذلك كالاتي

npm install --save gatsby-plugin-google-adsense

وفي الجزء الخاص ب plugins داخل ملف gatsby-config.js

plugins: [
    {
      resolve: `gatsby-plugin-google-adsense`,
      options: {
        publisherId: `ca-pub-number`
      },
    },
]

و لاتنسى أن تقوم بكتابة ال id الخاص بك في publisherId ويمكنك التحكم في الإعدادت الخاصة بالاعلانات من خلال حسابك على googleAdsense

في حالة أردت أن تقوم بإستخدام react-adsense وذلك لكي تستخدم Ad units في أماكن محدده بدلا من أن تدع الأمر لجوجل لتحدد موضع الإعلان 
يمكنك بكل بساطة تطبيق الخطوة السابقه بالإضافة إلى التالي 

npm install --save react-adsense

ومن ثم يمكنك إستخدام react-adsense بطريقة إعتيادية كالتالي على سبيل المثال

import React from 'react';
import AdSense from 'react-adsense';

// ads with no set-up
<AdSense.Google
  client='ca-pub-number'
  slot='slot-number'
/>

ولكن لا تنسى هنا أن ترفق كلا من ال publisherId و slot-number لكل وحدة إعلانيه 

بدمجنا للخطوتين معا قد حققنا وضع السكريبت الخاص بجوجل adsense في الهيد وبالتالي تفعيل ال auto ads وبالخطوة التاليه تمكنا من إستخدام ad units وبحسب جوجل ادسنس في حال تم تفعيل النوعين سوف يتم إعطاء الأولويه ل "ad units"