Fri May 19 2023

A react component for diplaying ads from Adsense

In this guide we will create a react component for displaying ads from Adsense. If you have your website approved by Google Adsense team, you probably have gotten some code snippets that they ask you to include in your project. However, if you are not having static HTML pages, but are instead client side rendering your project, it might not seen that trivial to get it to work. But don't worry, we will cover the necessary steps in this guide.

Code provided by Google

The code you have gotten probably looks similar the code below. And they ask you to add it to all the HTML pages you want this specific ad.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-{PUB_ID}"
     crossorigin="anonymous"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-{PUB_ID}"
     data-ad-slot="{SLOT_ID}"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

First part in our index.html

The script at the top should be added to our index.html page.

<head>
  <script
    async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-{PUB_ID}"
    crossorigin="anonymous"
  ></script>
  <body>
    <div id="root" />
  </body>
</head>

The rest should be added dynamically with our new component.

Create our component

Let's create our component. Create a new file called GoogleAd.tsx (or .jsx) and add the following code.

// @ts-nocheck
import { useEffect } from "react";

interface IGoogleAd {
  className?: string;
  adAttributes: any;
}
export const GoogleAd = ({ className, adAttributes }: IGoogleAd) => {
  useEffect(() => {
    try {
      (adsbygoogle = window.adsbygoogle || []).push({});
    } catch (err) {}
  }, []);

  return (
    <div className={className}>
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client="ca-pub-{PUB_ID}"
        {...adAttributes}
      ></ins>
    </div>
  );
};

There we go. The above component will be generic for the different types of ads that Adsense provides, and we will specify the necessary attributes with the adAttributes prop.

Example of consuming the component

If we want to consume the component, it could be done like below code. I will share two different ad types.

Example of a fluid responsive ad:

<GoogleAd
  className="myAdContainer"
  adAttributes={{
    "data-ad-slot": SLOT_ID,
    "data-ad-format": "fluid",
    "data-full-width-responsive": "true",
  }}
/>

Example of an ad type that has specific layout definitions:

<GoogleAd
  adAttributes={{
    "data-ad-slot": "SLOT_ID",
    "data-ad-format": "auto",
    "data-ad-layout-key": "-34+fg+21-9k-1m",
  }}
/>

And that's it. Now it should appear some ads where you place this component.

Outro

That's it for this guide. I hope you found this helpful and good luck with placing ads on you website.

Have a great day, and thanks for reading!

Fri May 19 2023

See all our articles

Liked what you just read? Check out our related articles below

Webcam component in React for taking photos that can be downloaded or sent to an API-thumbnail

Webcam component in React for taking photos that can be downloaded or sent to an APIA tutorial on how we can create a component that accesses the webcam and take photos. We will make the image downloadable and prepare it to be added to form data to POST it to an API.

Wed Jun 21 2023

Update state in React for objects and arrays-thumbnail

Update state in React for objects and arraysA guide on how to work with objects and arrays in React states. We will remove, add and update enitities in the state and explain the cause of mutation in React states.

Thu Jun 15 2023

Implement an add to cart feature in React-thumbnail

Implement an add to cart feature in ReactA tutorial on how to implement an add to cart feature for a webshop, using React, context API and JavaScript

Wed Jun 14 2023

Create a QR code generator in React-thumbnail

Create a QR code generator in ReactA tutorial on how to build a QR code generator in React using a free API from Algobook.

Sun Jun 04 2023

Tabs component in React with icon support-thumbnail

Tabs component in React with icon supportIn this tutorial we will create a Tabs component that we can use in our application for showing different type of content.

Sun May 28 2023

Build a full stack application with React and NodeJs-thumbnail

Build a full stack application with React and NodeJsA tutorial on how to build a simple full stack application with React in the client side and NodeJs in the backend.

Sat May 27 2023

How to make pages in React scroll to top automatically-thumbnail

How to make pages in React scroll to top automaticallyA short tutorial on how we can make our pages always scroll to the top once navigated to. We will create a custom hook that we can implement in our pages.

Tue May 23 2023

Create a contact us form in React with email integration using a free API-thumbnail

Create a contact us form in React with email integration using a free APIA tutorial on how we can create a contact us form with just using React with a 100% free Email API integration.

Tue May 23 2023

Create a responsive sidebar menu in React with a visibility toggle-thumbnail

Create a responsive sidebar menu in React with a visibility toggleA tutorial on how to create a responsive sidebar in React with icons, links, visibility toggle and a slide in animation. We will also share example how to get it to work with react router dom using NavLinks.

Fri May 19 2023

How to achieve a typing animation on a text-thumbnail

How to achieve a typing animation on a textA short tutorial on how to achieve a typing animation effect on a text, using css and React.

Fri May 19 2023