From 4e6ddc3674a1e42ce64696ca5cea327b6de85dcb Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Thu, 21 Mar 2024 16:20:23 +0100
Subject: [PATCH] web: Implement Venatus ads

---
 web/assets/css/development.css        |   6 +-
 web/assets/css/tailwind.css           |   5 -
 web/components.d.ts                   |   2 +
 web/components/ad-cell.vue            |  27 +--
 web/components/ad.vue                 | 311 ++++++++++----------------
 web/components/playwire-ramp.vue      | 111 ---------
 web/components/venatus-placement.vue  |  35 +++
 web/components/venatus-rich-media.vue |  25 +++
 web/composables/playwire-ramp.ts      |  92 --------
 web/composables/quantcast.ts          |   2 +-
 web/composables/venatus.ts            |  21 ++
 web/config.ts                         |   8 +-
 web/layouts/default.vue               |  23 +-
 web/pages/profile/_tag.vue            |   9 +
 web/renderer/+onRenderHtml.ts         |   4 +-
 web/renderer/app.ts                   |  12 +-
 16 files changed, 218 insertions(+), 475 deletions(-)
 delete mode 100644 web/components/playwire-ramp.vue
 create mode 100644 web/components/venatus-placement.vue
 create mode 100644 web/components/venatus-rich-media.vue
 delete mode 100644 web/composables/playwire-ramp.ts
 create mode 100644 web/composables/venatus.ts

diff --git a/web/assets/css/development.css b/web/assets/css/development.css
index 95b20e0f..c88bba24 100644
--- a/web/assets/css/development.css
+++ b/web/assets/css/development.css
@@ -1,7 +1,3 @@
-.dev .adsbygoogle {
-  @apply bg-pink-400;
-}
-
-.dev .adsbyplaywire {
+.dev .vm-placement {
   @apply bg-pink-400;
 }
diff --git a/web/assets/css/tailwind.css b/web/assets/css/tailwind.css
index 4b92a8aa..ef2594c0 100644
--- a/web/assets/css/tailwind.css
+++ b/web/assets/css/tailwind.css
@@ -34,11 +34,6 @@
   .card-prop-label {
     @apply text-left;
   }
-
-  /** ad root-class */
-  .ad-section {
-    @apply mt-4 text-center;
-  }
 }
 
 /* purgecss start ignore */
diff --git a/web/components.d.ts b/web/components.d.ts
index 95e16679..8dc7cd23 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -138,6 +138,8 @@ declare module 'vue' {
     TopBrawlersCard: typeof import('./components/top-brawlers-card.vue')['default']
     TopPlayersCard: typeof import('./components/top-players-card.vue')['default']
     TrophySliderSelect: typeof import('./components/trophy-slider-select.vue')['default']
+    VenatusPlacement: typeof import('./components/venatus-placement.vue')['default']
+    VenatusRichMedia: typeof import('./components/venatus-rich-media.vue')['default']
     VGini: typeof import('./components/klicker/v-gini.vue')['default']
     VLastUpdate: typeof import('./components/klicker/v-last-update.vue')['default']
     VMediaImg: typeof import('./components/klicker/v-media-img.vue')['default']
diff --git a/web/components/ad-cell.vue b/web/components/ad-cell.vue
index cf3bd1a2..ccbb1a1b 100644
--- a/web/components/ad-cell.vue
+++ b/web/components/ad-cell.vue
@@ -6,13 +6,7 @@
       hide-empty
       lazy
     >
-      <adsense
-        v-if="!isApp && !playwire"
-        :data-ad-slot="adSlot"
-        data-ad-client="ca-pub-6856963757796636"
-        data-full-width-responsive
-        class="text-center self-center w-full"
-      ></adsense>
+      <ad cell></ad>
     </b-dashboard-cell>
   </client-only>
 </template>
@@ -20,8 +14,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { BDashboardCell } from '@schneefux/klicker/components'
-import { useIsApp } from '~/composables/app'
-import { useConfig } from '~/composables/compat'
 
 export default defineComponent({
   components: {
@@ -36,23 +28,6 @@ export default defineComponent({
       type: Number,
       required: true
     },
-    adSlot: {
-      type: String,
-      required: true
-    },
-    instance: {
-      type: String
-    },
-  },
-  setup() {
-    const config = useConfig()
-    const playwire = config.playwireRampPublisherId
-    const { isApp } = useIsApp()
-
-    return {
-      isApp,
-      playwire,
-    }
   },
 })
 </script>
diff --git a/web/components/ad.vue b/web/components/ad.vue
index 16fa7cc2..69c8113e 100644
--- a/web/components/ad.vue
+++ b/web/components/ad.vue
@@ -1,96 +1,104 @@
 <template>
-  <client-only v-if="banner">
+  <template v-if="allowed">
     <div
-      v-if="allowed && !playwire"
+      v-if="banner"
       v-bind="$attrs"
       class="text-center -mx-4"
     >
-      <adsense
-        :data-ad-slot="adSlot"
-        :data-ad-region="adRegion"
-        data-ad-format=""
-        data-ad-client="ca-pub-6856963757796636"
-        class="banner-ad"
-      ></adsense>
+      <client-only>
+        <!-- Desktop - Article: 728x90, 970x90 -->
+        <venatus-placement
+          v-if="desktop"
+          ad-id="65f94ee2dd5aea6a13fd049f"
+          class="desktop-article"
+        ></venatus-placement>
+
+        <!-- Mobile - Leaderboard: 300x50, 320x50, 300x100, 320x100 -->
+        <venatus-placement
+          v-if="!desktop"
+          ad-id="65f94f6d767223575b4de5b3"
+          class="mobile-leaderboard"
+        ></venatus-placement>
+
+        <template v-slot:placeholder>
+          <div style="width: 100%; height: 100px;"></div>
+        </template>
+      </client-only>
     </div>
 
-    <template v-slot:placeholder>
-      <div
-        v-if="!playwire"
+    <!-- Desktop Side Rail: 300x250, 300x600, 160x600, 336x280 -->
+    <template v-else-if="scraper">
+      <venatus-placement
+        v-if="desktop && sideRailMaxWidth >= 160"
         v-bind="$attrs"
-        class="adswrapper ad-section banner-ad"
-      ></div>
+        :style="{ maxWidth: `${sideRailMaxWidth}px` }"
+        ad-id="65f94d27767223575b4de5af"
+        class="desktop-side-rail"
+      ></venatus-placement>
+    </template>
+
+    <template v-else-if="cell">
+      <!-- placeholder and lazy-loading are handled by cell wrapper-->
+
+      <!-- Desktop: unsupported for now due to this unit's unique responsive width (TODO) -->
+
+      <!-- Mobile - In-Content: 300x250, 336x280, 320x100, 300x100 -->
+      <venatus-placement
+        v-if="!desktop"
+        v-bind="$attrs"
+        ad-id="65f94f9ddd5aea6a13fd04a1"
+        class="mobile-incontent"
+      ></venatus-placement>
     </template>
-  </client-only>
-  <client-only v-else-if="scraper">
-    <adsense
-      v-if="allowed && scraperFits && !playwire"
-      v-bind="$attrs"
-      :data-ad-slot="adSlot"
-      :data-ad-region="adRegion"
-      data-ad-format=""
-      data-ad-client="ca-pub-6856963757796636"
-      class="scraper-ad"
-    ></adsense>
 
-    <template v-slot:placeholder>
-      <div
-        v-if="!playwire"
+    <template v-else-if="instream">
+      <venatus-placement
         v-bind="$attrs"
-        class="adswrapper ad-section scraper-ad"
-      ></div>
+        ad-id=""
+        id="vm-av"
+        data-format="isvideo"
+        class="aspect-video"
+      ></venatus-placement>
     </template>
-  </client-only>
-  <b-page-section
-    v-else
-    v-bind="$attrs"
-    ref="ad"
-    class="text-center -mx-4 lg:mx-0"
-  >
-    <client-only>
-      <playwire-ramp
-        v-if="allowed && visible && playwire"
-        :ad-id="adSlot"
-        :instance="instance"
-        :type="`${leaderboardFits ? 'leaderboard' : 'med_rect'}_${first ? 'atf' : 'btf'}`"
-        class="adsbyplaywire section-ad-pw"
-      ></playwire-ramp>
-      <adsense
-        v-if="allowed && visible && !playwire"
-        :data-ad-slot="adSlot"
-        :data-ad-region="adRegion"
-        data-ad-format="auto"
-        data-ad-client="ca-pub-6856963757796636"
-        class="w-full"
-      ></adsense>
 
-      <template v-slot:placeholder>
-        <div
-          class="adswrapper ad-section w-full"
-          style="height: 300px;"
-        ></div>
-      </template>
-    </client-only>
-  </b-page-section>
+    <b-page-section
+      v-else
+      v-bind="$attrs"
+      ref="ad"
+      class="text-center -mx-4 lg:mx-0"
+    >
+      <client-only>
+        <!-- Desktop - In-Content: 300x250, 336x280, 728x90 -->
+        <venatus-placement
+          v-if="desktop && visible"
+          ad-id="65f94d69767223575b4de5b1"
+          class="desktop-incontent"
+        ></venatus-placement>
+
+        <!-- Mobile - In-Content: 300x250, 336x280, 320x100, 300x100 -->
+        <venatus-placement
+          v-if="!desktop && visible"
+          ad-id="65f94f9ddd5aea6a13fd04a1"
+          class="mobile-incontent"
+        ></venatus-placement>
+
+        <template v-slot:placeholder>
+          <div style="width: 100%; height: 280px;"></div>
+        </template>
+      </client-only>
+    </b-page-section>
+  </template>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from 'vue'
-import { useBreakpoints, useIntersectionObserver } from '@vueuse/core'
+import { defineComponent, computed, ref, onMounted, watch } from 'vue'
+import { useBreakpoints, useIntersectionObserver, useElementSize, useWindowSize } from '@vueuse/core'
 import { useIsApp } from '~/composables/app'
-import { useConfig } from '~/composables/compat'
 import { useRoute } from 'vue-router'
 
 export default defineComponent({
   inheritAttrs: false,
   props: {
-    adSlot: {
-      type: String,
-      required: true
-    },
-    instance: {
-      type: String
-    },
     first: {
       type: Boolean,
       default: false
@@ -107,6 +115,14 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    cell: {
+      type: Boolean,
+      default: false
+    },
+    instream: {
+      type: Boolean,
+      default: false
+    },
   },
   setup(props) {
     const ad = ref<HTMLElement>()
@@ -130,155 +146,54 @@ export default defineComponent({
       }
     }
 
-    const config = useConfig()
-    const playwire = config.playwireRampPublisherId != ''
-
     const breakpoints = useBreakpoints({
-      leaderboard: 728,
-      scraper: 1900,
+      desktop: 728,
     })
-    // all false in SSR
-    const leaderboardFits = breakpoints.greaterOrEqual('leaderboard')
-    const scraperFits = breakpoints.greaterOrEqual('scraper')
+    const desktop = breakpoints.greaterOrEqual('desktop')
 
     const route = useRoute()
-    const adRegion = computed(() => route.fullPath)
+    const sideRailMaxWidth = ref(0)
+    watch(route, () => {
+      const mainEl = document.querySelector('main')!
+      // on desktop (1920px), most pages' main is 1536px
+      // use 32px margin (4*8px) so that the 160px unit fits perfectly
+      sideRailMaxWidth.value = (window.innerWidth - mainEl.clientWidth) / 2 - 32
+    })
 
     return {
       ad,
-      adRegion,
       visible,
       allowed,
-      playwire,
-      scraperFits,
-      leaderboardFits,
+      desktop,
+      sideRailMaxWidth,
     }
   },
 })
 </script>
 
-<style lang="postcss">
-/*
- * Playwire mobile leaderboard:
- *  - 320x50
- *  - 320x100
- */
-
-.banner-ad {
-  width: 320px;
-  height: 100px;
-}
-
-.banner-ad-pw {
-  min-height: 100px;
+<style lang="postcss" scoped>
+.dev .desktop-article {
+  width: 970px;
+  height: 90px;
 }
 
-@media(min-width: 468px) {
-  .banner-ad {
-    width: 468px;
-  }
-}
-
-/*
- * Playwire desktop leaderboard:
- *  - 728x90
- *  - 970x250 (billboard; too tall)
- *  - 970x90
- */
-
-@media(min-width: 728px) {
-  .banner-ad {
-    width: 728px;
-  }
-}
-
-@media(min-width: 750px) {
-  .banner-ad {
-    width: 750px;
-  }
-}
-
-
-@media(min-width: 970px) {
-  .banner-ad {
-    width: 970px;
-    height: 180px;
-  }
-}
-
-@media(min-width: 980px) {
-  .banner-ad {
-    width: 980px;
-    height: 180px;
-  }
-}
-
-/*
- * Playwire desktop skyscraper:
- *  - 160x600
- *  - 300x600
- */
-.scraper-ad {
-  min-height: 600px;
-}
-
-/* fill container margins */
-@media(min-width: 1900px) {
-  .scraper-ad {
-    width: 160px;
-  }
-}
-
-@media(min-width: 2200px) {
-  .scraper-ad {
-    width: 300px;
-  }
-}
-
-/*
- * Playwire medium rectangle:
- *  - 300x250
- *  - 300x600 (half page)
- *  - 320x50
- */
-
-/*
- * Section ad: Large rectangle on mobile, Billboard on desktop
- */
-.section-ad {
-  height: 250px;
+.dev .mobile-leaderboard {
   width: 320px;
+  height: 100px;
 }
 
-/*
- * Required by playwire:
- * Set a min-height of 100px for mobile
- * and 250px for desktop
- */
-.section-ad-pw {
-  min-height: 100px;
-}
-
-@media(min-width: 468px) {
-  .section-ad {
-    width: 468px;
-  }
+.dev .desktop-side-rail {
+  width: 336px;
+  height: 600px;
 }
 
-@media(min-width: 728px) {
-  .section-ad {
-    height: 280px;
-    width: 728px;
-  }
-
-  .section-ad-pw {
-    min-height: 250px;
-  }
+.dev .desktop-incontent {
+  width: 728px;
+  height: 280px;
 }
 
-@media(min-width: 970px) {
-  .section-ad {
-    width: 970px;
-  }
+.dev .mobile-incontent {
+  width: 336px;
+  height: 280px;
 }
 </style>
diff --git a/web/components/playwire-ramp.vue b/web/components/playwire-ramp.vue
deleted file mode 100644
index 9b2708db..00000000
--- a/web/components/playwire-ramp.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <ins
-    :id="id"
-    class="inline-block"
-  ></ins>
-</template>
-
-<script lang="ts">
-import { ref, defineComponent, onMounted, onUnmounted, PropType } from 'vue'
-import { TaggedType } from '~/composables/playwire-ramp'
-
-export default defineComponent({
-  props: {
-    adId: {
-      type: String,
-      required: true
-    },
-    instance: {
-      type: String,
-      default: '1'
-    },
-    type: {
-      type: String as PropType<TaggedType>,
-      required: true
-    },
-  },
-  setup(props) {
-    const id = `pw-${props.adId}-${props.instance}`
-    const activeSlot = ref<string>()
-
-    const addAdFun = () => {
-      window.ramp
-        .addUnits([{
-          type: props.type,
-          selectorId: id,
-        }])
-        .then(() => {
-          for (const slotName in window.ramp.settings.slots) {
-            const slot = window.ramp.settings.slots[slotName]
-            if (slot.element && slot.element.parentElement && slot.element.parentElement.id == id) {
-              activeSlot.value = slotName
-            }
-          }
-        })
-        .catch((e: any) => console.warn(e))
-        .finally(() => window.ramp.displayUnits())
-    }
-
-    const removeAdFun = () => {
-      if (activeSlot.value) {
-        window.ramp.destroyUnits(activeSlot.value)
-          .then(() => activeSlot.value = undefined)
-          .catch((e: any) => console.warn(e))
-      }
-    }
-
-    onMounted(() => {
-      if (window.ramp.que.includes(removeAdFun)) {
-        // see below
-        window.ramp.que = window.ramp.que.filter((f) => f != removeAdFun)
-      } else {
-        if (!window.ramp.que.includes(addAdFun)) {
-          window.ramp.que.push(addAdFun);
-        }
-      }
-    })
-
-    onUnmounted(() => {
-      if (window.ramp.que.includes(addAdFun)) {
-        // insert & immediate remove does not work due to async issue, so skip both
-        window.ramp.que = window.ramp.que.filter((f) => f != addAdFun)
-      } else {
-        if (!window.ramp.que.includes(removeAdFun)) {
-          window.ramp.que.push(removeAdFun)
-        }
-      }
-    })
-
-    return {
-      id,
-    }
-  },
-})
-</script>
-
-<style lang="postcss">
-#pw-oop-bottom_rail {
-  /* push bottom rail above sticky footer (global style) */
-  @apply max-md:bottom-14 !important;
-  /* remove padding which pushes the unit out of the container (?) */
-  @apply pt-0 !important;
-}
-
-#tyche_trendi_video_container {
-  /* push video player above bottom rail and sticky footer */
-  @apply max-md:bottom-[115px] !important; /* 3.5rem (14) for footer + 50px for rail + 0.5rem padding */
-}
-
-.pw-sticky {
-  /* push sticky in-content ads below sticky header elements */
-  @apply max-md:top-28 !important; /* 3rem (12) for scroll spy nav + 3.5rem (14) for sticky header + 0.5rem (2) padding */
-}
-
-/* add paddings to bottom of the page so that the rail (106px) does not overlap any content */
-#main {
-  @apply max-md:mb-[106px] !important;
-}
-#footer {
-  @apply md:pb-[calc(106px+16px)] !important;
-}
-</style>
diff --git a/web/components/venatus-placement.vue b/web/components/venatus-placement.vue
new file mode 100644
index 00000000..43284980
--- /dev/null
+++ b/web/components/venatus-placement.vue
@@ -0,0 +1,35 @@
+<template>
+  <div
+    :ref="el => updateVm(el)"
+    :data-id="adId"
+    class="vm-placement"
+  ></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    adId: {
+      type: String,
+      required: true
+    },
+  },
+  setup() {
+    const updateVm = (el: any) => {
+      if (el != null) {
+        window.top!.__vm_add = window.top!.__vm_add || []
+        window.top!.__vm_add.push(el)
+      } else {
+        window.top!.__vm_remove = window.top!.__vm_remove || []
+        window.top!.__vm_remove.push(el)
+      }
+    }
+
+    return {
+      updateVm,
+    }
+  },
+})
+</script>
diff --git a/web/components/venatus-rich-media.vue b/web/components/venatus-rich-media.vue
new file mode 100644
index 00000000..8f1381d4
--- /dev/null
+++ b/web/components/venatus-rich-media.vue
@@ -0,0 +1,25 @@
+<template>
+  <!-- Stickies -->
+  <venatus-placement
+    ad-id="65f9504e767223575b4de5b7"
+    class="hidden"
+  ></venatus-placement>
+  <!-- Instream -->
+  <venatus-placement
+    ad-id="65f9505add5aea6a13fd04ab"
+    class="hidden"
+  ></venatus-placement>
+</template>
+
+<script lang="ts">
+import { defineComponent, onUnmounted } from 'vue'
+
+export default defineComponent({
+  setup() {
+    onUnmounted(() => {
+      window.top!.__vm_remove_category = window.top!.__vm_remove_category || []
+      window.top!.__vm_remove_category.push('richmedia_all')
+    })
+  },
+})
+</script>
diff --git a/web/composables/playwire-ramp.ts b/web/composables/playwire-ramp.ts
deleted file mode 100644
index 50b1c59e..00000000
--- a/web/composables/playwire-ramp.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useRoute } from "vue-router";
-import { watch } from "vue"
-import { useMeta } from "./compat";
-
-export type TaggedType = 'leaderboard_atf' | 'leaderboard_btf' | 'med_rect_atf' | 'med_rect_btf' | 'sky_atf' | 'sky_btf'
-export type TaglessType = 'trendi_video' | 'corner_ad_video' | 'site_skin' | 'flex_leaderboard' | 'right_rail' | 'bottom_rail' | 'left_rail' | 'in_content' | 'sidebar' | 'sticky_sidebar'
-
-interface TaggedUnit {
-  type: TaggedType
-  selectorId: string
-}
-
-interface TaglessUnit {
-  type: TaglessType
-}
-
-type Unit = TaggedUnit | TaglessUnit
-
-declare global {
-  interface Window {
-    ramp: {
-      passiveMode: boolean;
-      addUnits: (units: Unit[]) => Promise<void>;
-      settings: Record<string, any>;
-      displayUnits: () => void;
-      getUnits: () => Unit[];
-      destroyUnits: (units: 'all'|string|string[]) => Promise<void>;
-      setPath: (path?: string) => Promise<void>;
-      triggerRefresh: () => void;
-      showCmpModal: () => void;
-      onReady: (callback: () => void) => void;
-      onPlayerReady: (callback: () => void) => void;
-      que: (() => void)[];
-    };
-  }
-}
-
-export function usePlaywireRamp(publisherId: string, siteId: string) {
-  const outOfPageUnits = ([
-    'trendi_video',
-    'corner_ad_video',
-    'site_skin',
-    'flex_leaderboard',
-    'right_rail',
-    'bottom_rail',
-    'left_rail',
-    // 'in_content',
-    'sidebar',
-    'sticky_sidebar',
-  ] satisfies TaglessType[]).map(unit => ({ type: unit }) satisfies TaglessUnit)
-
-  const route = useRoute()
-
-  watch(() => route.path, () => {
-    // do not refresh ads when just the params or the hash changes
-    if (import.meta.env.SSR) {
-      return
-    }
-
-    window.ramp.que.push(async () => {
-      let slotsToRemove: string[] = []
-      Object.entries(window.ramp.settings.slots).forEach(([slotName, slot]: [string, any]) => {
-        if (outOfPageUnits.some(unit => unit.type == slot.type) || slot.videoType === 'Bolt Player') {
-          slotsToRemove.push(slotName)
-        }
-      })
-
-      await window.ramp.destroyUnits(slotsToRemove)
-      await window.ramp.setPath(route.path)
-      await window.ramp.addUnits(outOfPageUnits)
-      await window.ramp.displayUnits()
-    })
-  }, { immediate: true })
-
-  useMeta(() => ({
-    script: [ {
-      key: 'playwire-ramp-init',
-      type: 'text/javascript',
-      innerHTML: `
-        window.ramp = window.ramp || {};
-        window.ramp.que = window.ramp.que || [];
-        window.ramp.passiveMode = true;
-      `.replace(/\s+/g, ' '),
-      tagPriority: 31,
-    }, {
-      key: 'playwire-ramp',
-      src: `//cdn.intergient.com/${publisherId}/${siteId}/ramp.js`,
-      async: true,
-      tagPriority: 31,
-    } ],
-  }))
-}
diff --git a/web/composables/quantcast.ts b/web/composables/quantcast.ts
index 7893cab4..ee3183ef 100644
--- a/web/composables/quantcast.ts
+++ b/web/composables/quantcast.ts
@@ -8,7 +8,7 @@ export function useQuantcast(quantcastChoiceId: string) {
       key: 'quantcast-choice-init',
       type: 'text/javascript',
       async: true,
-      tagPriority: 29, // load before playwire-ramp
+      tagPriority: 29, // load before ad scripts
       innerHTML: `
 (function() {
   var uspTries = 0;
diff --git a/web/composables/venatus.ts b/web/composables/venatus.ts
new file mode 100644
index 00000000..8b93f816
--- /dev/null
+++ b/web/composables/venatus.ts
@@ -0,0 +1,21 @@
+import { useMeta } from "./compat";
+
+declare global {
+  interface Window {
+    __vm_add: HTMLElement[];
+    __vm_remove: HTMLElement[];
+    __vm_remove_category: string[];
+  }
+}
+
+export function useVenatus(siteId: string) {
+  useMeta(() => ({
+    script: [ {
+      key: 'venatus',
+      src: `https://hb.vntsm.com/v3/live/ad-manager.min.js`,
+      'data-site-id': siteId,
+      'data-mode': 'scan',
+      tagPriority: 31,
+    } ],
+  }))
+}
diff --git a/web/config.ts b/web/config.ts
index a030b900..c5541503 100644
--- a/web/config.ts
+++ b/web/config.ts
@@ -6,9 +6,7 @@ export interface Config {
   ga4Id: string
   adsensePubid: string
   sentryDsn: string
-  playwireRampPublisherId: string
-  playwireRampSiteId: string
-  playwireRampGa4Id: string
+  venatusSiteId: string
   quantcastChoiceId: string
   traduora?: {
     url: string
@@ -24,9 +22,7 @@ export const config: Config = {
   renderUrl: process.env.RENDER_URL ?? '',
   ga4Id: process.env.GA4_ID ?? '',
   adsensePubid: process.env.ADSENSE_PUBID ?? '',
-  playwireRampPublisherId: process.env.PLAYWIRE_RAMP_PUBLISHER_ID ?? '',
-  playwireRampSiteId: process.env.PLAYWIRE_RAMP_SITE_ID ?? '',
-  playwireRampGa4Id: process.env.PLAYWIRE_RAMP_GA4_ID ?? '',
+  venatusSiteId: process.env.VENATUS_SITE_ID ?? '',
   quantcastChoiceId: process.env.QUANTCAST_CHOICE_ID ?? '',
   sentryDsn: process.env.SENTRY_DSN ?? '',
   traduora: undefined,
diff --git a/web/layouts/default.vue b/web/layouts/default.vue
index 73c046d3..45ea79e1 100644
--- a/web/layouts/default.vue
+++ b/web/layouts/default.vue
@@ -38,19 +38,18 @@
     </b-web-footer>
 
     <adblock-bait></adblock-bait>
+    <venatus-rich-media></venatus-rich-media>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
-import { useMutationObserver } from '@vueuse/core'
 import { BWebFooter } from '@schneefux/klicker/components'
 import { useInstallPromptListeners } from '~/composables/app'
 import { useI18n } from 'vue-i18n'
 import { useConfig, useLocaleCookieRedirect, useLocalePath } from '~/composables/compat'
-import { usePlaywireRamp } from '~/composables/playwire-ramp'
 import { useQuantcast } from '~/composables/quantcast'
-import { useAdsense } from '~/composables/adsense'
+import { useVenatus } from '~/composables/venatus'
 
 export default defineComponent({
   components: {
@@ -77,24 +76,12 @@ export default defineComponent({
       target: localePath('/about'),
     }])
 
-    useMutationObserver(container, () => {
-      // workaround for AdSense overriding min-height: 0px
-      // https://weblog.west-wind.com/posts/2020/May/25/Fixing-Adsense-Injecting-height-auto-important-into-scrolled-Containers
-      // wtf Google
-      container.value!.style.minHeight = ''
-    }, {
-      attributes: true,
-      attributeFilter: ['style'],
-    })
-
     useInstallPromptListeners()
     useLocaleCookieRedirect()
 
-    const enablePlaywire = config.playwireRampPublisherId != ''
-    if (enablePlaywire) {
-      usePlaywireRamp(config.playwireRampPublisherId, config.playwireRampSiteId)
-    } else {
-      useAdsense(config.adsensePubid)
+    const enableVenatus = config.venatusSiteId != ''
+    if (enableVenatus) {
+      useVenatus(config.venatusSiteId)
     }
 
     useQuantcast(config.quantcastChoiceId)
diff --git a/web/pages/profile/_tag.vue b/web/pages/profile/_tag.vue
index 0916e214..1f066733 100644
--- a/web/pages/profile/_tag.vue
+++ b/web/pages/profile/_tag.vue
@@ -54,6 +54,15 @@
         ></player-time-statistics>
       </b-page-section>
 
+      <b-page-section
+        id="instream"
+      >
+        <ad
+          instream
+          style="width: 100%; max-width: 400px;"
+        ></ad>
+      </b-page-section>
+
       <b-page-section
         id="trophy"
         ref="trophySection"
diff --git a/web/renderer/+onRenderHtml.ts b/web/renderer/+onRenderHtml.ts
index a65671d4..1b8946b8 100644
--- a/web/renderer/+onRenderHtml.ts
+++ b/web/renderer/+onRenderHtml.ts
@@ -2,7 +2,7 @@ import { renderToString } from '@vue/server-renderer'
 import { dangerouslySkipEscape, escapeInject } from 'vike/server'
 import { createApp } from './app'
 import type { PageContext } from './types'
-import type { PageContextBuiltInServer } from 'vike/types'
+import type { PageContextServer } from 'vike/types'
 import { dehydrate } from '@tanstack/vue-query'
 import { renderSSRHead } from '@unhead/ssr'
 import SuperJSON from 'superjson'
@@ -11,7 +11,7 @@ import { SentryInjectionKey } from './sentry'
 
 export { onRenderHtml }
 
-async function onRenderHtml(pageContext: PageContextBuiltInServer & PageContext) {
+async function onRenderHtml(pageContext: PageContextServer & PageContext) {
   const { app, head, pinia, router, queryClient } = createApp(pageContext)
 
   app.provide(SentryInjectionKey, pageContext.sentry as any)
diff --git a/web/renderer/app.ts b/web/renderer/app.ts
index 41317ac5..d3ea9d59 100644
--- a/web/renderer/app.ts
+++ b/web/renderer/app.ts
@@ -6,7 +6,7 @@ import type { PageContext } from './types'
 import { setPageContext } from '../composables/page-context'
 import { createPinia } from 'pinia'
 import { createPersistedState } from 'pinia-plugin-persistedstate'
-import VueGtagPlugin, { event, query } from 'vue-gtag'
+import VueGtagPlugin, { query } from 'vue-gtag'
 import { createI18n, I18n } from 'vue-i18n'
 import { ClientOnly } from '@schneefux/klicker/components'
 import Adsense from '~/components/adsense.vue'
@@ -154,18 +154,8 @@ function createApp(pageContext: PageContext) {
     config: {
       id: pageContext.envConfig.ga4Id,
     },
-    includes: [ {
-      id: pageContext.envConfig.playwireRampGa4Id,
-      params: {
-        'send_page_view': false,
-      },
-    } ],
     onReady() {
       query('js', new Date())
-      event('ramp_js', {
-        'send_to': pageContext.envConfig.playwireRampGa4Id,
-        'pageview_id': `${Date.now()}`,
-      })
     },
   }, router)