feat: Add full click area option

Author: hogekai

README.md

@@ -528,6 +528,19 @@ inRenderer.render("ad-unit-1", bid, {
 });
 ```
 
+#### Enable Full-Click area
+
+Devices with screen widths of 500px or less supplement clicks by default for only the Learn More button, but you can disable that behavior and enable supplemental clicks for the entire area.
+
+- `fullClickArea`
+
+```js
+var inRenderer = new InRenderer();
+inRenderer.render("ad-unit-1", bid, {
+  fullClickArea: true
+});
+```
+
 ## From the Developer
 
 Recently, I've felt that the open-source community in web ad technology has been stagnating. While there are various factors contributing to this, I don't want to accept this situation as it is. I plan to develop various modern solutions, from small to large scale, to energize this industry.

README_ja.md

@@ -486,6 +486,19 @@ inRenderer.render("ad-unit-1", bid, {
 });
 ```
 
+#### スマホでのフルクリック領域を有効にする
+
+画面幅が500px以下のデバイスではデフォルトで詳細を見るボタンのみに対してクリックを補足しますが、その動作を無効にして、全領域でクリックを補足することを有効にできます。
+
+- `fullClickArea`
+
+```js
+var inRenderer = new InRenderer();
+inRenderer.render("ad-unit-1", bid, {
+  fullClickArea: true
+});
+```
+
 ## 開発者から
 
 最近、Webのアドテクノロジーでオープンソースコミュニティが停滞していると感じています。様々な要因があると思いますが、私はこの状況をよしとはしたくありません。これから小規模から大規模まで、様々なモダンなソリューションを開発し、この業界を盛り上げたいと考えています。

src/InRenderer.ts

@@ -32,6 +32,7 @@ export class InRenderer {
       videoRenderApplicationService.render(target, bid, {
         logo: options.logo,
         onImpressionViewable: options.onImpressionViewable,
+        fullClickArea: options.fullClickArea,
       });
     } else if (bid.mediaType === "banner") {
       const bannerRenderApplicationService = new BannerRenderApplicationService(

src/VideoRenderApplicationService.ts

@@ -33,7 +33,7 @@ export class VideoRenderApplicationService {
       );
 
       const videoAdRender = new VideoAdRender(this.viewableTracker);
-      videoAdRender.render(targetElement, bid, fluidPlayer);
+      videoAdRender.render(targetElement, bid, fluidPlayer, options.fullClickArea);
       this.viewableTracker.trackViewableVideo50(targetElement, () => {
         if (options.onImpressionViewable) {
           options.onImpressionViewable();

src/core/VideoAdRender.ts

@@ -13,9 +13,10 @@ export class VideoAdRender {
   public render(
     targetElement: HTMLDivElement,
     bid: VideoBid,
-    videoPlayer: IVideoPlayer
+    videoPlayer: IVideoPlayer,
+    fullClickArea?: boolean
   ) {
-    this.renderContainer(targetElement, bid);
+    this.renderContainer(targetElement, bid, fullClickArea);
 
     this.viewableTracker.trackViewable(targetElement, () => {
       videoPlayer.play();
@@ -34,13 +35,17 @@ export class VideoAdRender {
     });
   }
 
-  private renderContainer(targetElement: HTMLDivElement, bid: VideoBid) {
+  private renderContainer(targetElement: HTMLDivElement, bid: VideoBid, fullClickArea?: boolean) {
     const aspectRatio = bid.playerHeight / bid.playerWidth;
 
     targetElement.style.display = "block";
     targetElement.style.maxWidth = `${bid.playerWidth}px`;
     targetElement.style.width = "100%";
 
+    if (fullClickArea) {
+      targetElement.classList.add("full-click-area");
+    }
+
     const containerWidth = targetElement.offsetWidth;
     const height = containerWidth * aspectRatio;
     targetElement.style.height = height + "px";

src/style/InRenderer.css

@@ -130,3 +130,15 @@
     }
   }
 }
+
+.full-click-area {
+  .fluid_player_layout_in-renderer-js {
+
+    @media (max-width: 500px) {
+      .vast_clickthrough_layer {
+        height: 100% !important;
+      }
+    }
+
+  }
+}

src/type/index.ts

@@ -6,6 +6,7 @@ type LogoOption = {
 export type VideoRenderOptions = {
   logo?: LogoOption;
   onImpressionViewable?: () => void;
+  fullClickArea?: boolean;
 };
 
 export type FluidPlayerFactoryOptions = {
@@ -27,11 +28,13 @@ export type InRendererOptions = {
   clickThrough?: string;
   logo?: LogoOption;
   onImpressionViewable?: () => void;
+  fullClickArea?: boolean;
 };
 
 export type InVideoRendererOptions = {
   onImpressionViewable?: () => void;
   logo?: LogoOption;
+  fullClickArea?: boolean;
 };
 
 export type InNativeRendererOptions = {

test/integration/e2e/video.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>InRenderer.js Video Test Page</title>
 
-    <script async src="./resource/prebid.js"></script>
+    <script async src="https://cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
 
     <script type="module">
       import { InRenderer } from "@/InRenderer";
@@ -29,7 +29,9 @@
             url: "./resource/fakeRenderer.js",
             render: (bid) => {
               const inRenderer = new InRenderer();
-              inRenderer.render("video", bid);
+              inRenderer.render("video", bid, {
+                fullClickArea: true
+              });
             },
           },
           bids: [
@@ -38,6 +40,7 @@
               params: {
                 placement: "123",
                 site: 123,
+                test: true
               },
             },
           ],

test/unit/VideoAdRender.test.ts

@@ -8,7 +8,7 @@ describe("Video ad render", () => {
   });
 
   // render video ad container
-  it("動画広告コンテナが描画される", async () => {
+  it("render video ad container", async () => {
     const target = document.getElementById("target") as HTMLDivElement;
     Object.defineProperty(target, "offsetWidth", {
       get: vi.fn().mockReturnValue(640),
@@ -33,6 +33,28 @@ describe("Video ad render", () => {
     expect(target.style.display).toBe("block");
   });
 
+  it("render full click area", async () => {
+    const target = document.getElementById("target") as HTMLDivElement;
+    Object.defineProperty(target, "offsetWidth", {
+      get: vi.fn().mockReturnValue(640),
+    });
+    const player = {
+      play: vi.fn(),
+      pause: vi.fn(),
+    };
+    const viewableTracker = mock<IViewableTracker>();
+    const sut = new VideoAdRender(viewableTracker);
+
+    sut.render(target, {
+      mediaType: "video",
+      playerWidth: 640,
+      playerHeight: 480,
+      vastUrl: "https://example.com/vasturl",
+    }, player, true);
+
+    expect(target.classList.contains("full-click-area")).toBe(true);
+  });
+
   it('play video ad when in viewport', async () => {
     const target = document.getElementById("target") as HTMLDivElement;
     Object.defineProperty(target, "offsetWidth", {