Skip to content

Commit 385cfcb

Browse files
bradwalkbradwalk
committed
HTML Banner Ad documentation added
1 parent c848fca commit 385cfcb

File tree

2 files changed

+288
-0
lines changed

2 files changed

+288
-0
lines changed

‎docs/banner-ads/01-banner-ads.mdx‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
---
2+
description: Overview of Front-end Library
3+
---
4+
5+
import Tabs from "@theme/Tabs";
6+
import TabItem from "@theme/TabItem";
7+
8+
# Banner Ads
9+
10+
## Overview
11+
12+
HTML 5 Banner Ads are created in code (as opposed to a GUI tool) as a standard HTML file. It can have external css, js, and images, etc. The animation is handled primarly through CSS [@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes). Javascript is used to
13+
14+
## HTML Structure
15+
This structure is a boilerplate that can be used to create a new ad.
16+
17+
See highlighted comments calling out unique aspects of the ad:
18+
19+
```HTML showLineNumbers
20+
<!DOCTYPE html>
21+
<html lang="en">
22+
<head>
23+
<meta charset="UTF-8" />
24+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
25+
26+
<!-- ad.size meta tag with correct sizing for ad dimensions -->
27+
<meta name="ad.size" content="width=160,height=600" />
28+
<title>Banner Ad Title - 160x600</title>
29+
30+
<!-- link to external font (can be Google, Adobe Typekit, etc) -->
31+
<link rel="preconnect" href="https://fonts.googleapis.com" />
32+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
33+
<link href="https://fonts.googleapis.com/css2?family=font" rel="stylesheet"/>
34+
35+
<!-- link to external css file -->
36+
<link rel="stylesheet" href="css/style.css" />
37+
38+
<!-- click tag -->
39+
<script type="text/javascript">
40+
var clickTag = "https://www.google.com/";
41+
</script>
42+
</head>
43+
<body>
44+
45+
<!-- container for ad -->
46+
<div class="banner-ad">
47+
48+
<!-- apply click tag in a link covering the ad -->
49+
<a href="javascript:window.open(window.clickTag)" class="banner-ad__contact"></a>
50+
51+
<!-- container for content -->
52+
<div class="banner-ad__content">
53+
54+
<!-- content that will not change with "slides" can go here -->
55+
<div class="banner-ad__logo">
56+
<img src="assets/logo.svg" width="140" height="27" alt="Logo Alt Text" />
57+
</div>
58+
<div class="button">Button Text</div>
59+
60+
<!-- slide 1 -->
61+
<div class="banner-ad__slide banner-ad__slide-1">
62+
<span>Slide 1 Text Content</span>
63+
</div>
64+
65+
<!-- slide 2 -->
66+
<div class="banner-ad__slide banner-ad__slide-2">
67+
<span>Slide 2 Text Content</span>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<!-- link to external js file -->
73+
<script src="js/script.js"></script>
74+
</body>
75+
</html>
76+
77+
```
78+
79+
## Clicktags
80+
81+
Clicktags are used by Ad Networks to track clicks on the ads being served out. In the HTML file for the ad:
82+
83+
```HTML
84+
<script type="text/javascript">
85+
var clickTag = "https://www.google.com/";
86+
</script>
87+
</head>
88+
<body>
89+
<div class="banner-ad">
90+
<a href="javascript:window.open(window.clickTag)" class="banner-ad__contact"></a>
91+
// Rest of ad markup
92+
```
93+
94+
- In this example the `https://www.google.com/` would be replaced by the desired landing page URL where the ad should link, typically including trakcing parameters provided by the ad network.
95+
- The `clickTag` variable is setting the url.
96+
- The `<a>` tag covers the entire ad providing the click through.
97+
98+
## Styling
99+
Styling can occur in an external stylesheet.
100+
101+
This stylesheet is intended to be used starting point for structuring:
102+
```css
103+
/* General Setup */
104+
/* Main banner ad container */
105+
.banner-ad {
106+
width: 160px;
107+
height: 600px;
108+
overflow: hidden;
109+
position: relative;
110+
outline: solid 1px black;
111+
}
112+
113+
/* Contact overlay layer */
114+
.banner-ad__contact {
115+
position: absolute;
116+
inset: 0;
117+
z-index: 5;
118+
}
119+
120+
/* Main content container */
121+
.banner-ad__content {
122+
position: absolute;
123+
inset: 0;
124+
z-index: 2;
125+
}
126+
127+
/* Logo Styles */
128+
.banner-ad__logo {
129+
}
130+
131+
/* Text Content Container */
132+
.banner-ad__slide {
133+
position: absolute;
134+
inset: 0;
135+
opacity: 0;
136+
width: 100%;
137+
height: 100%;
138+
display: flex;
139+
align-items: center;
140+
}
141+
142+
/* Button Styles */
143+
.button {
144+
}
145+
146+
/* Specific Styling Per Ad */
147+
/* Slide One */
148+
.banner-ad__slide-` {
149+
animation: opacity-in 0.5s ease-in-out 0.5ss forwards;
150+
}
151+
152+
/* Text Styles for slide 1 */
153+
.banner-ad__slide-1 span {
154+
}
155+
156+
157+
/* Slide 2 */
158+
.banner-ad__slide-2 {
159+
animation: opacity-in 0.5s ease-in-out 8.5s forwards;
160+
}
161+
162+
/* Text Styles for slide 2 */
163+
.banner-ad__slide-2 span {
164+
}
165+
166+
/* Image Styles */
167+
.banner-ad__image {
168+
}
169+
170+
/* Animations */
171+
@keyframes opacity-out {
172+
from {
173+
opacity: 1;
174+
}
175+
176+
to {
177+
opacity: 0;
178+
}
179+
}
180+
181+
@keyframes opacity-in-with-slide {
182+
0% {
183+
opacity: 0;
184+
translate: 0 30px;
185+
}
186+
75% {
187+
translate: 0 0;
188+
}
189+
100% {
190+
opacity: 1;
191+
}
192+
}
193+
194+
@keyframes opacity-in {
195+
from {
196+
opacity: 0;
197+
}
198+
199+
to {
200+
opacity: 1;
201+
}
202+
}
203+
204+
@keyframes image-slide {
205+
from {
206+
translate: 100% 0;
207+
}
208+
209+
to {
210+
translate: 0 0;
211+
}
212+
}
213+
214+
```
215+
216+
217+
## Fonts
218+
External fonts can be linked to — for example [Google Webfonts](https://fonts.google.com/) and [Adobe Typekit](https://fonts.adobe.com/) can be used.
219+
220+
## Javascript
221+
This javascript can be used as is. The only variables that may need to change are `this.totalCycles` and `this.cycleDuration` depending on the ad network specs. In this example the ad animations will run three times with each cycle lasting 15 seconds, for a total of 45 seconds. The CSS animations are set up to last for a total of 15 seconds.
222+
223+
```js showLineNumbers
224+
// Banner ad animation controller
225+
class BannerAnimationController {
226+
constructor() {
227+
this.currentCycle = 0;
228+
this.totalCycles = 3; // run the ad 3 times
229+
this.cycleDuration = 15000; // 15 seconds per cycle
230+
this.animatedElements = [];
231+
232+
this.init();
233+
}
234+
235+
init() {
236+
237+
// Start the animation cycles
238+
this.startAnimationCycle();
239+
}
240+
241+
startAnimationCycle() {
242+
if (this.currentCycle >= this.totalCycles) {
243+
return; // Stop after 3 cycles
244+
}
245+
246+
// Reset all animations by removing and re-adding animation classes
247+
this.resetAnimations();
248+
249+
// Start the next cycle
250+
setTimeout(() => {
251+
this.currentCycle++;
252+
this.startAnimationCycle();
253+
}, this.cycleDuration);
254+
}
255+
256+
resetAnimations() {
257+
// Force reflow to restart CSS animations
258+
const bannerAd = document.querySelector(".banner-ad");
259+
const originalDisplay = bannerAd.style.display;
260+
bannerAd.style.display = "none";
261+
bannerAd.offsetHeight; // Trigger reflow
262+
bannerAd.style.display = originalDisplay;
263+
}
264+
}
265+
266+
// Initialize the animation controller when the DOM is loaded
267+
document.addEventListener("DOMContentLoaded", () => {
268+
new BannerAnimationController();
269+
});
270+
271+
```
272+
273+
## Ad Specs
274+
Review and confirm all ad specs from the ad netowrk that will be running the ad before starting.
275+
276+
## Preview Page
277+
Typically a preview page needs to be created that contains links to the ads, so that the internal idfive team and clients can review. Follow the [Buddy deployment process](docs/general/documentation/buddy-pipeline.md) to push this up to the staging site. Here is an [example review page](https://staging2.idfive.com/umary-media/).
278+
279+
## Git trakcing
280+
Add the ads to Bitbucket to keep tracked. Use the client name followed by "media" ("clientname_media").

‎docs/banner-ads/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Banner Ads",
3+
"position": 8,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Creating HTML5 Banner Ads for Third-Party Ad Networks"
7+
}
8+
}

0 commit comments

Comments
 (0)