fix adbutler

global.d.ts

@@ -13,5 +13,10 @@ declare global {
     ga?: {
       getAll: () => Array<{ get: (prop: string) => string }>;
     };
+    AdButler: {
+      ads: Array<unknown>;
+      register: (...args: unknown) => void;
+    };
+    abkw: string;
   }
 }

lib/csp/policies/ad.ts

@@ -3,7 +3,7 @@ import sha256 from 'crypto-js/sha256';
 import type CspDev from 'csp-dev';
 
 import isSelfHosted from 'lib/isSelfHosted';
-import { connectAdbutler, placeAd, placeAdSPA } from 'ui/shared/ad/adbutlerScript';
+import { connectAdbutler, placeAd } from 'ui/shared/ad/adbutlerScript';
 
 export function ad(): CspDev.DirectiveDescriptor {
   if (!isSelfHosted()) {
@@ -25,7 +25,6 @@ export function ad(): CspDev.DirectiveDescriptor {
       'servedbyadbutler.com',
       `'sha256-${ Base64.stringify(sha256(connectAdbutler)) }'`,
       `'sha256-${ Base64.stringify(sha256(placeAd)) }'`,
-      `'sha256-${ Base64.stringify(sha256(placeAdSPA)) }'`,
       '*.slise.xyz',
     ],
     'img-src': [

ui/shared/ad/AdbutlerBanner.tsx

-/* eslint-disable max-len */
 import { Flex, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/navigation';
 import Script from 'next/script';
 import React from 'react';
 
+import appConfig from 'configs/app/config';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import isBrowser from 'lib/isBrowser';
-import { connectAdbutler, placeAd, placeAdSPA } from 'ui/shared/ad/adbutlerScript';
+import { connectAdbutler, placeAd, ADBUTLER_ACCOUNT } from 'ui/shared/ad/adbutlerScript';
 
 const AdbutlerBanner = ({ className }: { className?: string }) => {
   const router = useRouter();
+  const isMobile = useIsMobile();
   React.useEffect(() => {
-    if (isBrowser()) {
-      eval(placeAdSPA);
+    if (isBrowser() && window.AdButler) {
+      const abkw = window.abkw || '';
+      if (!window.AdButler.ads) {
+        window.AdButler.ads = [];
+      }
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore:
+      let plc = window[`plc${ appConfig.ad.adButlerConfigMobile?.id }`] || 0;
+      const config = isMobile ? appConfig.ad.adButlerConfigMobile : appConfig.ad.adButlerConfigDesktop;
+      const banner = document.getElementById('ad-banner');
+      if (banner) {
+        banner.innerHTML = '<' + 'div id="placement_' + config?.id + '_' + plc + '"></' + 'div>';
+      }
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore:
+      window.AdButler.ads.push({ handler: function(opt) {
+        window.AdButler.register(ADBUTLER_ACCOUNT, config?.id, [ config?.width, config?.height ], `placement_${ config?.id }_` + opt.place, opt);
+      }, opt: { place: plc++, keywords: abkw, domain: 'servedbyadbutler.com', click: 'CLICK_MACRO_PLACEHOLDER' } });
     }
-  }, [ router ]);
+  }, [ router, isMobile ]);
 
   return (
     <Flex className={ className } id="adBanner" h={{ base: '100px', lg: '90px' }}>

ui/shared/ad/adbutlerScript.ts

 /* eslint-disable max-len */
 import appConfig from 'configs/app/config';
 
-const ADBUTLER_ACCOUNT = 182226;
+export const ADBUTLER_ACCOUNT = 182226;
 
 export const connectAdbutler = `if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}`;
 
@@ -19,18 +19,3 @@ var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
       AdButler.ads.push({handler: function(opt){ AdButler.register(${ ADBUTLER_ACCOUNT }, ${ appConfig.ad.adButlerConfigDesktop?.id }, [${ appConfig.ad.adButlerConfigDesktop?.width },${ appConfig.ad.adButlerConfigDesktop?.height }], 'placement_${ appConfig.ad.adButlerConfigDesktop?.id }_'+opt.place, opt); }, opt: { place: plc${ appConfig.ad.adButlerConfigDesktop?.id }++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
   }
 `;
-
-export const placeAdSPA = `
-  if (!window.AdButler.ads) {window.AdButler.ads = [];}
-  var abkw = window.abkw || '';
-  const isMobile = window.matchMedia("only screen and (max-width: 1000px)").matches;
-  if (isMobile) {
-    var plc${ appConfig.ad.adButlerConfigMobile?.id } = window.plc${ appConfig.ad.adButlerConfigMobile?.id } || 0;
-    document.getElementById('ad-banner').innerHTML = '<'+'div id="placement_${ appConfig.ad.adButlerConfigMobile?.id }_'+plc${ appConfig.ad.adButlerConfigMobile?.id }+'"></'+'div>';
-    window.AdButler.ads.push({handler: function(opt){ AdButler.register(${ ADBUTLER_ACCOUNT }, ${ appConfig.ad.adButlerConfigMobile?.id }, [${ appConfig.ad.adButlerConfigMobile?.width },${ appConfig.ad.adButlerConfigMobile?.height }], 'placement_${ appConfig.ad.adButlerConfigMobile?.id }_'+opt.place, opt); }, opt: { place: plc${ appConfig.ad.adButlerConfigMobile?.id }++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
-  } else {
-    var plc${ appConfig.ad.adButlerConfigDesktop?.id } = window.plc${ appConfig.ad.adButlerConfigDesktop?.id } || 0;
-    document.getElementById('ad-banner').innerHTML = '<'+'div id="placement_${ appConfig.ad.adButlerConfigDesktop?.id }_'+plc${ appConfig.ad.adButlerConfigDesktop?.id }+'"></'+'div>';
-    window.AdButler.ads.push({handler: function(opt){ window.AdButler.register(${ ADBUTLER_ACCOUNT }, ${ appConfig.ad.adButlerConfigDesktop?.id }, [${ appConfig.ad.adButlerConfigDesktop?.width },${ appConfig.ad.adButlerConfigDesktop?.height }], 'placement_${ appConfig.ad.adButlerConfigDesktop?.id }_'+opt.place, opt); }, opt: { place: plc${ appConfig.ad.adButlerConfigDesktop?.id }++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
-  }
-`;