Unverified Commit b473f6a3 authored by Roger Jungemann's avatar Roger Jungemann Committed by GitHub
Browse files

Initial GPT testing (#3177)

* Initial GPT testing

* Fix build

* Testing GPT in dev env

* Disable for signed-in users
parent d399cc62
......@@ -74,5 +74,6 @@
"pinned_posts_url": "PINNED_POSTS_URL",
"google_ad_enabled": "GOOGLE_AD_ENABLED",
"google_ad_test": "GOOGLE_AD_TEST",
"google_ad_client": "GOOGLE_AD_CLIENT"
"google_ad_client": "GOOGLE_AD_CLIENT",
"gpt_enabled": "GPT_ENABLED"
}
......@@ -95,5 +95,12 @@
"market_1": {
"slot_id": "2777377820"
}
},
"gpt_enabled": null,
"gpt_slots": {
"top_navi": {
"slot_id": "div-gpt-ad-1547492443353-0",
"args": ["/21784675435/steemit_top-navi", [[728, 90], [970, 90]], "div-gpt-ad-1547492443353-0"]
}
}
}
......@@ -39,8 +39,15 @@ class App extends React.Component {
this.state = {
showCallout: true,
showBanner: true,
gptBannerHeight: 0,
};
this.listenerActive = null;
this.gptadshownListener = this.gptadshown.bind(this);
}
gptadshown(e) {
const height = document.querySelector('header .gpt-ad').offsetHeight;
this.setState({ gptBannerHeight: height });
}
componentWillMount() {
......@@ -49,11 +56,17 @@ class App extends React.Component {
}
componentDidMount() {
window.addEventListener('gptadshown', this.gptadshownListener);
if (pageRequiresEntropy(this.props.pathname)) {
this._addEntropyCollector();
}
}
componentWillUnmount() {
window.removeEventListener('gptadshown', this.gptadshownListener);
}
componentWillReceiveProps(np) {
// Add listener if the next page requires entropy and the current page didn't
if (
......@@ -101,6 +114,7 @@ class App extends React.Component {
new_visitor !== n.new_visitor ||
this.state.showBanner !== nextState.showBanner ||
this.state.showCallout !== nextState.showCallout ||
this.state.gptBannerHeight !== nextState.gptBannerHeight ||
nightmodeEnabled !== n.nightmodeEnabled ||
showAnnouncement !== n.showAnnouncement
);
......@@ -241,7 +255,10 @@ class App extends React.Component {
/>
)}
<div className="App__content">
<div
className="App__content"
style={{ paddingTop: `${this.state.gptBannerHeight}px` }}
>
{process.env.BROWSER &&
ip &&
new_visitor &&
......
......@@ -41,6 +41,7 @@
@import "./elements/Dropdown";
@import "./elements/Notices";
@import "./elements/GoogleAd";
@import "./elements/GptAd";
// modules
@import "./modules/Header/styles";
......
......@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
class GoogleAd extends React.Component {
componentDidMount() {
if (this.props.env === 'development') {
if (!this.props.shouldSeeAds) {
return;
}
......
import React from 'react';
import { connect } from 'react-redux';
class GptAd extends React.Component {
componentDidMount() {
if (!this.props.gptEnabled) {
return;
}
googletag.cmd.push(() => {
const slot = googletag.defineSlot.apply(googletag, this.props.args);
slot.addService(googletag.pubads());
googletag.cmd.push(() => {
googletag.display(this.props.slot);
googletag.pubads().refresh([slot]);
googletag
.pubads()
.addEventListener('slotRenderEnded', function(event) {
console.log('Slot has been rendered:', event);
window.dispatchEvent(new Event('gptadshown'));
});
});
});
}
render() {
if (!this.props.gptEnabled) {
return null;
}
return (
<div
className="gpt-ad"
style={{ width: '100%' }}
id={this.props.slot}
/>
);
}
}
export default connect((state, ownProps) => {
const env = state.app.get('env');
const gptEnabled = state.app.getIn(['googleAds', 'gptEnabled']);
return { env, gptEnabled, ...ownProps };
})(GptAd);
.gpt-ad {
text-align: center;
}
......@@ -17,6 +17,7 @@ import { SIGNUP_URL } from 'shared/constants';
import SteemLogo from 'app/components/elements/SteemLogo';
import normalizeProfile from 'app/utils/NormalizeProfile';
import Announcement from 'app/components/elements/Announcement';
import GptAd from 'app/components/elements/GptAd';
class Header extends React.Component {
static propTypes = {
......@@ -25,6 +26,7 @@ class Header extends React.Component {
category: PropTypes.string,
order: PropTypes.string,
pathname: PropTypes.string,
gptSlots: PropTypes.object,
};
constructor() {
......@@ -258,6 +260,12 @@ class Header extends React.Component {
{this.props.showAnnouncement && (
<Announcement onClose={this.props.hideAnnouncement} />
)}
{this.props.gptSlots ? (
<GptAd
slot={this.props.gptSlots['top_navi']['slot_id']}
args={this.props.gptSlots['top_navi']['args']}
/>
) : null}
<nav className="row Header__nav">
<div className="small-5 large-4 columns Header__logotype">
{/*LOGO*/}
......@@ -365,6 +373,8 @@ const mapStateToProps = (state, ownProps) => {
? username
: state.offchain.get('account');
const gptSlots = state.app.getIn(['googleAds', 'gptSlots']).toJS();
return {
username,
loggedIn,
......@@ -373,6 +383,7 @@ const mapStateToProps = (state, ownProps) => {
account_meta: user_profile,
current_account_name,
showAnnouncement: state.user.get('showAnnouncement'),
gptSlots,
...ownProps,
};
};
......
......@@ -72,6 +72,8 @@ async function appRender(ctx, locales = false, resolvedAssets = false) {
test: !!config.google_ad_test,
client: config.google_ad_client,
adSlots: config.google_ad_slots,
gptEnabled: !!ctx.gptEnabled,
gptSlots: config.gpt_slots,
};
// ... and that's the end of user-session-related SSR
const initial_state = {
......@@ -103,7 +105,17 @@ async function appRender(ctx, locales = false, resolvedAssets = false) {
assets = resolvedAssets;
}
const shouldSeeAds = googleAds.shouldSeeAds;
const props = { body, assets, title, meta, shouldSeeAds };
const gptEnabled = googleAds.gptEnabled;
const gptSlots = googleAds.gptSlots;
const props = {
body,
assets,
title,
meta,
shouldSeeAds,
gptEnabled,
gptSlots,
};
ctx.status = statusCode;
ctx.body =
'<!DOCTYPE html>' + renderToString(<ServerHTML {...props} />);
......
......@@ -8,6 +8,8 @@ export default function ServerHTML({
title,
meta,
shouldSeeAds,
gptEnabled,
gptSlots,
}) {
let page_title = title;
return (
......@@ -170,6 +172,33 @@ export default function ServerHTML({
type="text/css"
/>
))}
{gptEnabled ? (
<script
async
src="https://www.googletagservices.com/tag/js/gpt.js"
/>
) : null}
{gptEnabled ? (
<script
dangerouslySetInnerHTML={{
__html: `
window.googletag = window.googletag || {};
googletag.cmd = googletag.cmd || [];
console.log('Set up googletag');
googletag.cmd.push(function() {
console.log('Preparing to enable googletag services');
googletag.pubads().enableSingleRequest();
googletag.pubads().setTargeting('edition',['new-york']);
googletag.pubads().collapseEmptyDivs(true,true);
googletag.pubads().disableInitialLoad();
googletag.pubads().enableAsyncRendering();
googletag.enableServices();
console.log('Enabled googletag services');
});
`,
}}
/>
) : null}
{shouldSeeAds ? (
<script
async
......
......@@ -292,6 +292,8 @@ useGeneralApi(app);
app.use(function*(next) {
this.adsEnabled =
!(this.session.auth || this.session.a) && config.google_ad_enabled;
this.gptEnabled =
!(this.session.auth || this.session.a) && config.gpt_enabled;
yield next;
});
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment