Added mobile friendly ads & ads (#161)

* Fix spacing issues on mobile

* Added back linting on modules directory.
Please don't look at the dirty fixes :x

* Add support for responsive ads.

* Add lazy loading of images.
This commit is contained in:
Redblueflame
2021-04-15 15:48:33 +02:00
committed by GitHub
parent 28092d6862
commit 0bda636113
15 changed files with 289 additions and 229 deletions

View File

@@ -1,71 +1,80 @@
import Vue from 'vue';
import Vue from 'vue'
function isPersonalizedAdsOn(ctx) {
let cookies = []
if (ctx.req != null) {
//Server side rendering
cookies = ctx.req.headers.cookie;
// Server side rendering
cookies = ctx.req.headers.cookie
} else {
// Rely on the client
cookies = document.cookie;
cookies = document.cookie
}
if (cookies == null) return false
let processed = {}
const processed = {}
cookies.split(';').forEach((e) => {
let val = e.trim().split('=')
const val = e.trim().split('=')
processed[val[0]] = decodeURI(val[1])
})
let scopes = decodeURIComponent(processed['modrinth-scopes']).split(",")
return (scopes !== null && scopes.includes('ads'))
const scopes = decodeURIComponent(processed['modrinth-scopes']).split(',')
return scopes !== null && scopes.includes('ads')
}
// eslint-disable-next-line require-await
export default async function (ctx, inject) {
const { app } = ctx;
const config = ctx.$config && ctx.$config.ads || {};
const config = (ctx.$config && ctx.$config.ads) || {}
// Module options
const debug = config.debug ?? <%= options.debug || false %>;
const individualRefresh = config.individualRefresh ?? <%= options.individualRefresh || false %>;
const collapseEmptyDivs = config.collapseEmptyDivs ?? <%= options.collapseEmptyDivs || false %>;
const GeoEdgeId = config.GeoEdgeId ?? '<%= options.geoEdgeId %>';
const networkCode = config.networkCode ?? '<%= options.networkCode %>';
const GPT_LIB_SCRIPT_ID = '<%= options.GPT_LIB_SCRIPT_ID %>';
const GPT_INIT_SCRIPT_ID = '<%= options.GPT_INIT_SCRIPT_ID %>';
const GEOEDGE_CONF_SCRIPT_ID = '<%= options.GEOEDGE_CONF_SCRIPT_ID %>';
const GEOEDGE_LIB_SCRIPT_ID = '<%= options.GEOEDGE_LIB_SCRIPT_ID %>';
const debug = config.debug ?? '<%= options.debug || false %>' === 'true'
const individualRefresh =
config.individualRefresh ??
'<%= options.individualRefresh || false %>' === 'true'
const collapseEmptyDivs =
config.collapseEmptyDivs ??
'<%= options.collapseEmptyDivs || false %>' === 'true'
const GeoEdgeId = config.GeoEdgeId ?? '<%= options.geoEdgeId %>'
const networkCode = config.networkCode ?? '<%= options.networkCode %>'
const GPT_LIB_SCRIPT_ID = '<%= options.GPT_LIB_SCRIPT_ID %>'
const GPT_INIT_SCRIPT_ID = '<%= options.GPT_INIT_SCRIPT_ID %>'
const GEOEDGE_CONF_SCRIPT_ID = '<%= options.GEOEDGE_CONF_SCRIPT_ID %>'
const GEOEDGE_LIB_SCRIPT_ID = '<%= options.GEOEDGE_LIB_SCRIPT_ID %>'
// Instance options
const gptAdsOptions = {
networkCode,
individualRefresh,
slots: [],
};
}
const injectScript = (script) => {
const scriptIndex = ctx.app.head.script.findIndex(s => s.hid === script.hid);
const scriptIndex = ctx.app.head.script.findIndex(
(s) => s.hid === script.hid
)
if (scriptIndex !== -1) {
ctx.app.head.script[scriptIndex] = script;
ctx.app.head.script[scriptIndex] = script
} else {
ctx.app.head.script.push(script);
ctx.app.head.script.push(script)
}
};
let no_consent = !isPersonalizedAdsOn(ctx)
}
const noConsent = !isPersonalizedAdsOn(ctx)
// GeoEdge support
if (GeoEdgeId !== '') {
// Unfortunately these lines are needed to prevent vue-meta from esacping quotes in the init script
ctx.app.head.__dangerouslyDisableSanitizersByTagID = ctx.app.head.__dangerouslyDisableSanitizersByTagID || {}
ctx.app.head.__dangerouslyDisableSanitizersByTagID[GEOEDGE_CONF_SCRIPT_ID] = ['innerHTML']
ctx.app.head.__dangerouslyDisableSanitizersByTagID =
ctx.app.head.__dangerouslyDisableSanitizersByTagID || {}
ctx.app.head.__dangerouslyDisableSanitizersByTagID[
GEOEDGE_CONF_SCRIPT_ID
] = ['innerHTML']
const geoEdgeConfig = {
hid: GEOEDGE_CONF_SCRIPT_ID,
innerHTML: "window.grumi = { key: '" + encodeURIComponent(GeoEdgeId) +"'};"
};
injectScript(geoEdgeConfig);
innerHTML:
"window.grumi = { key: '" + encodeURIComponent(GeoEdgeId) + "'};",
}
injectScript(geoEdgeConfig)
const geoEdgeImport = {
hid: GEOEDGE_LIB_SCRIPT_ID,
src: `https://rumcdn.geoedge.be/${GeoEdgeId}/grumi-ip.js`,
async: true,
};
}
injectScript(geoEdgeImport)
}
@@ -74,20 +83,28 @@ export default async function (ctx, inject) {
hid: GPT_LIB_SCRIPT_ID,
src: 'https://www.googletagservices.com/tag/js/gpt.js',
async: true,
};
injectScript(gptLibScript);
}
injectScript(gptLibScript)
// Inject GPT init script
let gptInitScriptHtml = 'var googletag = googletag || {};googletag.cmd = googletag.cmd || [];';
let gptInitScriptHtml =
'var googletag = googletag || {};googletag.cmd = googletag.cmd || [];'
if (debug) {
gptInitScriptHtml += 'googletag.cmd.push(function(){googletag.openConsole();});';
gptInitScriptHtml +=
'googletag.cmd.push(function(){googletag.openConsole();});'
}
// Disable initial load
const gptDisableInitialLoad = individualRefresh ? 'googletag.pubads().disableInitialLoad();' : '';
const gptDisableInitialLoad = individualRefresh
? 'googletag.pubads().disableInitialLoad();'
: ''
// Collapse empty div
const gptCollapseEmptyDivs = collapseEmptyDivs ? 'googletag.pubads().collapseEmptyDivs();' : '';
const gptCollapseEmptyDivs = collapseEmptyDivs
? 'googletag.pubads().collapseEmptyDivs();'
: ''
// Desactivate personalization
const gptDisablePersonalization = no_consent ? 'googletag.pubads().setRequestNonPersonalizedAds(1);' : '';
const gptDisablePersonalization = noConsent
? 'googletag.pubads().setRequestNonPersonalizedAds(1);'
: ''
gptInitScriptHtml += `
googletag.cmd.push(function(){
googletag.pubads().enableSingleRequest();
@@ -96,17 +113,15 @@ export default async function (ctx, inject) {
${gptDisablePersonalization}
googletag.enableServices();
});
`;
`
const gptInitScript = {
hid: GPT_INIT_SCRIPT_ID,
innerHTML: gptInitScriptHtml,
};
injectScript(gptInitScript);
}
injectScript(gptInitScript)
const component = require('./component.js')
Vue.component('<%= options.componentName %>', component.default || component)
const component = require('./component.js');
Vue.component('<%= options.componentName %>', component.default || component);
inject('gptAds', gptAdsOptions);
inject('gptAds', gptAdsOptions)
}