Невозможно отобразить объявления Google в React независимо от того, что я делаю - PullRequest
Новая
       17

Невозможно отобразить объявления Google в React независимо от того, что я делаю

3 голосов
/ 03 июня 2019

Я следовал этому примеру:

https://www.jamesbaum.co.uk/blether/using-google-adsense-with-react/

У меня есть этот компонент: 

import React from "react";

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

    render () {
        return (
            <div className='ad'>
                <ins className='adsbygoogle'
                     style={{ display: 'block' }}
                     data-ad-client='div-gpt-ad-1536172937182-0'
                     data-ad-slot='/164808479/Leaderboard'
                     data-ad-format='auto' />
            </div>
        );
    }
}

У меня есть это на моем index.html: 

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

Когда я запускаю свою тестовую страницу, я не вижу рекламы, и эта ошибка:

enter image description here

Я понятия не имею, что этоошибка означает или как ее устранить.

Важно отметить, что идентификаторы клиента и слота отлично работают в тестовом приложении без реакции Так что здесь должно быть что-то не так.

Кроме того, я тестирую это через localhost: 8080 - который работает для тестового приложения без реакции, поэтому я не думаю, что это проблема localhost / google ads.

В НАШЕМ НЕРАКТИВНОМ ПРИЛОЖЕНИИ

в нашем <header>: 

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
    <script>
        var googletag = googletag || {};
        googletag.cmd = googletag.cmd || [];
    </script>

    <script>
        googletag.cmd.push(function() {
            googletag.defineSlot('/164808479/Leaderboard', [728, 90], 'div-gpt-ad-1536172937182-0').addService(googletag.pubads());
            googletag.pubads().enableSingleRequest();
            googletag.enableServices();
        });
    </script>

в нашем <page.php>: 

<!-- /164808479/Leaderboard -->
        <div id='div-gpt-ad-1536172937182-0' style='height:90px; width:728px;'>
            <script>
                googletag.cmd.push(function() { googletag.display('div-gpt-ad-1536172937182-0'); });
            </script>
        </div>

Это прямо сейчас создает работающее объявление, даже с 127.0.0.1:80 (запущено через Docker). Наша проблема в том, что у нас нет возможности выполнять эту работу внутри компонента React.

Ответы [ 2 ]

2 голосов
/ 10 июня 2019

Вы получаете HTTP 400 (т.е. неверный запрос), потому что данные, отправляемые на серверы объявлений Google, кажутся неправильными.

Значение data-ad-client должно иметь формат, такой как ca-pub-00000000000000, полученный из администрации AdSense.стр.( Я считаю, что это не ваш случай !!! )

Предоставленные вами данные div-gpt-ad выглядят как идентификатор div для тега издателя Google, в котором есть идентификатор /164808479/Leaderboard.Таким образом, чтобы правильно использовать это в своем приложении реагирования, вы можете использовать эту библиотеку: https://github.com/nfl/react-gpt

Итак, ниже вы можете найти модифицированный код, подходящий для вашего случая.Просто добавьте react-gpt в ваше приложение реагирования. 

import React from "react";
import {Bling as GPT} from "react-gpt";

GPT.enableSingleRequest();

export default class AdBanner extends React.Component {
    render () {
        return (
            <div id="div-gpt-ad-1536172937182-0">
                <GPT
                    adUnitPath="/164808479/Leaderboard"
                    slotSize={[728, 90]}
                />
            </div>
        );
    }
}

Вы можете увидеть, как вышеприведенный код прекрасно работает по этой ссылке: https://codesandbox.io/embed/determined-bash-k30nq

1 голос
/ 06 июня 2019

Вам просто нужно подождать, когда вы впервые внедрите Adsense, он выдаст эту ошибку. Adsense потребовалось до следующего утра, чтобы начать показ рекламы. Я реализовал их тип адаптивной рекламы.

с / о https://stackoverflow.com/a/38351709/109941

...