개츠비 웹사이트에 구글 애드센스 추가하기

이 문서는 https://robertmarshall.dev/blog/adding-google-adsense-to-gatsby-website/에 처음 게시되었으며 최신 정보입니다.


Gatsby 사이트에 Google 애드센스를 추가할 수 있다는 팝업이 표시되는 여러 플러그인이 있습니다. 그러나 이것들은 당신이 가는 길의 일부일 뿐입니다.

불행하게도 Google은 애드센스가 가볍고 페이지가 로드될 때까지 로드를 지연한다고 말하지만 이것은 사실이 아닙니다. 페이지 속도에 영향을 주지 않으면서 필요할 때 광고를 로드하는 솔루션이 필요했습니다. 스크롤할 때만 Google Ads를 로드하기로 결정했습니다.

면책조항: 이 솔루션은 스크롤 없이 볼 수 있는 부분의 Google Ads를 약간 손상시킵니다. 사용자가 페이지를 스크롤하면 로드됩니다. 저는 개인적으로 스크롤 없이 볼 수 있는 부분에 타사 광고를 표시하는 것을 좋아하지 않습니다. 이는 페이지 속도에 막대한 영향을 미치기 때문입니다.

Gatsby 웹사이트에 Google 애드센스를 추가하는 방법은 무엇입니까?

Gatsby 웹사이트에 Google 애드센스를 추가하려면 두 가지 작업을 수행해야 합니다.

Gatsby 웹사이트의 모든 페이지에 Google 애드센스 JavaScript 코드를 추가합니다

.

Google 광고가 삽입될 위치를 생성할 구성 요소를 생성합니다

.

Gatsby에 Google 애드센스 자바스크립트 코드 추가

전체 웹 사이트를 래핑하는 글로벌Layout 구성 요소를 만들었습니다. 그러나 이 구성 요소가 Gatsby 사이트의 모든 페이지에서 사용되는 한 그것이 배치되는 위치는 중요하지 않습니다. 원하는 경우 특정 코드 조각을 전환하고 그런 식으로 삽입할 수도 있습니다.

이 코드는 페이지가 렌더링될 때까지 기다린 다음 Google 애드센스 코드를 삽입하기 전에 사용자가 스크롤할 때까지 기다리는 방식으로 작동합니다. 본질적으로 오버헤드 없이 Google 애드센스 스크립트를 지연 로드합니다.

Google 애드센스 스크립트를 추가하는 코드는 다음과 같습니다.

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

Google 애드센스 코드로 교체YOUR-CODE-HERE해야 합니다.

이 코드는 귀하의 사이트에 Google 애드센스를 추가했지만 여전히 광고를 표시할 위치를 알아야 합니다.

Google 애드센스 광고 차단 구성요소 만들기

실제 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 웹 사이트에서 사용할 수 있습니다.

Gatsby 웹사이트에 Google 애드센스가 추가되었음을 기억하세요. EU 법률에 따라 쿠키 배너도 포함해야 합니다.