本サイトはプロモーションが含まれています

Gatsby製のブログでGoogle Adsense対策をする(お問い合わせフォーム・プライバシーポリシー)

導入

ブログに広告をつけるためには、Google Adsense の審査に合格する必要があります。
この審査に合格するためには、お問い合わせフォームとプライバシーポリシーページが必要と言われています。
今回は Gatsby.js で作ったブログに、お問い合わせフォームとプライバシーポリシーページを追加する方法を紹介します。


Gatsby 製ブログの SEO 対策は前回の記事で紹介しているので、気になる方がいたら見ていただけると嬉しいです!



プライバシーポリシーページの作成

まずは、プライバシーポリシーページを追加します。
Gatsby.js では、src/pages/配下にファイルを追加することで簡単にページが追加できます。
ここに必要な事項を入力して完成したページがこちらです。
プライバシーポリシー


文面は様々なサイトを参考に文章を作りました。
新しく作った src/pages/privacy-policy.js の中身はこちらです。

import * as React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Seo from "../components/seo"
const PrivacyPolicy = ({ data, location }) => {
const siteTitle = data.site.siteMetadata?.title || `Title`
return (
<Layout location={location} title={siteTitle}>
<Seo title="プライバシーポリシー" />
<h1>プライバシーポリシー</h1>
<small>公開日: 2022年2月13日</small>
<br />
<small>最終改定日: 2022年2月13日</small>
<p>
本プライバシーポリシーは、{siteTitle}
(以下、当ブログと言います)の各種サービスにおけるお客様の個人情報の取り扱いの際に順守する方針を記したものです。
</p>
<h2>個人情報の利用目的について</h2>
<p>
当ブログでは、お問い合わせなどの際に、お名前やメールアドレスなどの個人情報を入力していただく場合がございます。
</p>
<p>
取得した個人情報はお問い合わせなどの対応のみに用いるものとし、それ以外の目的には利用いたしません。
</p>
<h2>個人情報の第三者への開示について</h2>
<p>
当ブログで取得した個人情報は適切に管理し、以下の場合を除いて第三者に開示することはございません。
</p>
<ul>
<li>ご本人様より同意が得られた場合</li>
<li>法令により開示が求められた場合</li>
</ul>
<h2>広告について</h2>
<p>
当ブログでは、第三者配信の広告サービス(Googleアドセンス、A8.net、Amazonアソシエイト)を利用しており、ブログ内にこれらの広告が表示されることがあります。
</p>
<p>
このようなサービスではお客様に適切な商品やサービスの広告を表示するため、Cookieを使用しております。
</p>
<p>
Cookieを使用することで当ブログはお客様のアクセス履歴に基づいて広告を配信できるようになりますが、これはお客様個人を特定できるものではありません。
</p>
<p>
また、Cookieの使用を望まれない場合はいつでもこの設定を無効にすることができます。
</p>
<p>
Cookieを無効にする方法やGoogleアドセンスに関する詳細は「
<a
href="https://policies.google.com/technologies/ads?gl=jp"
target="_blank"
rel="noopener noreferrer"
>
広告 – ポリシーと規約 – Google
</a>
」をご確認ください。
</p>
<br />
<p>
Amazonのアソシエイトとして、{siteTitle}
は適格販売により収入を得ています。
</p>
<h2>アクセス解析ツールについて</h2>
<p>
当ブログでは、アクセス解析ツールとして「Google
アナリティクス」を使用しています。
</p>
<p>
このツールではトラフィックデータの収集のため、Cookieを使用しております。
</p>
<p>
トラフィックデータは匿名で収集されており、個人を特定するものではありません。
</p>
<p>
また、Cookieの使用を望まれない場合はいつでもこの設定を無効にすることができます。
</p>
<p>
「Googleアナリティクス」でデータが収集、処理される仕組みについての詳細は、
<a
href="https://www.google.com/intl/ja/policies/privacy/partners/"
target="_blank"
rel="noopener noreferrer"
>
こちらのページ
</a>
をご確認ください。
</p>
<h2>免責事項</h2>
<p>
当ブログの掲載内容によって生じた損害に対する一切の責任を負いません。
</p>
<p>
当ブログはできる限り正確な情報を提供できるよう努めておりますが、正確性や安全性を保証するものではありません。
</p>
<p>
また、リンク先の他のサイトで提供されている情報、サービスにおいても責任を負いかねますのでその点をご了承の上、ご利用ください。
</p>
<h2>著作権</h2>
<p>
当ブログに掲載されている文章・画像などのコンテンツの著作権は、運営者に属しています。
</p>
<p>
法的に認められている引用の範囲を超えて、無断転載することを禁じます。
</p>
<p>
また、当ブログでは細心の注意を払っておりますが、著作権、肖像権を侵害している場合は、お問い合わせフォームよりご連絡ください。
</p>
<p>速やかに対処させていただきます。</p>
<h2>リンクについて</h2>
<p>
当ブログは基本的にリンクフリーですので、リンクを行う際の許可や連絡は不要です。
</p>
<p>
ただし、インラインフレームの使用や画像、動画への直リンクはお控えください。
</p>
<h2>プライバシーポリシーの変更</h2>
<p>
当ブログは、個人情報に関する日本国の法令を遵守し、適宜本プライバシーポリシーの見直しに努めます。
</p>
<p>
プライバシーポリシーが修正された場合、速やかに本ページにて公開されます。
</p>
<h2>その他</h2>
<p>
コンテンツの内容に誤りがあった場合は、お問い合わせフォームよりご連絡いただけますと幸いです。
</p>
<p>できる限り対応させていただきます。</p>
</Layout>
)
}
export default PrivacyPolicy
export const pageQuery = graphql`
query {
site {
siteMetadata {
title
}
}
}
`

お問い合わせフォームの設置

以前の記事で紹介したように、Netlify の機能を使ってお問い合わせフォームを作成します。
Netlify では<form>タグにdata-netlify="true"と加えることで簡単にフォームが作成できます。
また、セキュリティ対策として以下の 2 つの対策をします。

  • ハニーポットフィールドの追加
  • reCAPTCHA v2 の追加

これらの対策は Netlify で簡単に実装できます。

ハニーポットフィールドの追加

ボットしか入力しないフィールドを追加し、CSS や js で非表示にします。
これで人間の目には見えないので、このフィールドに入力するとボットと判定できます。
公式サイトでは、以下のようにbot-fieldという名前の<input>タグを追加し、form の属性にnetlify-honeypot="bot-field"として追加することであとは netlify がボットを拒否してくれます。

<form
name="contact"
method="POST"
netlify-honeypot="bot-field"
data-netlify="true"
>
{/*静的サイトジェネレータの場合必要*/}
<input type="hidden" name="form-name" value="contact" />
<p className="hidden">
<label>
Don’t fill this out if you’re human: <input name="bot-field" />
</label>
</p>
<p>
<label>
Email: <input type="text" name="email" />
</label>
</p>
<p>
<label>
Message: <textarea name="message"></textarea>
</label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>

実際の実装はセキュリティ上の観点から公開するのはやめておきます。

reCAPTCHA v2 の追加

netlify では reCAPTCHA v2 も簡単に実装できます。
具体的には次の 2 ステップで完了です。

  1. <form>の属性にdata-netlify-recaptcha="true"を追加する
  2. CAPTCHA を表示したい場所に<div data-netlify-recaptcha="true"></div>を追加する

これだけで完了です。
※2022 年 2 月 20 日修正
Gatsby の場合、これだけでは Netlify で動作しないため、このページにある手順を追加で行ってください。


これで、CSS を整えた結果がこちらです。
お問い合わせフォーム



終わりに

今回はプライバシーポリシーとお問い合わせフォームを実装しました。
次回は Gatsby.js で作ったブログを Netlify にデプロイする方法を紹介する予定です。