React Adsenseライブラリの概要(GatsbyJsにadsenseの広告付ける方法)

このブログは、GatsbyJSという静的サイトジェネレータ(Static Site Generator)で作られた。 GatsbyJSはReactに基づいて実装されたフレームワークです。

GatsbyJSはReactあるため、JavaScriptとnodejsを使用します。 Adsenseからの広告を作成すると、htmlコードを提供していますよ。 GatsbyJSですべてのページにこのhtmlコードを貼り付けよう実装する必要があります。

react-adsenseは、このような作業を簡単にしてくれるライブラリです。 提供されるクラスのclient、slot、styleなどを引数として渡さだけhtmlコードを生成してくれます。

Adsenseの広告を記入

まず\ <head>中下記のスクリプトコードを入れてべきです。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

そして広告を入れるのJavaScriptファイルには、次のように実装すれば、Adsense htmlコードが自動的に生成されます。

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

<AdSense.Google
  style={{ display: 'block' }}
  client='ca-pub-7292810486004926'
  slot='7806394673'
  format='auto'
  responsive='true'
/>

上記の例で使用されたプロパティに加えて、以下のようなプロパティがあります。

次のプロパティは必須で提供する必要があります。

  • client
  • slot

以下のプロパティは、必要に応じて提供します。

  • className
  • style
  • layout
  • layoutKey
  • format
  • responsive

たとえば、Adsenseからの"一致するコンテンツ"で新規広告を作成しました。 広告を作成すると、以下のようなhtmlコードを提供します。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5054040000000000"
     data-ad-slot="3560900000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

上記のコードでは、次の項目だけプロパティに渡します。 次のコードに対応するreact-adsenseのプロパティがどれなのか名前を見れば分かることができます。

  • style
  • data-ad-format
  • data-ad-client
  • data-ad-slot

結論としては、上記のhtmlコードをjavascriptで入力するには、以下のように実装するされます。

<AdSense.Google
  style={{ display: 'block' }}
  format='autorelaxed'
  client="ca-pub-5054040000000000"
  slot="3560900000"
/>

react-adsenseコード

次のコードは、react-adsenseの一部のコードです。引数を渡すと、Googleで提供する形態のhtmlコードを生成します。 プロパティと一致するhtmlコードは何なのかを理解することができます。

export default class Google extends React.Component {
  componentDidMount() {
    if(window) (window.adsbygoogle = window.adsbygoogle || []).push({});
  };

  render() {
    return (
      <ins className={`${this.props.className} adsbygoogle`}
        style={this.props.style}
        data-ad-client={this.props.client}
        data-ad-slot={this.props.slot}
        data-ad-layout={this.props.layout}
        data-ad-format={this.props.format}
        data-full-width-responsive={this.props.responsive}></ins>
    );
  }
};

Google.propTypes = {
  className: PropTypes.string,
  style: PropTypes.object, // eslint-disable-line
  client: PropTypes.string.isRequired,
  slot: PropTypes.string.isRequired,
  layout: PropTypes.string,
  format: PropTypes.string,
  responsive: PropTypes.string
};

Google.defaultProps = {
  className: '',
  style: {display: 'block'},
  format: 'auto',
  layout: '',
  responsive: 'false'
};

参考

codechachaCopyright ©2019 codechacha