Добавление Google Adsense на сайт Gatsby

Эта статья была первоначально опубликована (и является более актуальной) на сайте https://robertmarshall.dev/blog/adding-google-adsense-to-gatsby-website/.

Появилось несколько плагинов, которые утверждают, что могут добавить Google AdSense на сайт Gatsby. Однако это лишь часть пути.

К сожалению, как бы Google не утверждал, что AdSense является легковесным и что они откладывают загрузку до окончания загрузки страницы — это неправда. Мне нужно было решение, которое не повлияло бы на скорость страницы, но при этом загружало бы рекламу тогда, когда она нужна. Я решил загружать объявления Google Ads только при прокрутке.

Отказ от ответственности: Это решение немного ухудшает качество объявлений Google Ads над сгибом. Они будут загружаться, когда пользователь прокручивает страницу. Мне лично не нравится отображение сторонних объявлений над сгибом, так как это сильно влияет на скорость страницы.

Как добавить Google AdSense на сайт Gatsby?

Чтобы добавить Google AdSense на наш сайт Gatsby, нам нужно сделать две вещи

1. Добавить JavaScript-код Google AdSense на все страницы сайта Gatsby
2. Создать компонент, который будет создавать место для вставки рекламы Google

Добавить код Google AdSense JavaScript в Gatsby

Я создал глобальный компонент Layout, который охватывает весь мой сайт. Однако если этот компонент используется на каждой странице вашего сайта Gatsby, то не имеет значения, где он размещен. При желании вы можете даже развернуть конкретный фрагмент кода и внедрить его таким образом.

Этот код работает, ожидая, пока страница отобразится, затем ожидая, пока пользователь прокрутит страницу, прежде чем вводить код Google AdSense. По сути, это ленивая загрузка скрипта Google AdSense без каких-либо накладных расходов.

Код для добавления скрипта Google AdSense выглядит следующим образом:

import React, { useRef } from 'react'
const Layout = () => {
    const scrolled = useRef(null)

    useEffect(() => {
        const headID = document.getElementsByTagName('head')[0]

        document.addEventListener('scroll', function (e) {
            if (!scrolled.current) {
                scrolled.current = true

                // Google Ads
                const gaScript = document.createElement('script')
                gaScript.async = true
                gaScript.crossorigin = 'anonymous'
                gaScript['data-ad-client'] = 'YOUR-CODE-HERE'
                gaScript.src =
                    'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
                gaScript.type = 'text/javascript'
                headID.appendChild(gaScript)
            }
        })
    }, [])
}

export default Layout

Не забудьте заменить YOUR-CODE-HERE на ваш код Google AdSense.

Этот код добавил Google AdSense на ваш сайт, но ему еще нужно знать, где показывать рекламу!

Создание компонента рекламного блока Google AdSense

Создание компонента для размещения фактической рекламы Google — довольно простой процесс. Я создал компонент под названием AdBlock и использовал пакет react-adsense.

Сначала установите react-adsense, используя либо:

• npm install react-adsense
• yarn add react-adsense.

После установки его можно внедрить в компонент следующим образом:

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

const AdBlock = () => (
    <AdSense.Google
        client="YOUR-CODE-HERE"
        slot="YOUR-SLOT-HERE"
        style={{ display: 'block' }}
        layout="in-article"
        format="fluid"
    />
)

export default AdBlock

Как только вы обновите YOUR-CODE-HERE и YOUR-SLOT-HERE до вашей конкретной информации, этот компонент можно использовать на вашем сайте Gatsby.

Помните, что теперь, когда Google AdSense добавлен на ваш сайт Gatsby, вы также обязаны включить баннер Cookie в соответствии с законодательством ЕС.