Google Adsense và GatsbyJs – Phan Nhật Chánh

Thời gian gần đây tôi có giới thiệu trang web của tôi cho Google Adsense và đã được họ chấp nhận cho đặt quảng cáo trên trang web của tôi. Mục đích của việc chèn quản cáo Adsense của tôi là để trang trí cho đẹp mà thôi chứ thu nhập thì như bạn biết rồi đấy chỉ 3 cọc 3 đồng. Nếu bạn sử dụng các nền tảng như Wordpress, Blogger,... thì việc đặt mã GA rất dễ dàng thông qua các Plugin. Nếu bạn cũng đang sử dụng Gatsby để làm trang web như tôi thì việc chèn mã quảng cáo vào trang đòi hỏi phải biết chúc kiến thức về React. Trong bày viết này tôi sẽ giới thiệu cách chèn các đoạn mã quảng cáo Google Adsense vào trang Gatsby cũng như chèn vào bất kỳ vị trí nào mà bạn muốn Adsense hiển thị. Hãy xem và áp dụng theo các cách dưới đây để thực hiện nhằm tăng thêm tí thu nhập cho trang web của bạn nhé!

Để chèn được quảng cáo Google Adsense vào trang web của bạn thì bạn phải chèn một đoạn <script> vào trong thẻ <head>...</head><head>...</head> trên trang web của bạn. Ở đây tôi sẽ sử dụng gatsby-ssr.js tệp này cho phép bạn thay đổi nội dung của các file HTML tĩnh vì chúng đang được kết xuất phía Máy chủ (SSR) bởi Gatsby và Node.js

Hãy tạo một tệp có tên gatsby-ssr.js trong thư mục gốc của trang web của bạn (nếu nó chưa có). Tiếp theo, bạn sẽ chèn đoạn code dưới đây vào đó.

gatsby-ssr.js

const React = require("react")
 
const HeadComponents = [
  <script
    key='google_ads_js'
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" //Adsense của bạn
    async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  />,
]

gatsby-ssr.js

const React = require("react")
 
const HeadComponents = [
  <script
    key='google_ads_js'
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" //Adsense của bạn
    async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  />,
]

Như vậy ở phần <head>...</head><head>...</head> trong cấu trúc HTML của tất cả trang web của bạn đã được chèn <script> của Google Adsense. Để kiểm tra, hãy chạy gatsby buildgatsby build và nếu bạn thấy thẻ <script> được chèn ở trên được chèn trong source của trang HTML thì là OK.

Tiếp theo tôi sẽ tạo một components cho Google Adsense như sau:

src/components/googleAdsense/index.jsx

import React, { useEffect } from 'react';
 
export const Adsense = ( props ) => {
  const { currentPath } = props
  
  useEffect(() => {
    if (window) {
    window.adsbygoogle = window.adsbygoogle || []
    window.adsbygoogle.push({})
    }
  }, [currentPath]);
 
  return (
    <ins 
      className="adsbygoogle"
      style={{display:'block'}}
      data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" //Adsense của bạn
      data-ad-slot="123456789" //Vị trí quảng cáo
      data-ad-format='auto' 
      data-full-width-responsive='true' 
    />
  )
}

src/components/googleAdsense/index.jsx

import React, { useEffect } from 'react';
 
export const Adsense = ( props ) => {
  const { currentPath } = props
  
  useEffect(() => {
    if (window) {
    window.adsbygoogle = window.adsbygoogle || []
    window.adsbygoogle.push({})
    }
  }, [currentPath]);
 
  return (
    <ins 
      className="adsbygoogle"
      style={{display:'block'}}
      data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" //Adsense của bạn
      data-ad-slot="123456789" //Vị trí quảng cáo
      data-ad-format='auto' 
      data-full-width-responsive='true' 
    />
  )
}

Cuối cùng bạn chị việc gọi components vừa tạo ở trên vào trang mà bạn muốn hiển thị quảng cáo. Ví dụ ở đây ta sẽ đặt nó vào trang bài viết thì bạn có thể thực hiện tương tự như sau:

src/templates/blogTemplate.jsx

import React from 'react';
import { graphql } from 'gatsby';
import { Adsense } from '../components/googleAdsense';
 
export default Template = ({data}) => {
  const { markdownRemark } = data
  const { frontmatter, html } = markdownRemark
  return (
    <div className="blog-post-container">
 
      <div className="blog-post">
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <Adsense /> {/* Vị trí hiển thị Adsense */}
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
        <Adsense /> {/* Vị trí hiển thị Adsense */}
      </div>
	  
    </div>
  )
}
export const pageQuery = graphql`
...
...
...

src/templates/blogTemplate.jsx

import React from 'react';
import { graphql } from 'gatsby';
import { Adsense } from '../components/googleAdsense';
 
export default Template = ({data}) => {
  const { markdownRemark } = data
  const { frontmatter, html } = markdownRemark
  return (
    <div className="blog-post-container">
 
      <div className="blog-post">
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <Adsense /> {/* Vị trí hiển thị Adsense */}
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
        <Adsense /> {/* Vị trí hiển thị Adsense */}
      </div>
	  
    </div>
  )
}
export const pageQuery = graphql`
...
...
...

Bạn sẽ không thấy quảng cáo xuất hiện trong môi trường phát triển. Để thấy được quảng cáo hiển thị trên trang web của bạn thì bạn cần phải deploy ứng dụng của bạn lên Github, Netlify, Cloudflare Pages,...

Nếu bạn sử dụng markdown để viết bài cho trang web của bạn thì tiếp theo dưới đây tôi sẽ hướng bạn cách đặt quảng cáo Google Adsene vào bất kỳ vị trí nào trong tệp markdown. Để theo dõi tiếp thì bạn cũng cần phải thực hiện xong cách chèn Adsense phía trên rồi hãy theo dõi tiếp nhé!

Bằng cách sử dụng rehype-react hãy chạy lệnh dưới đây để cài đặt:

Terminal

npm install rehype-react

Terminal

npm install rehype-react

Việc còn lại là bạn chỉ việc chỉnh sử lại file blogTemplate.jsx (trang hiển thị bài viết) tương tự như dưới đây:

src/templates/blogTemplate.jsx

import rehypeReact from 'rehype-react'
import { AdSense } from '../components/googleAdsense';
 
const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    'adsense': AdSense,
  },
}).Compiler;
 
export const pageQuery = graphql'
  query($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
      htmlAst
    }
  }
'

src/templates/blogTemplate.jsx

import rehypeReact from 'rehype-react'
import { AdSense } from '../components/googleAdsense';
 
const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    'adsense': AdSense,
  },
}).Compiler;
 
export const pageQuery = graphql'
  query($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
      htmlAst
    }
  }
'

Tiếp tục, trong blogTemplate.jsx tìm dangerouslySetInnerHTML={{ __html: html }} là phần mà nội dung Markdown được chèn hãy xóa nó đi và thay thế bằng htmlAst tương tự như sau:

src/templates/blogTemplate.jsx

- <div className='blog-post-content' dangerouslySetInnerHTML={{ __html: html }} />
+ <div>{renderAst(post.htmlAst)}</div>

src/templates/blogTemplate.jsx

- <div className='blog-post-content' dangerouslySetInnerHTML={{ __html: html }} />
+ <div>{renderAst(post.htmlAst)}</div>

Việc cuối cùng chỉ cần hiển thị Adsense bằng cách thêm <adsense></adsense> vào vị trí bất kỳ trong tệp markdown của bạn.

markdown.md

## Heading 2
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, id consectetur! Eius, quod dignissimos?
 
<adsense></adsense>  <!-- hiển thị Adsense ở đây -->
 
## Heading 2
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, id consectetur! Eius, quod dignissimos?

markdown.md

## Heading 2
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, id consectetur! Eius, quod dignissimos?
 
<adsense></adsense>  <!-- hiển thị Adsense ở đây -->
 
## Heading 2
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, id consectetur! Eius, quod dignissimos?

Nếu bạn sử dụng thẻ đóng <adsense /> có thể sẻ không hoạt động bình thường.

Đó là tất cả những gì mà bạn cần làm để tùy chỉnh Google Adsense vào trang Gatsby của bạn. Hy vọng nội dung này sẽ giúp ích được bạn. Chúc thành công!

•••