feat: add advertising demo and module

storipress · Mar 29, 2023 · 6b6ebce · 6b6ebce
1 parent 2759748
commit 6b6ebce
Show file tree

Hide file tree

Showing 15 changed files with 7,139 additions and 0 deletions.
diff --git a/playground/app.vue b/playground/app.vue
@@ -0,0 +1,4 @@
+<template>
+  <NuxtPage />
+</template>
+<script setup></script>
diff --git a/playground/nuxt.config.js b/playground/nuxt.config.js
@@ -0,0 +1,3 @@
+export default defineNuxtConfig({
+  modules: ['../src/nuxt.ts'],
+})
diff --git a/playground/package.json b/playground/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@storipress/vue-advertising-playground",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "nuxt dev"
+  },
+  "files": [
+    "dist/**/*",
+    "!dist/**/*.test.d.ts",
+    "!dist/**/*.test.mjs",
+    "!dist/**/__snapshots__/**"
+  ],
+  "dependencies": {
+    "@guanghechen/fast-deep-equal": "^2.2.4",
+    "@vueuse/core": "^9.13.0",
+    "vue3-lazy-hydration": "^1.2.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "@nuxt/kit": "^3.3.2",
+    "@unhead/vue": "1.1.25",
+    "happy-dom": "8.9.0",
+    "nuxt": "^3.3.2",
+    "sass": "1.60.0",
+    "typescript": "5.0.2",
+    "unbuild": "1.1.2",
+    "vite": "4.2.1",
+    "vitest": "0.29.7",
+    "vue": "3.2.47"
+  }
+}
diff --git a/playground/pages/advertising-ssr/gpt.vue b/playground/pages/advertising-ssr/gpt.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { gptConfig, gptConfig2 } from '../config'
+import { useToggle } from '@vueuse/core'
+
+const [value, toggle] = useToggle()
+</script>
+
+<template>
+  <div><NuxtLink to="/advertising-ssr/">To prev</NuxtLink></div>
+  <GlobalAdvertisingProvider :config="value ? gptConfig : gptConfig2">
+    <div :style="{ height: '100vh', position: 'relative' }">
+      <button @click="toggle()">click to change config</button>
+      <GlobalAdvertisingSlot id="banner-ad" :is-sticky="true" />
+    </div>
+  </GlobalAdvertisingProvider>
+  <div :style="{ marginTop: '100vh' }">test bottom</div>
+</template>
diff --git a/playground/pages/advertising-ssr/index.vue b/playground/pages/advertising-ssr/index.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>
+    <NuxtLink to="/">To home </NuxtLink>
+  </div>
+  <br />
+  <div>
+    <a href="/advertising-ssr/gpt">To gpt </a>
+  </div>
+  <div>
+    <a href="/advertising-ssr/prebid">To prebid </a>
+  </div>
+</template>
diff --git a/playground/pages/advertising-ssr/prebid.vue b/playground/pages/advertising-ssr/prebid.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { prebidConfig } from '../config'
+</script>
+
+<template>
+  <div>
+    <div><NuxtLink to="/advertising-ssr/">To prev</NuxtLink></div>
+    <GlobalAdvertisingProvider :config="prebidConfig" :is-prebid="true">
+      <div>
+        <h1>Hello World</h1>
+        <GlobalAdvertisingSlot id="banner-ad" />
+        <GlobalAdvertisingSlot id="prebid-2" />
+      </div>
+    </GlobalAdvertisingProvider>
+  </div>
+</template>
diff --git a/playground/pages/advertising/customEvent.vue b/playground/pages/advertising/customEvent.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { gptConfig } from '../config'
+import { ref, onBeforeMount } from 'vue'
+import { useHead } from '@unhead/vue'
+
+const backgroundColor = ref('red')
+const blueBackground = () => {
+  backgroundColor.value = 'blue'
+}
+
+onBeforeMount(() => {
+  useHead({
+    script: [{ children: 'parent.postMessage("BlueBackground:banner-ad", "*")' }],
+  })
+})
+</script>
+
+<template>
+  <div>
+    <div><NuxtLink to="/advertising/">To prev</NuxtLink></div>
+    <AdvertisingProvider :config="gptConfig">
+      <div :style="{ backgroundColor }">
+        <h1>Hello World</h1>
+        <AdvertisingSlot id="banner-ad" :custom-event-handlers="{ blueBackground }" />
+      </div>
+    </AdvertisingProvider>
+  </div>
+</template>
diff --git a/playground/pages/advertising/gpt.vue b/playground/pages/advertising/gpt.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { gptConfig, gptConfig2 } from '../config'
+import { useToggle } from '@vueuse/core'
+
+const [value, toggle] = useToggle()
+</script>
+
+<template>
+  <div><NuxtLink to="/advertising/">To prev</NuxtLink></div>
+  <AdvertisingProvider :config="value ? gptConfig : gptConfig2">
+    <div :style="{ height: '100vh', position: 'relative' }">
+      <button @click="toggle()">click to change config</button>
+      <AdvertisingSlot id="banner-ad" :is-sticky="true" />
+    </div>
+    <div :style="{ marginTop: '100vh' }">test bottom</div>
+  </AdvertisingProvider>
+</template>
diff --git a/playground/pages/advertising/index.vue b/playground/pages/advertising/index.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>
+    <NuxtLink to="/">To home </NuxtLink>
+  </div>
+  <br />
+  <div>
+    <a href="/advertising/gpt">To gpt </a>
+  </div>
+  <div>
+    <a href="/advertising/prebid">To prebid </a>
+  </div>
+  <div>
+    <a href="/advertising/lazyload">To lazyload </a>
+  </div>
+  <div>
+    <a href="/advertising/customEvent">To customEvent </a>
+  </div>
+</template>
diff --git a/playground/pages/advertising/lazyload.vue b/playground/pages/advertising/lazyload.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { lazyloadConfig } from '../config'
+</script>
+
+<template>
+  <div>
+    <div><NuxtLink to="/advertising/">To prev</NuxtLink></div>
+    <AdvertisingProvider :config="lazyloadConfig">
+      <div>
+        <h1>Hello World</h1>
+        <AdvertisingSlot id="gpt-ad01" />
+        <div :style="{ height: '100vh' }" />
+        <AdvertisingSlot id="gpt-ad02" />
+        <div :style="{ height: '100vh' }" />
+        <AdvertisingSlot id="gpt-ad03" />
+        <div :style="{ height: '100vh' }" />
+        <AdvertisingSlot id="gpt-ad04" />
+      </div>
+    </AdvertisingProvider>
+  </div>
+</template>
diff --git a/playground/pages/advertising/prebid.vue b/playground/pages/advertising/prebid.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { prebidConfig } from '../config'
+</script>
+
+<template>
+  <div>
+    <div><NuxtLink to="/advertising/">To prev</NuxtLink></div>
+    <AdvertisingProvider :config="prebidConfig" :is-prebid="true">
+      <div>
+        <h1>Hello World</h1>
+        <AdvertisingSlot id="banner-ad" />
+        <AdvertisingSlot id="prebid-2" />
+      </div>
+    </AdvertisingProvider>
+  </div>
+</template>
diff --git a/playground/pages/config.ts b/playground/pages/config.ts
@@ -0,0 +1,124 @@
+const gptConfig = {
+  slots: [
+    {
+      id: 'banner-ad',
+      path: '/6355419/Travel/Europe/France/Paris',
+      sizes: [[300, 250]],
+    },
+  ],
+  usePrebid: false,
+  useAPS: false,
+  customEvents: {
+    blueBackground: {
+      eventMessagePrefix: 'BlueBackground:',
+    },
+  },
+}
+
+const gptConfig2 = {
+  slots: [
+    {
+      id: 'banner-ad',
+      path: '/6355419/Travel/Europe/France/Paris',
+      sizes: [[728, 90]],
+    },
+  ],
+  usePrebid: false,
+  useAPS: false,
+  customEvents: {
+    blueBackground: {
+      eventMessagePrefix: 'BlueBackground:',
+    },
+  },
+}
+
+const div_1_sizes = [
+  [300, 250],
+  [300, 600],
+]
+const div_2_sizes = [
+  [728, 90],
+  [970, 250],
+]
+
+const prebidConfig = {
+  slots: [
+    {
+      id: 'banner-ad',
+      path: '/19968336/header-bid-tag-1',
+      sizes: div_2_sizes,
+      prebid: [
+        {
+          mediaTypes: {
+            banner: {
+              sizes: div_2_sizes,
+            },
+          },
+          bids: [
+            {
+              bidder: 'appnexus',
+              params: {
+                placementId: 13144370,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'prebid-2',
+      path: '/19968336/header-bid-tag-0',
+      sizes: div_1_sizes,
+      prebid: [
+        {
+          mediaTypes: {
+            banner: {
+              sizes: div_1_sizes,
+            },
+          },
+          bids: [
+            {
+              bidder: 'appnexus',
+              params: {
+                placementId: 13144370,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  usePrebid: true,
+  useAPS: false,
+}
+
+const lazyloadConfig = {
+  slots: [
+    {
+      id: 'gpt-ad01',
+      path: '/6355419/Travel/Europe/France',
+      sizes: [[728, 90]],
+    },
+    {
+      id: 'gpt-ad02',
+      path: '/6355419/Travel/Europe/Spain',
+      sizes: [[728, 90]],
+    },
+    {
+      id: 'gpt-ad03',
+      path: '/6355419/Travel/Europe/Italy',
+      sizes: [[728, 90]],
+    },
+    {
+      id: 'gpt-ad04',
+      path: '/6355419/Travel/Europe/Portugal',
+      sizes: [[728, 90]],
+    },
+  ],
+  enableLazyLoad: true,
+  targeting: {
+    test: 'lazyload',
+  },
+}
+
+export { gptConfig, gptConfig2, prebidConfig, lazyloadConfig }
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>
+    <NuxtLink to="/advertising">To advertising </NuxtLink>
+  </div>
+  <div>
+    <NuxtLink to="/advertising-ssr">To advertising SSR </NuxtLink>
+  </div>
+</template>