Skip to content

Commit

Permalink
Improve performance
Browse files Browse the repository at this point in the history
  • Loading branch information
@xpdota
xpdota committed Nov 1, 2024
1 parent f2f60c4 commit c83c0e6
Showing 1 changed file with 127 additions and 121 deletions.
248 changes: 127 additions & 121 deletions packages/frontend/src/scripts/components/ads.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ class ManagedAd {
},
});
recordEvent('createAd', {'id': id});
});
}, 50);
this._installed = true;
}

Expand Down Expand Up @@ -197,31 +197,34 @@ extraLinksHolderInner.style.display = 'content';
window.addEventListener('resize', recheckAds);

function recheckAds() {
console.debug('recheckAds');
let oneAdShown = false;
if (adsEnabled()) {
currentAds.forEach(ad => {
ad.recheck();
console.debug(`recheckAds: ${ad.id} => ${ad.showing}`);
if (ad.showing && !oneAdShown) {
oneAdShown = true;
ad.addExtras([extraLinksHolderInner]);
}
});
window['__cmp']?.('addConsentLink');
window['__uspapi']?.('addLink', 1);
}
else {
console.debug('recheckAds: not enabled');
}
if (oneAdShown) {
fallbackPrivacyArea.style.display = 'none';
}
else {
fallbackPrivacyArea.style.display = '';
moveLinksToFallbackPrivacyArea();
setTimeout(() => {

console.debug('recheckAds');
let oneAdShown = false;
if (adsEnabled()) {
currentAds.forEach(ad => {
ad.recheck();
console.debug(`recheckAds: ${ad.id} => ${ad.showing}`);
if (ad.showing && !oneAdShown) {
oneAdShown = true;
ad.addExtras([extraLinksHolderInner]);
}
});
window['__cmp']?.('addConsentLink');
window['__uspapi']?.('addLink', 1);
}
else {
console.debug('recheckAds: not enabled');
}
if (oneAdShown) {
fallbackPrivacyArea.style.display = 'none';
}
else {
fallbackPrivacyArea.style.display = '';
moveLinksToFallbackPrivacyArea();

}
}
});
}

window['recheckAds'] = recheckAds;
Expand All @@ -230,114 +233,117 @@ let firstLoad = true;

export function insertAds(element: HTMLElement) {

if (currentAds.length === 0) {
// Analytics
setTimeout(() => {
if (adsEnabled()) {
recordEvent('adsEnabled');
}
else if (Array.from(document.head.querySelectorAll('script')).find(script => script.src && script.src.includes('nitro'))) {
recordEvent('adsDisabled');
}
else {
recordEvent('adsNotInjected');
}
}, 10_000);

try {
// Display on very wide 2-column
const sideWideCond: DisplayCondition = (w, h) => w >= 1900 && h > 650;
// Display on very wide 2-column without sufficient height
const sideWideShortCond: DisplayCondition = (w, h) => w >= 1900 && h > 350 && !sideWideCond(w, h);
// Display on less wide 2-column, or wide 1-column
const sideNarrowCond: DisplayCondition = (w, h) =>
((w >= 1560 && h > 650)
|| (w <= 1210 && w >= 1012 && h > 650))
&& !sideWideCond(w, h) && !sideWideShortCond(w, h);
{
const size: AdSize = [300, 600];
const extraSizes: AdSize[] = [[160, 600], [300, 250]];
const adAreaLeftWide = new ManagedAd('float-area-wide-left', size, sideWideCond, extraSizes);
{
const outer = adAreaLeftWide.adContainer.outer;
const middle = adAreaLeftWide.adContainer.middle;
outer.style.left = '0';
middle.style.marginLeft = '-5px';
middle.style.borderRadius = '0 10px 0 0';
}
currentAds.push(adAreaLeftWide);
setTimeout(() => {

const adAreaRightWide = new ManagedAd('float-area-wide-right', size, sideWideCond, extraSizes);
{
const outer = adAreaRightWide.adContainer.outer;
const middle = adAreaRightWide.adContainer.middle;
outer.style.left = '100%';
middle.style.right = '0';
middle.style.marginRight = '-5px';
middle.style.borderRadius = '10px 0 0 0';
if (currentAds.length === 0) {
// Analytics
setTimeout(() => {
if (adsEnabled()) {
recordEvent('adsEnabled');
}
currentAds.push(adAreaRightWide);
}
{
const size: AdSize = [300, 250];
const adAreaLeftWide = new ManagedAd('float-area-wide-short-left', size, sideWideShortCond);
{
const outer = adAreaLeftWide.adContainer.outer;
const middle = adAreaLeftWide.adContainer.middle;
outer.style.left = '0';
middle.style.marginLeft = '-5px';
middle.style.borderRadius = '0 10px 0 0';
else if (Array.from(document.head.querySelectorAll('script')).find(script => script.src && script.src.includes('nitro'))) {
recordEvent('adsDisabled');
}
currentAds.push(adAreaLeftWide);

const adAreaRightWide = new ManagedAd('float-area-wide-short-right', size, sideWideShortCond);
else {
recordEvent('adsNotInjected', {'page': document.location.search});
}
}, 10_000);

try {
// Display on very wide 2-column
const sideWideCond: DisplayCondition = (w, h) => w >= 1900 && h > 650;
// Display on very wide 2-column without sufficient height
const sideWideShortCond: DisplayCondition = (w, h) => w >= 1900 && h > 350 && !sideWideCond(w, h);
// Display on less wide 2-column, or wide 1-column
const sideNarrowCond: DisplayCondition = (w, h) =>
((w >= 1560 && h > 650)
|| (w <= 1210 && w >= 1012 && h > 650))
&& !sideWideCond(w, h) && !sideWideShortCond(w, h);
{
const outer = adAreaRightWide.adContainer.outer;
const middle = adAreaRightWide.adContainer.middle;
outer.style.left = '100%';
middle.style.right = '0';
middle.style.marginRight = '-5px';
middle.style.borderRadius = '10px 0 0 0';
const size: AdSize = [300, 600];
const extraSizes: AdSize[] = [[160, 600], [300, 250]];
const adAreaLeftWide = new ManagedAd('float-area-wide-left', size, sideWideCond, extraSizes);
{
const outer = adAreaLeftWide.adContainer.outer;
const middle = adAreaLeftWide.adContainer.middle;
outer.style.left = '0';
middle.style.marginLeft = '-5px';
middle.style.borderRadius = '0 10px 0 0';
}
currentAds.push(adAreaLeftWide);

const adAreaRightWide = new ManagedAd('float-area-wide-right', size, sideWideCond, extraSizes);
{
const outer = adAreaRightWide.adContainer.outer;
const middle = adAreaRightWide.adContainer.middle;
outer.style.left = '100%';
middle.style.right = '0';
middle.style.marginRight = '-5px';
middle.style.borderRadius = '10px 0 0 0';
}
currentAds.push(adAreaRightWide);
}
currentAds.push(adAreaRightWide);
}
{
const size: AdSize = [160, 600];
const adAreaLeftNarrow = new ManagedAd('float-area-narrow-left', size, sideNarrowCond);
{
const outer = adAreaLeftNarrow.adContainer.outer;
const middle = adAreaLeftNarrow.adContainer.middle;
outer.style.left = '0';
middle.style.marginLeft = '-5px';
middle.style.borderRadius = '0 10px 0 0';
const size: AdSize = [300, 250];
const adAreaLeftWide = new ManagedAd('float-area-wide-short-left', size, sideWideShortCond);
{
const outer = adAreaLeftWide.adContainer.outer;
const middle = adAreaLeftWide.adContainer.middle;
outer.style.left = '0';
middle.style.marginLeft = '-5px';
middle.style.borderRadius = '0 10px 0 0';
}
currentAds.push(adAreaLeftWide);

const adAreaRightWide = new ManagedAd('float-area-wide-short-right', size, sideWideShortCond);
{
const outer = adAreaRightWide.adContainer.outer;
const middle = adAreaRightWide.adContainer.middle;
outer.style.left = '100%';
middle.style.right = '0';
middle.style.marginRight = '-5px';
middle.style.borderRadius = '10px 0 0 0';
}
currentAds.push(adAreaRightWide);
}
currentAds.push(adAreaLeftNarrow);

const adAreaRightNarrow = new ManagedAd('float-area-narrow-right', size, sideNarrowCond);
{
const outer = adAreaRightNarrow.adContainer.outer;
const middle = adAreaRightNarrow.adContainer.middle;
outer.style.left = '100%';
middle.style.right = '0';
middle.style.marginRight = '-5px';
middle.style.borderRadius = '10px 0 0 0';
const size: AdSize = [160, 600];
const adAreaLeftNarrow = new ManagedAd('float-area-narrow-left', size, sideNarrowCond);
{
const outer = adAreaLeftNarrow.adContainer.outer;
const middle = adAreaLeftNarrow.adContainer.middle;
outer.style.left = '0';
middle.style.marginLeft = '-5px';
middle.style.borderRadius = '0 10px 0 0';
}
currentAds.push(adAreaLeftNarrow);

const adAreaRightNarrow = new ManagedAd('float-area-narrow-right', size, sideNarrowCond);
{
const outer = adAreaRightNarrow.adContainer.outer;
const middle = adAreaRightNarrow.adContainer.middle;
outer.style.left = '100%';
middle.style.right = '0';
middle.style.marginRight = '-5px';
middle.style.borderRadius = '10px 0 0 0';
}
currentAds.push(adAreaRightNarrow);
}
currentAds.push(adAreaRightNarrow);
}
catch (e) {
console.error(e);
}
}
catch (e) {
console.error(e);
element.prepend(...currentAds.map(a => a.adContainer.outer));
setTimeout(recheckAds);
setTimeout(recheckAds, 2_000);
if (firstLoad) {
firstLoad = false;
}
}
element.prepend(...currentAds.map(a => a.adContainer.outer));
setTimeout(recheckAds);
setTimeout(recheckAds, 2_000);
if (firstLoad) {
firstLoad = false;
}
else {
currentAds.forEach(ad => ad.onNavigate());
}
else {
currentAds.forEach(ad => ad.onNavigate());
}
});
}

// set up extra links
Expand Down

0 comments on commit c83c0e6

Please sign in to comment.