I am struggling with implement google native ads on web, i tired to find some documentation on google site, but all refers to mobile app. Has anyone perhaps implemented this?

Already what i do:

  1. I dig through the google documentation
  2. Ask chat GPT :) , give me few useless info
  3. Some tests with google ads events etc.

Tag:google-ads-api, javascript, reactjs, adsense, typescript

4 comments.

  1. Pluto

    Of course, you can implement Native Google Ads on Web using React.

    You can use react-gpt for this function. GPT stands for Google Publisher Tag, which is an ad tagging library for Google Ad Manager.

    For example:

    import React from "react"; import { Bling as GPT } from "react-gpt"; export default function App() { return ( <div className="App"> <GPT adUnitPath="/4595/nfl.test.open" sizeMapping={[ { viewport: [0, 0], slot: [320, 50] }, { viewport: [750, 0], slot: [728, 90] }, { viewport: [1050, 0], slot: [1024, 120] }, ]} nativeTemplateId="10101010" /> </div> ); }

    This will create a native ad component that uses the native ad template with the ID of 10101010. The native ad template should contain placeholders for the ad assets that you want to display.

    To learn more, see react-gpt doc in npmjs and github.

    Reply
    1. WZaradzki

      OK thx, ads such as these i showing in my custom hook, but I meant something other like: I get info about custom props like imageUrl, headline, url etc. and i can create native element according to this data, like it looks like in mobile app

      Reply
    2. Pluto

      Umm, so do you want such a component? I updated my answer but I'm not sure. Please let me know if this is incorrect.

      Reply
    3. WZaradzki

      Thanks :) So, to get native ads on web is not possible to construct it itself. It must be designed on google ads manager side. (html/css)

      Reply

Add a new comment.