Skip to content

Commit a8e6864

Browse files
jimpercopybara-github
jimper
authored and
copybara-github
committed
Adding Offerwall custom choice sample.
PiperOrigin-RevId: 800691580
1 parent 89c5f1f commit a8e6864

File tree

13 files changed

+1211
-0
lines changed

13 files changed

+1211
-0
lines changed

‎dist/offerwall-custom-choice/js/demo.details‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
name: Offerwall with custom choice
2+
description: Display an Offerwall with custom choice
3+
authors:
4+
- Google Publisher Tag Team

‎dist/offerwall-custom-choice/js/demo.html‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<!DOCTYPE html>
2+
<!--
3+
@license
4+
Copyright 2022 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<html>
8+
<head>
9+
<meta charset="utf-8" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
11+
<meta name="description" content="Display an Offerwall with custom choice" />
12+
<title>Offerwall with custom choice</title>
13+
<script
14+
async
15+
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
16+
crossorigin="anonymous"
17+
></script>
18+
<script>
19+
class MyCustomOfferwallChoice {
20+
constructor() {
21+
// Whether or not the user should be allowed to bypass the Offerwall.
22+
this.isUserEntitledToAccess = false;
23+
24+
// Whether the custom Offerwall choice should be disabled.
25+
this.isCustomOfferwallChoiceDisabled = false;
26+
}
27+
28+
/**
29+
* Custom choice initialization logic.
30+
*/
31+
async initialize() {
32+
if (this.isCustomOfferwallChoiceDisabled) {
33+
// Indicate that the custom choice option should not be displayed.
34+
return Promise.resolve(
35+
window.googlefc.offerwall.customchoice.InitializeResponseEnum.CUSTOM_CHOICE_DISABLED,
36+
);
37+
}
38+
39+
if (this.isUserEntitledToAccess) {
40+
// Indicate that the user should not be shown the Offerwall.
41+
return Promise.resolve(
42+
window.googlefc.offerwall.customchoice.InitializeResponseEnum.ACCESS_GRANTED,
43+
);
44+
}
45+
46+
// Indicate that the user may be shown the Offerwall.
47+
return Promise.resolve(
48+
window.googlefc.offerwall.customchoice.InitializeResponseEnum.ACCESS_NOT_GRANTED,
49+
);
50+
}
51+
52+
/**
53+
* Custom choice display logic.
54+
*/
55+
async show() {
56+
// Locate the custom choice modal dialog.
57+
const modal = document.querySelector(".custom-choice-modal");
58+
59+
// Show modal and return a Promise that will resolve when the modal is
60+
// closed.
61+
return new Promise((resolve) => {
62+
// Attach an event listener to resolve the Promise when the modal is
63+
// closed.
64+
modal?.addEventListener(
65+
"close",
66+
() => {
67+
// Return `true` if the subscribe button was clicked, otherwise `false`.
68+
resolve(modal?.returnValue === "subscribe");
69+
},
70+
{ once: true },
71+
);
72+
73+
// Show the custom choice modal.
74+
modal?.showModal();
75+
});
76+
}
77+
}
78+
79+
// Instantiate the Offerwall custom choice registry and register your custom
80+
// choice implementation. Instantiating the registry lets you begin interacting
81+
// with it immediately, even if the Offerwall library hasn't finished loading.
82+
window.googlefc = window.googlefc || {};
83+
window.googlefc.offerwall = window.googlefc.offerwall || {};
84+
window.googlefc.offerwall.customchoice = window.googlefc.offerwall.customchoice || {};
85+
window.googlefc.offerwall.customchoice.registry = new MyCustomOfferwallChoice();
86+
</script>
87+
<style>
88+
.custom-choice-modal {
89+
max-width: 500px;
90+
border: 2px solid rgba(107, 110, 118, 0.4);
91+
border-radius: 8px;
92+
padding: 10px;
93+
background: white;
94+
}
95+
96+
.custom-choice-modal:open::backdrop {
97+
background-color: black;
98+
opacity: 0.6;
99+
}
100+
101+
.custom-choice-modal h1 {
102+
overflow-wrap: break-word;
103+
font:
104+
500 1.25em Poppins,
105+
sans-serif;
106+
color: #202124;
107+
text-align: center;
108+
}
109+
110+
.custom-choice-list-container {
111+
border: 1px solid rgba(95, 99, 104, 0.4);
112+
border-radius: 8px;
113+
box-sizing: border-box;
114+
display: flex;
115+
flex-direction: column;
116+
z-index: 1;
117+
margin-top: 24px;
118+
}
119+
120+
button.custom-choice-list-item-button {
121+
background-color: transparent;
122+
border: none;
123+
cursor: pointer;
124+
display: flex;
125+
justify-content: space-between;
126+
align-items: center;
127+
padding: 16px;
128+
width: 100%;
129+
text-align: left;
130+
}
131+
132+
button.custom-choice-list-item-button:hover {
133+
background-color: rgba(32, 33, 36, 0.04);
134+
transition: background-color 150ms ease-in;
135+
}
136+
137+
.custom-choice-list-container > button:not(:last-child) {
138+
border-bottom: 1px solid rgba(95, 99, 104, 0.4);
139+
}
140+
.custom-choice-list-container > button:first-child {
141+
border-radius: 8px 8px 0 0;
142+
}
143+
.custom-choice-list-container > button:last-child {
144+
border-radius: 0 0 8px 8px;
145+
}
146+
.custom-choice-list-container > button:only-child {
147+
border-radius: 8px;
148+
}
149+
150+
.custom-choice-list-item-text-container {
151+
display: flex;
152+
flex-direction: column;
153+
gap: 4px;
154+
max-width: 88%;
155+
}
156+
157+
.custom-choice-list-item-text {
158+
overflow-wrap: break-word;
159+
font:
160+
500 14px "Poppins",
161+
sans-serif;
162+
color: #202124;
163+
}
164+
165+
.custom-choice-list-item-subtext {
166+
overflow-wrap: break-word;
167+
font:
168+
400 14px "Roboto",
169+
sans-serif;
170+
color: #5f6368;
171+
margin: 0;
172+
}
173+
174+
.custom-choice-choice-icon {
175+
align-items: center;
176+
display: flex;
177+
justify-content: center;
178+
margin-left: 12px;
179+
}
180+
181+
.custom-choice-choice-icon svg {
182+
fill: #174ea6;
183+
height: 18px;
184+
width: 18px;
185+
}
186+
</style>
187+
</head>
188+
<body>
189+
<dialog class="custom-choice-modal">
190+
<form method="dialog">
191+
<h1>Subscribe for access.</h1>
192+
<div class="custom-choice-list-container">
193+
<!-- Item 1: Subscribe -->
194+
<button type="submit" class="custom-choice-list-item-button" value="subscribe">
195+
<div class="custom-choice-list-item-text-container">
196+
<span class="custom-choice-list-item-text">Subscribe for just $4.00 per month</span>
197+
<p class="custom-choice-list-item-subtext">
198+
Includes exclusive tips and articles, special members-only promotions and the latest
199+
news and announcements first
200+
</p>
201+
</div>
202+
<svg
203+
class="custom-choice-choice-icon"
204+
aria-hidden="true"
205+
width="18"
206+
height="18"
207+
viewBox="0 0 24 24"
208+
focusable="false"
209+
>
210+
<path d="M7.59 18.59L9 20l8-8-8-8-1.41 1.41L14.17 12"></path>
211+
</svg>
212+
</button>
213+
214+
<!-- Item 2: Go Back -->
215+
<button type="submit" class="custom-choice-list-item-button" value="back">
216+
<div class="custom-choice-list-item-text-container">
217+
<span class="custom-choice-list-item-text">Go back</span>
218+
<p class="custom-choice-list-item-subtext">
219+
Check what other options we have available for you
220+
</p>
221+
</div>
222+
<svg
223+
class="custom-choice-choice-icon"
224+
aria-hidden="true"
225+
width="18"
226+
height="18"
227+
viewBox="0 0 24 24"
228+
focusable="false"
229+
>
230+
<path d="M7.59 18.59L9 20l8-8-8-8-1.41 1.41L14.17 12"></path>
231+
</svg>
232+
</button>
233+
</div>
234+
</form>
235+
</dialog>
236+
</body>
237+
</html>

‎dist/offerwall-custom-choice/legacyjs/demo.details‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
name: Offerwall with custom choice
2+
description: Display an Offerwall with custom choice
3+
authors:
4+
- Google Publisher Tag Team

0 commit comments

Comments
 (0)