YoungbinLab Blog


GastbyJS 블로그에 Google Adsense 와 Analytics 달기

2019. 08. 31

몇달 전에 블로그를 Jekyll 에서 GatsbyJS 로 옮겼는데, 대충 옮겨놓기만 하고 기존 Jekyll 블로그에 달아뒀던 Google Adsense, Google Analytics 를 다는걸 깜빡했다. 그래서 최근에야 다시 달았다. GatsbyJS 로 만든 블로그는 아무래도 React 기반 PWA 형태 블로그라 Jekyll 하고는 조금 달라서 간단히 정리를 해보려 한다.

Google Analytics 달기

이건 별로 어렵지 않다. GatsbyJS 용 플러그인을 쓰면 된다. gastby-config.jsplugins 쪽에 설정을 추가하면 된다. trackingId 에 Google Analytics 에서 발급한 추적 ID 를 넣으면 된다. 이렇게 넣고 빌드해서 올리면 된다.

module.exports = {
  siteMetadata: {
      ...
  },
  plugins: [
    ...
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `UA-XXXXXXXX-X`, // 이 부분에 Google Analytics 추적ID 를 넣는다.
      },
    },
  ]
}

Google Adsense 달기

이건 GatsbyJS 용 플러그인이 따로 있지는 않은 것 같아, 간단히 React 컴포넌트를 만들어나 넣었다. 먼저 gastby-config.jssiteMetadata 부분에 adsense 속성을 추가한다. 이걸 컴포넌트에서 정적 쿼리로 불러와서 사용하기 위함이다. Adsense 관리 사이트에서 코드 생성기에 들어가면 나오는 코드에서, data-ad-client, data-ad-slot 부분 값을 아래와 같이 넣어준다.

module.exports = {
  siteMetadata: {
    ...
    adsense: {
      adClient: "ca-pub-XXXXXXXXXXXXXXXX",
      adSlot: "XXXXXXXXXX"
    },
  },
  ...
}

그리고 아래와 같이 컴포넌트를 하나 만들어 준다. src/components/ 경로에 생성하면 된다. 필자의 경우 파일명을 adsense.js로 했다. 여기서 앞서 gatsby-config.js 에서 설정한 값을 useStaticQuery() 를 이용해 가져온다. 참고로 아래 코드는 배너형 광고 컴포넌트다.

import React, { useEffect } from "react"
import { useStaticQuery, graphql } from "gatsby"

function Adsense() {
    const { site } = useStaticQuery(
        graphql`
          query {
            site {
              siteMetadata {
                adsense {
                    adClient
                    adSlot
                }
              }
            }
          }
        `
      )
    
      useEffect(()=>{
        (window.adsbygoogle = window.adsbygoogle || []).push({});   
      })
        return(
            <div style={{padding: 8}}>
                <ins class="adsbygoogle"
                    style={{display: "block"}}
                    data-ad-client={site.siteMetadata.adsense.adClient}
                    data-ad-slot={site.siteMetadata.adsense.adSlot}
                    data-ad-format="auto"
                    data-full-width-responsive="true"></ins>
            </div>
        )
    }
    export default Adsense

하나 빠진것이 있는데, Adsense 스크립트를 불러오기 위한 구문이다. 사이트 전역으로 로드해야 제대로 작성해서, 위에서 만든 Adsense 컴포넌트에 넣는 대신, html.js 에 넣어준다. 보통은 기본 html.js 를 사용하고, 수정해 쓸 일이 잘 없어, 프로젝트 폴더에 없다. 수정해다 쓰려면, 빌드해서 생긴 캐시에 있는 것을 가져다 수정하면 된다.

cp .cache/default-html.js src/html.js

아래와 같이 <body> 태그 닫히기 전에 구문을 넣어주면 된다.

import React from "react"
import PropTypes from "prop-types"

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        ...
      </head>
      <body {...props.bodyAttributes}>
        ...
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      </body>
    </html>
  )
}
...

이제 Adsense 컴포넌트를 블로그 포스트 탬플릿의 원하는 위치에 넣어준다.

import React from "react"
import { Link, graphql } from "gatsby"
...
import Adsense from "../components/adsense"

class BlogPostTemplate extends React.Component {
  render() {
      ...

    return (
        <div>
        ...
        <Adsense/>
        </div
    )
  }
  ...
}

그리고 빌드해서 올리면 된다. 결과는 아래 사진과 같다.

adsense

참고 문서

gatsbyjs
javascript
google
adsense
analytics

Go 1.13 Release Party 참석 후기

3년 묶은 Node.js 기반 백엔드를 Golang 으로 옮기다.