Skip to content

Commit 5b768e7

Browse files
committed
feat: Add full click area option
1 parent d32000e commit 5b768e7

File tree

9 files changed

+79
-7
lines changed

9 files changed

+79
-7
lines changed

README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -528,6 +528,19 @@ inRenderer.render("ad-unit-1", bid, {
528528
});
529529
```
530530

531+
#### Enable Full-Click area
532+
533+
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.
534+
535+
- `fullClickArea`
536+
537+
```js
538+
var inRenderer = new InRenderer();
539+
inRenderer.render("ad-unit-1", bid, {
540+
fullClickArea: true
541+
});
542+
```
543+
531544
## From the Developer
532545

533546
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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -486,6 +486,19 @@ inRenderer.render("ad-unit-1", bid, {
486486
});
487487
```
488488

489+
#### スマホでのフルクリック領域を有効にする
490+
491+
画面幅が500px以下のデバイスではデフォルトで詳細を見るボタンのみに対してクリックを補足しますが、その動作を無効にして、全領域でクリックを補足することを有効にできます。
492+
493+
- `fullClickArea`
494+
495+
```js
496+
var inRenderer = new InRenderer();
497+
inRenderer.render("ad-unit-1", bid, {
498+
fullClickArea: true
499+
});
500+
```
501+
489502
## 開発者から
490503

491504
最近、Webのアドテクノロジーでオープンソースコミュニティが停滞していると感じています。様々な要因があると思いますが、私はこの状況をよしとはしたくありません。これから小規模から大規模まで、様々なモダンなソリューションを開発し、この業界を盛り上げたいと考えています。

src/InRenderer.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export class InRenderer {
3232
videoRenderApplicationService.render(target, bid, {
3333
logo: options.logo,
3434
onImpressionViewable: options.onImpressionViewable,
35+
fullClickArea: options.fullClickArea,
3536
});
3637
} else if (bid.mediaType === "banner") {
3738
const bannerRenderApplicationService = new BannerRenderApplicationService(

src/VideoRenderApplicationService.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class VideoRenderApplicationService {
3333
);
3434

3535
const videoAdRender = new VideoAdRender(this.viewableTracker);
36-
videoAdRender.render(targetElement, bid, fluidPlayer);
36+
videoAdRender.render(targetElement, bid, fluidPlayer, options.fullClickArea);
3737
this.viewableTracker.trackViewableVideo50(targetElement, () => {
3838
if (options.onImpressionViewable) {
3939
options.onImpressionViewable();

src/core/VideoAdRender.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@ export class VideoAdRender {
1313
public render(
1414
targetElement: HTMLDivElement,
1515
bid: VideoBid,
16-
videoPlayer: IVideoPlayer
16+
videoPlayer: IVideoPlayer,
17+
fullClickArea?: boolean
1718
) {
18-
this.renderContainer(targetElement, bid);
19+
this.renderContainer(targetElement, bid, fullClickArea);
1920

2021
this.viewableTracker.trackViewable(targetElement, () => {
2122
videoPlayer.play();
@@ -34,13 +35,17 @@ export class VideoAdRender {
3435
});
3536
}
3637

37-
private renderContainer(targetElement: HTMLDivElement, bid: VideoBid) {
38+
private renderContainer(targetElement: HTMLDivElement, bid: VideoBid, fullClickArea?: boolean) {
3839
const aspectRatio = bid.playerHeight / bid.playerWidth;
3940

4041
targetElement.style.display = "block";
4142
targetElement.style.maxWidth = `${bid.playerWidth}px`;
4243
targetElement.style.width = "100%";
4344

45+
if (fullClickArea) {
46+
targetElement.classList.add("full-click-area");
47+
}
48+
4449
const containerWidth = targetElement.offsetWidth;
4550
const height = containerWidth * aspectRatio;
4651
targetElement.style.height = height + "px";

src/style/InRenderer.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,15 @@
130130
}
131131
}
132132
}
133+
134+
.full-click-area {
135+
.fluid_player_layout_in-renderer-js {
136+
137+
@media (max-width: 500px) {
138+
.vast_clickthrough_layer {
139+
height: 100% !important;
140+
}
141+
}
142+
143+
}
144+
}

src/type/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ type LogoOption = {
66
export type VideoRenderOptions = {
77
logo?: LogoOption;
88
onImpressionViewable?: () => void;
9+
fullClickArea?: boolean;
910
};
1011

1112
export type FluidPlayerFactoryOptions = {
@@ -27,11 +28,13 @@ export type InRendererOptions = {
2728
clickThrough?: string;
2829
logo?: LogoOption;
2930
onImpressionViewable?: () => void;
31+
fullClickArea?: boolean;
3032
};
3133

3234
export type InVideoRendererOptions = {
3335
onImpressionViewable?: () => void;
3436
logo?: LogoOption;
37+
fullClickArea?: boolean;
3538
};
3639

3740
export type InNativeRendererOptions = {

test/integration/e2e/video.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>InRenderer.js Video Test Page</title>
88

9-
<script async src="./resource/prebid.js"></script>
9+
<script async src="https://cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
1010

1111
<script type="module">
1212
import { InRenderer } from "@/InRenderer";
@@ -29,7 +29,9 @@
2929
url: "./resource/fakeRenderer.js",
3030
render: (bid) => {
3131
const inRenderer = new InRenderer();
32-
inRenderer.render("video", bid);
32+
inRenderer.render("video", bid, {
33+
fullClickArea: true
34+
});
3335
},
3436
},
3537
bids: [
@@ -38,6 +40,7 @@
3840
params: {
3941
placement: "123",
4042
site: 123,
43+
test: true
4144
},
4245
},
4346
],

test/unit/VideoAdRender.test.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ describe("Video ad render", () => {
88
});
99

1010
// render video ad container
11-
it("動画広告コンテナが描画される", async () => {
11+
it("render video ad container", async () => {
1212
const target = document.getElementById("target") as HTMLDivElement;
1313
Object.defineProperty(target, "offsetWidth", {
1414
get: vi.fn().mockReturnValue(640),
@@ -33,6 +33,28 @@ describe("Video ad render", () => {
3333
expect(target.style.display).toBe("block");
3434
});
3535

36+
it("render full click area", async () => {
37+
const target = document.getElementById("target") as HTMLDivElement;
38+
Object.defineProperty(target, "offsetWidth", {
39+
get: vi.fn().mockReturnValue(640),
40+
});
41+
const player = {
42+
play: vi.fn(),
43+
pause: vi.fn(),
44+
};
45+
const viewableTracker = mock<IViewableTracker>();
46+
const sut = new VideoAdRender(viewableTracker);
47+
48+
sut.render(target, {
49+
mediaType: "video",
50+
playerWidth: 640,
51+
playerHeight: 480,
52+
vastUrl: "https://example.com/vasturl",
53+
}, player, true);
54+
55+
expect(target.classList.contains("full-click-area")).toBe(true);
56+
});
57+
3658
it('play video ad when in viewport', async () => {
3759
const target = document.getElementById("target") as HTMLDivElement;
3860
Object.defineProperty(target, "offsetWidth", {

0 commit comments

Comments
 (0)