Using google adsense with React + React Router - javascript

I'm trying to integrate Google Adsense into my React site and am running into an issue. To get ads on my pages, I've included this script tag into the head of my html file:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
The ads are wrapped in a simple component that looks like this:
export default class GoogleAdSense extends Component {
componentDidMount() {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
render() {
const {
showAd,
className,
slot,
format,
} = this.props;
return (
<div className="GoogleAdSense">
<ins
className={ `adsbygoogle ${className}` }
style={{ display: 'block' }}
data-ad-client="ca-pub-7104738102834759"
data-ad-slot={slot}
data-ad-format={format}
>
</ins>
</div>
);
}
}
Which is rendered by other components like this:
<GoogleAdSense
slot="3461840703"
className="QuestionGoogleAd"
format="auto"
/>
This method was pulled from this article
Using the above implementation, ads load correctly on the page. The problem arises when users navigate to other pages. Since I'm using react router, the head doesn't update (with the exception of some react-helmet title changes) and the Adsense script doesn't reload. This makes Adsense think that it's on the same page as indicated by the Adsense pageview numbers I'm getting and the Adsense docs here:
Separate JavaScript code: AdSense counts a page view when the AdSense ad code is executed by a user's browser.
This is further evidenced by the fact that when I inspect the Adsense HTTP requests, I can see that there is a prev_fmts param that remembers the previous ads requested:
The problem is that after about 12-16 ads show up (2 per page, so maximum 8 page views), Adsense returns an empty html document with a 400 error for every subsequent ad request:
If I manually refresh the page by hitting cmd-r, the ads load correctly once again, but only for the next few pageviews. I tried removing the script I mentioned earlier and reinserting it into the head on each page change since that would (in theory) rerun the ad code and trigger a new Adsense pageview, but that didn't work. The main point of this site is to be able to show ads to generate a stable revenue stream and if I can't show ads on all of my pageviews (I'm averaging about 20 per user right now) using React, I'm going to have to reimplement the whole site, which I REALLY don't want to do. Has anyone else experienced this and found a solution?

You can use googletags to manage your adsense displays instead.
https://www.google.com/analytics/tag-manager/
They have functions to refresh the ads on a page https://support.google.com/dfp_sb/answer/2694377?visit_id=1-636301421618198678-920866889&rd=1 which will work for client side apps

You can use prepared react components for google publisher tag

Related

Script is not loaded when browsing the website via NuxtLink

I am coding a blog using Nuxt.js and ButterCMS API for backend and for display posts.
I am loading some JavaScript code for display my posts correctly, that is working very well.
The problem is that when I navigate via the menu (so via NuxtLink), the script of each page is not loaded. When I refresh the page, everything is working correctly. I don't want to make a script that refresh automatically the page when clicking on an item of the menu because it will remove Nuxt transition between pages.
I already seen several posts with the same problem as mind on GitHub and Stack Overflow, but without solution that was working for me.
Here is my code that is directly in script tag in a Vue page :
import { butter } from "~/plugins/buttercms";
butter.page.retrieve("*", "simple-page").then(() => {
const createScript1 = document.createElement("script");
createScript1.src = "../../script/post-informations.js";
document.head.appendChild(createScript1);
});
const createScript2 = document.createElement("script");
createScript2.src = "https://sibforms.com/forms/end-form/build/main.js";
document.head.appendChild(createScript2);

Why I can't embed Twitter in my dash app?

i'm trying to embed the twitter timeline of an account in my dash app. I noticed that it does not work if i put the following code into the app entry :
dash_dangerously_set_inner_html.DangerouslySetInnerHTML(< a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw"></a>
< script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>').
Probably the js script is not running, indeed if I try to put it directly into source code the iframe that I need is generated. Unfortunately, the CSS is of this frame is difficult to set and it is displayed on all the pages, while I need to put it into the right section.

Embedding a Square Appointments script into a Wordpress site - it's rendering fullscreen in the preview pane, so I can't edit other content. Thoughts?

Square up provides a couple different ways to add appointment booking to an external website. I am working with a Wordpress site with Elementor using the Astra theme, and I've attempted to create a shortcode with the following snippet. What happens is that the Square appointments takes up the entire preview pane of the editor, so I can't edit the rest of the page, or even access the shortcode/remove it.
<!-- Start Square Appointments Embed Code --><script src='linkhere'></script><!-- End Square Appointments Embed Code -->
I was able to get the calendar on WordPress by just adding the URL source in an iframe, like below, but the problem is it doesn't show up on mobile (at least on Google Chrome). On desktop, a static height is needed to display properly.
<iframe
height="1800px" src="linkhere">
</iframe>
What all can I do to address these problems? I need this embedded, but I need to be able to continue making changes to the web page in the editor. I tried templating it, but it will still render, even in a template. I tried using CSS to fix the width/height, no success. :-(
Please help me!

Redirect to mobile script on google tag manager

I would like to redirect my website to a mobile version. I have a javascript to do that:
if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://m.mysite.com";
}
Could I put this code on Google Tag Manager? Is that a good ideia?
Thanks.
You can put this into GTM using a custom HTML tag that is triggered at page load (you would need to include script tags).
However in my opinion this is not a good idea. GTM is implemented after the opening body tag, which means that before any tags are executed you site loads all assets referenced in the head section (js, css etc.) plus it has to fetch the tag manager script from Google. This introduces a noticable delay before redirecting.
However you could use your script to display a little dialog that asks users if they want to be redirected. If nothing else the dialog would hide the delay (plus some users might prefer the desktop site for whatever reason).

How to use adsense after some time of page load

I've created a little social networking website which is working fine,
but in wall page google ads is not showing,
its showing and working fine in other pages
but in wall page not showing because the page content is showing with js
So i think there's a problem of keywords and description issue
i just want to know how to use google ads after sometime
i try
function show(){
//My Adsense Code But Still Not Working
}
setTimeout('show()',5000);
If you're making serious money with adsense, Google will give you access to premium ads including a very customizable api. If you got there you can format the ads in very different ways and supply the keywords you would like to be used.

Categories

Resources