This shows you the differences between two versions of the page.
Next revision | Previous revision Next revision Both sides next revision | ||
creatives:ehtml [2015/09/28 14:04] avarga created |
creatives:ehtml [2021/01/19 12:13] zkocsis [Bevezető] |
||
---|---|---|---|
Line 3: | Line 3: | ||
===== Bevezető ===== | ===== Bevezető ===== | ||
- | Az easyHTML sablon egy olyan Markup sablon, mely a HTML bannerek | + | Az easyHTML sablon egy olyan Markup sablon, mely a HTML bannerek |
===== Bannerek elkészítése ===== | ===== Bannerek elkészítése ===== | ||
Line 15: | Line 15: | ||
==== Megkötések ==== | ==== Megkötések ==== | ||
- | **1.** A fentiek miatt az alábbi nevek védettnek minősülnek, | + | **1.** A fentiek miatt az alábbi nevek védettnek minősülnek, |
* '' | * '' | ||
Line 50: | Line 50: | ||
**4.** A kreatívhoz tartozó állományok mérete, nem haladhatja meg a 300KB-ot! | **4.** A kreatívhoz tartozó állományok mérete, nem haladhatja meg a 300KB-ot! | ||
+ | |||
+ | ==== Felkészülés a kiszolgálásra ==== | ||
+ | |||
+ | A bannerünket fel kell készítenünk arra, hogy egy iframe-ben kerül kiszolgálásra. Ebben nem lesz más, mint amit a HTML file-unk tartalmaz, ezért gondoskodnunk kell arról, hogy a CSS marginokat, paddingokat, | ||
+ | |||
+ | Erre az alábbi kódhoz hasonló megoldás ajánlott, de egyéb kitételekre is szükségünk lehet, a banner struktúrája alapján. Ezt célszerű a kódunk elejére rakni és minden más CSS-t ezután beilleszteni, | ||
+ | |||
+ | <code html> | ||
+ | |||
+ | < | ||
+ | body { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: none; | ||
+ | | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | </ | ||
==== A goa-helper.js hozzáadása ==== | ==== A goa-helper.js hozzáadása ==== | ||
Line 92: | Line 112: | ||
<code html> | <code html> | ||
- | <a id=" | + | <a id=" |
+ | < | ||
+ | | ||
+ | |||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | </script> | ||
</ | </ | ||
- | |||
=== JS példa === | === JS példa === | ||
Line 120: | Line 147: | ||
<code javascript> | <code javascript> | ||
- | {" | + | {" |
</ | </ | ||
Line 126: | Line 153: | ||
=== HTML példa === | === HTML példa === | ||
- | |||
- | Az első linket kiolvasva: | ||
<code html> | <code html> | ||
- | <a id=" | + | <a id=" |
+ | < | ||
+ | | ||
+ | |||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | </script> | ||
</ | </ | ||
- | |||
=== JS példa === | === JS példa === | ||
Line 158: | Line 190: | ||
</ | </ | ||
- | **A különböző displayek modulok elérhető funkcióiról itt található összefoglaló: | + | **A különböző displayek modulok elérhető funkcióiról itt található összefoglaló: |
==== Zárás ==== | ==== Zárás ==== | ||
Line 194: | Line 226: | ||
<div id=" | <div id=" | ||
< | < | ||
- | document.getElementById(' | + | document.getElementById(' |
</ | </ | ||
Line 235: | Line 267: | ||
<div id=" | <div id=" | ||
< | < | ||
- | document.getElementById(' | + | document.getElementById(' |
</ | </ | ||
Line 278: | Line 310: | ||
<div id=" | <div id=" | ||
< | < | ||
- | document.getElementById(' | + | document.getElementById(' |
</ | </ | ||
Line 317: | Line 349: | ||
- Válasszuk a '' | - Válasszuk a '' | ||
- Válasszuk ki a legördülő listából az '' | - Válasszuk ki a legördülő listából az '' | ||
- | - A '' | + | - A '' |
==== Extra paraméterek átadása a banner számára ==== | ==== Extra paraméterek átadása a banner számára ==== | ||
Line 325: | Line 357: | ||
<code javascript> | <code javascript> | ||
- | {" | + | {" |
</ | </ | ||
Ezt a sablon megkapja feldolgozza, | Ezt a sablon megkapja feldolgozza, | ||
+ | |||
+ | :!: **Figyelem! A felső példa nem fogja mérni a kattintásokat, | ||
Következő példánkban a két várt paraméter '' | Következő példánkban a két várt paraméter '' | ||
Line 340: | Line 374: | ||
<code javascript> | <code javascript> | ||
- | {" | + | {" |
</ | </ | ||
- | :!: Itt fontos, hogy mind a kulcs, mind az érték dupla időzőjelbe kerüljön, és az '' | + | :!: Itt fontos, hogy mind a kulcs, mind az érték dupla idézőjelbe kerüljön. |
A valóságban természetesen az azonosítókat le kell majd cserélni, és ezután menthető is a banner. | A valóságban természetesen az azonosítókat le kell majd cserélni, és ezután menthető is a banner. | ||
---- | ---- |