gan0803.dev

A blog created with GatsbyJS has passed the Google AdSense review and will incorporate ads.

公開日: 2020年06月15日最終更新日: 2022年01月28日

I applied to Google AdSense for this blog as I had over 10 posts. The result is that I passed the review successfully.
To sign up, just go to AdSense website and register the URL, paste the code on the top page of my blog and wait.

Place the code in the head tag and wait for the review results.

In the case of GatsbyJS, create src/html.js and add the following line to load adsbygoogle.js in the <head> tag. Copy the .cache/default-html.js and store it in src/html.js and add one line. 

<script data-ad-client="ca-pub-**********" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

The html.js looks like the following.

src/html.js

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

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <script data-ad-client="ca-pub-**********" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        {props.headComponents}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

By the way, I also tried gatsby-plugin-google-adsense, but it didn't seem to work.

Now the application is OK, but even after 10 days there was no reply.....
When I was worried, I found out that there is a thing called AdSense review status confirmation form. I sent my inquiry message from there, and it was approved the next day. I'm not sure if it was related to the inquiry or not.....

Incorporate ads into your blog

I'm going to add an ad to my blog now that I've successfully registered it.

At first I set up automatic ads, but they don't appear as I expected with GatsbyJS. Is this incompatible with the optimization process provided by GatsbyJS?
Even if they did appear, they were embedded in a position where I thought they would be placed right below the title and would interfere with the reader.
Therefore, I've decided to give up on automatic ads and embed them manually, and consider the type and placement of the ads so that they won't interfere with reading the blog.

There are several different types of AdSense ads, each with a different display method, unit price, and click-through rate. I won't go into details here because there are a number of websites that explain them in detail when you search for them.

After reviewing the different ad types, we decided to display the most common display ad types in a responsive way.
We avoided the anchor ads that are sandwiched in between page transitions or overlaid at the top of the screen, which users will always see, but which we felt would get in the way.

And as for placement, we made sure to only display them at the bottom of the blog post. I thought it would be good if you could catch a glimpse of it and push it after reading it.
Also, I didn't put any ads on the top page (the page to show the list of articles) because it wouldn't be accessed that much and it would get in the way of seeing the list of articles.

First, create a display ad unit in Google AdSense from the advertising > summary tab under the per ad unit tab. I chose Square as the shape and Responsive as the ad size. Now you can get the code for pasting the ad.

Create the components for the ad display. We'll build the same content as the ad unit code. Create the following parts for <ins> and window.adsbygoogle.push with the corresponding number of times.

src/gatsby-theme-blog/components/adsense.js

import React, { useEffect } from "react";
import { css } from "theme-ui"


const Ad = props => {
    const { currentPath } = props

    useEffect(() => {
        window.adsbygoogle = window.adsbygoogle || []
        window.adsbygoogle.push({})
    }, [currentPath])

    return (
        <div
            css={css({
                ml: 0,
                mr: 0,
        })}>
            <ins
                className="adsbygoogle"
                style={{ display: 'block' }}
                data-ad-client="ca-pub-*************"
                data-ad-slot="**********"
                data-ad-format="auto"
                data-full-width-responsive="true"
            />
        </div>
    )
}

export default Ad;

All you have to do is put the parts you made at the bottom of the Post. Here, we put <Styled.hr /> in between for the sake of appearance.

src/gatsby-theme-blog/components/post.js

...
const Post = ({
  data: {
    post,
    site: {
      siteMetadata: { title },
    },
  },
  location,
  previous,
  next,
}) => (
  <Layout location={location} title={title}>
    <SEO
      title={post.title}
      description={post.excerpt}
      imageSource={
        post.socialImage
          ? post.socialImage?.childImageSharp?.fluid.src
          : post.image?.childImageSharp?.fluid.src
      }
      keywords={post.keywords}
      imageAlt={post.imageAlt}
    />
    <main>
      <PostHero post={post} />
      <PostTitle>{post.title}</PostTitle>
      <PostDate>{post.date}</PostDate>
      <MDXRenderer>{post.body}</MDXRenderer>
    </main>
    <TagLabel tags={post.tags} />
    <Styled.hr />
    <AdSense currentPath={location} />
    <PostFooter {...{ previous, next }} />
  </Layout>
)

Now the ad will appear at the bottom of the article page. It should be below this.
However, there are some conditions, such as page loading speed, or the ads may not appear. Sometimes it comes up after reloading, I'm not sure.
And, if you are in a local preview or staging environment with a different URL, the ads won't show up. Is the only way to confirm this is to release it to the production environment?

Tags: GatsbyJS
©︎2021 gan0803.dev