ReactJS: Cách thiết lập Adsense trên app React


Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

Trước tiên ta đặt script sau vào index.html:

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

Tiếp theo ta tạo một component tên GoogleAds như sau:

import {useEffect} from 'react'

export default function GoogleAds({slot}){
  useEffect(()=>{
    const pushAd = () => {
      try{
        const adsbygoogle = window.adsbygoogle
        console.log({adsbygoogle})
        adsbygoogle.push({})
      }catch(e){
        console.error(e)
      }
    }

    let interval = setInterval(()=>{
      if(window.adsbygoogle){
        pushAd()
        clearInterval(interval)
      }
    },300)
    return ()=>{
      clearInterval(interval)
    }
  },[])

  return (
    <ins className='adsbygoogle'
      style={{display:'block'}}
      data-ad-client= 'ad-client-của-bạn'
      data-ad-slot={slot}
      data-ad-format= 'auto'
      data-full-width-responsive="true"></ins>
  )
}

Cuối cùng ta import component GoogleAds ở trên vào componnt mong muốn và đặt nó vào nơi mong muốn như sau:

<GoogleAds slot="slot-tương-ứng" />

» Tiếp: Cách cấu hình thẻ meta và title động trong React với Helmet và với server Node.js
« Trước: Cách triển khai ứng dụng React với Nginx trên Ubuntu
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!