I'm having an issue with my adsense ad inside my react component, it will almost always display the same ad on route change. I suspect this is because Google sees the route as an empty page and so would not serve personalized ads.
What I currently have is very simple. I have the google script on my index.html
and then my ad component which I'm calling under my App component.
import React from 'react';
export default class Ad extends React.Component {
componentDidMount () {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
render () {
return (
<div className='ad'>
<ins className='adsbygoogle'
style={{ display: 'block' }}
data-ad-client='ca-pub-4543556906953539'
data-ad-slot='3566322911'
data-ad-format='auto'
data-full-width-responsive="true"
/>
</div>
);
}
}
I was reading this thread and the answer was use googletags to manage served ads:
Using google adsense with React + React Router
However I found the answer vague maybe because I have never used google tag manager nor ads manager before. Does anyone have more information on this?
Related
I am using Amplify for a ReactJS app, and have configured a Cognito User Pool's Client to use Hosted UI. When previewed from within AWS Console ("View Hosted UI"), the UI customizations (banner logo and custom CSS) look exactly as configured. But when used within my React JS app, the UI does not show either logo or other customizations. I am following the steps outlined in using the hosted UI:
import {withAuthenticator} from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css';
Amplify.configure(awsconfig);
function App({signOut, user}) {
return (
<div className="App">
<Dashboard user={user} signOut={signOut}/>
</div>
);
}
export default withAuthenticator(App, {hideSignUp: true});
What could cause the Hosted UI in the app itself to look different from the "View Hosted UI" button from within AWS Console?
All other functionality is working as expected, only the UI customization is not showing up. No errors in console or anywhere, and amplify pull also did not change anything. The issue occurs on both localhost and remote deployments.
*I am developing an application in React, I was asked to use an iFrame that redirects me to a site external to my app. However, when I check the iFrame, it loads the application itself, not the site I have referenced.
Any idea what could be the problem?
export default function CallPicker_iFrameC(props){
const {iframeSource = '<iframe src="https://admin.callpicker.com/dashboard" width="100%" height="850px"></iframe>'} = props;
return(
<div dangerouslySetInnerHTML={{__html: iframeSource}}></div>
)
}
There is a similar sounding question but my problem is different.
While running the react app on localhost it navigates from the following page,
The submit button has the code window.location.href = "/ahana-psychometry/assessments/";
And so it navigates to the page:
But when I press on the submit button on the page at gh-pages, the url changes from blenderous.github.io/ahana-psychometry/create to blenderous.github.io/ahana-psychometry/assessments/. but
but the page displays the 404 message instead:
As you are using react router, the best way is using its methods.
Here is an example, which describes using withRouter HOC to redirect to another page:
import {
withRouter
} from 'react-router-dom'
class Sample extends React.Component {
handleSubmit = (e) => {
...
this.props.history.push('/ahana-psychometry/')
}
render() {
return (
<div>
<h1>Form</h1>
<Form onSubmit={this.handleSubmit} />
</div>
)
}
}
export default withRouter(Sample)
I want to save a simple boolean + userID if a user is authenticated and have it accessible via React Context API.
Many guides wrapped their root compoennt with the context Provider. To me it seems wastefull to wrap the whole app. On the other hand I need this information to be available in all my main pages.
Does it have any negative consequenses to wrap your whole app with a React Context Provider?
Example:
class App extends Component {
render() {
return (
<MyProvider>
<div className="App">
<h1 className="App-title">Welcome to my web store</h1>
<ProductList />
</div>
</MyProvider>
);
}
}
I used this guide as a reference.
I do not have any experiences in React Redux so this might just natural to everyone who has used this framework before.
Researching Google brings up many guides on how to implement React Context or use HOC but the 15 I clicked did not answer my question.
#Fyodor pointed it out in his comment:
You can wrap whole app in provider. React-redux recommends the same
(react-redux.js.org/introduction/…), so you may consider it acceptable
practice
I am developing a responsive web app using React and try to use iframe to display PDF.
However, I found that only one page can display in iframe under IOS Safari.
I have read this stackoverflow but this is not work in PDF.
IFrame height issues on iOS (mobile safari)
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {
base64Pdf:"XXXXXX"
}
render() {
return (
<div>
<iframe
src = {this.state.base64Pdf}
/>
</div>
);
}
}
export default App;
I would like to ask the solution to display all PDF pages in iframe under IOS Safari.
May I have any advise?