http://docs.iqd-ao.de/de/api.php?action=feedcontributions&feedformat=atom&user=EfeigegernothDokumentation - Benutzerbeiträge [de]2026-04-29T09:57:50ZBenutzerbeiträgeMediaWiki 1.43.1http://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=362Adcontroller2026-02-16T15:03:58Z<p>Efeigegernoth: </p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Für das Hosting und den unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Sollte die zuvor genannte Variante aus technisch-organisatorischen Gründen nicht möglich sein, bitte Kontakt mit uns aufnehmen. In Absprache kann in Ausnahmefällen hiervon abgewichen werden. Hosting und Abruf des AC-Deployment vom iq-CDN <br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]",<br />
userData: {<br />
hashedEmail: "[Hashed Email siehe Erläuterung unten]"<br />
}<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpolitik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
<span style="color:red;">'''Achtung:'''</span> Es fehlt absichtlich level1, da dieser Teil der Adunit von der iqdigital innerhalb des Adcontrollers festgelegt wird.<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
====Schlüssel: userData====<br />
<br />
"userData" ist das Sammelobjekt für alle nötigen UserInformationen sowohl im Rahmen von Clean Room Cases als auch unserer ID-Lösungen.<br />
<br />
=====Schlüssel: userData:hashedEmail=====<br />
<br />
Vorherige Normalisierung und Übergabe der via SHA256 erstellten Hashes der E-Mail Adressen über Publisher-CMS-/Mandantenobjekt (AdController) nach User Anmeldung/ Newsletter Registrierung.<br />
<br />
<syntaxhighlight lang='javascript'><br />
//Beispiel eines SHA256 Hashes<br />
const userData:{<br />
hashedEmail: "21bd991f8b25a57075dd2489b4eebda1a5d956bbf52f961fe5289c6d5a0a2b5c"<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
'''Normalisierung''':<br />
<br />
Vor dem Hashing der E-Mail-Adresse Normalisierung der Zeichenfolge, indem „überflüssige“ Zeichen entfernt werden:<br />
<br />
# Entfernen führender und nachgestellter Leerzeichen<br />
# Alle ASCII-Zeichen in Kleinbuchstaben umwandeln<br />
# Entfernen von "." (ASCII-Code 46) aus dem Benutzernamen der E-Mail-Adresse <br />
à z.B. jane.smith@gmail.com wird normalisiert zu janesmith@gmail.com<br />
# Entfernen von "+" (ASCII-Code 43) und alle nachfolgenden Zeichen aus dem Benutzernamen der E-Mail- Adresse <br />
à z.B. janesmith+test@gmail.com wird normalisiert zu janesmith@gmail.com<br />
<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Anzeigen-Containermodell==<br />
<br />
Die Positionierung der Platzhaltercontainer der Anzeigen in der Publisher Seite erfolgt nach dem im Voraus abgestimmten Vertaggungsplan.<br />
Die eigentliche Integration der Container sollte dem folgenden Muster gemäß geschehen.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_[N U M M E R]" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# Das Data Attribute "'''data-device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist. Mögliche Werte: '''desktop | tablet | mobile'''<br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="[D E V I C E T Y P E]"></div><br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen Signalfunktionen==<br />
<br />
===AdController.finalize(..)===<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
===IQDComplete() - Page-Load Signal===<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=361Adcontroller2026-02-16T15:00:46Z<p>Efeigegernoth: </p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Für das Hosting und den unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Sollte die zuvor genannte Variante aus technisch-organisatorischen Gründen nicht möglich sein, bitte Kontakt mit uns aufnehmen. In Absprache kann in Ausnahmefällen hiervon abgewichen werden. Hosting und Abruf des AC-Deployment vom iq-CDN <br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]",<br />
userData: {<br />
hashedEmail: "[Hashed Email siehe Erläuterung unten]"<br />
}<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpolitik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
<span style="color:red;">'''Achtung:'''</span> Es fehlt absichtlich level1, da dieser Teil der Adunit von der iqdigital innerhalb des Adcontrollers festgelegt wird.<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
====Schlüssel: userData====<br />
<br />
"userData" ist das Sammelobjekt für alle nötigen UserInformationen sowohl im Rahmen von Clean Room Cases als auch unserer ID-Lösungen.<br />
<br />
=====Schlüssel: userData:hashedEmail=====<br />
<br />
Vorherige Normalisierung und Übergabe der via SHA256 erstellten Hashes der E-Mail Adressen über Publisher-CMS-/Mandantenobjekt (AdController) nach User Anmeldung/ Newsletter Registrierung.<br />
<br />
<syntaxhighlight lang='javascript'><br />
//example<br />
const userData:{<br />
hashedEmail: "21bd991f8b25a57075dd2489b4eebda1a5d956bbf52f961fe5289c6d5a0a2b5c"<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
'''Normalisierung''':<br />
<br />
Vor dem Hashing der E-Mail-Adresse Normalisierung der Zeichenfolge, indem „überflüssige“ Zeichen entfernt werden:<br />
<br />
# Entfernen führender und nachgestellter Leerzeichen<br />
# Alle ASCII-Zeichen in Kleinbuchstaben umwandeln<br />
# Entfernen von "." (ASCII-Code 46) aus dem Benutzernamen der E-Mail-Adresse <br />
à z.B. jane.smith@gmail.com wird normalisiert zu janesmith@gmail.com<br />
# Entfernen von "+" (ASCII-Code 43) und alle nachfolgenden Zeichen aus dem Benutzernamen der E-Mail- Adresse <br />
à z.B. janesmith+test@gmail.com wird normalisiert zu janesmith@gmail.com<br />
<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Anzeigen-Containermodell==<br />
<br />
Die Positionierung der Platzhaltercontainer der Anzeigen in der Publisher Seite erfolgt nach dem im Voraus abgestimmten Vertaggungsplan.<br />
Die eigentliche Integration der Container sollte dem folgenden Muster gemäß geschehen.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_[N U M M E R]" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# Das Data Attribute "'''data-device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist. Mögliche Werte: '''desktop | tablet | mobile'''<br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="[D E V I C E T Y P E]"></div><br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen Signalfunktionen==<br />
<br />
===AdController.finalize(..)===<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
===IQDComplete() - Page-Load Signal===<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=360Adcontroller2026-02-16T14:48:09Z<p>Efeigegernoth: </p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Für das Hosting und den unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Sollte die zuvor genannte Variante aus technisch-organisatorischen Gründen nicht möglich sein, bitte Kontakt mit uns aufnehmen. In Absprache kann in Ausnahmefällen hiervon abgewichen werden. Hosting und Abruf des AC-Deployment vom iq-CDN <br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]",<br />
userData: {<br />
hashedEmail: "[Hashed Email siehe Erläuterung unten]"<br />
}<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpolitik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
<span style="color:red;">'''Achtung:'''</span> Es fehlt absichtlich level1, da dieser Teil der Adunit von der iqdigital innerhalb des Adcontrollers festgelegt wird.<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
====Schlüssel: userData====<br />
<br />
"userData" ist das Sammelobjekt für alle nötigen UserInformationen sowohl im Rahmen von Clean Room Cases als auch unserer ID-Lösungen.<br />
<br />
=====Schlüssel: userData:hashedEmail=====<br />
<br />
Vorherige Normalisierung und Übergabe der via SHA256 erstellten Hashes der E-Mail Adressen über Publisher-CMS-/Mandantenobjekt (AdController) nach User Anmeldung/ Newsletter Registrierung.<br />
<br />
'''Normalisierung''':<br />
<br />
Vor dem Hashing der E-Mail-Adresse Normalisierung der Zeichenfolge, indem „überflüssige“ Zeichen entfernt werden:<br />
<br />
# Entfernen führender und nachgestellter Leerzeichen<br />
# Alle ASCII-Zeichen in Kleinbuchstaben umwandeln<br />
# Entfernen von "." (ASCII-Code 46) aus dem Benutzernamen der E-Mail-Adresse <br />
à z.B. jane.smith@gmail.com wird normalisiert zu janesmith@gmail.com<br />
# Entfernen von "+" (ASCII-Code 43) und alle nachfolgenden Zeichen aus dem Benutzernamen der E-Mail- Adresse <br />
à z.B. janesmith+test@gmail.com wird normalisiert zu janesmith@gmail.com<br />
<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Anzeigen-Containermodell==<br />
<br />
Die Positionierung der Platzhaltercontainer der Anzeigen in der Publisher Seite erfolgt nach dem im Voraus abgestimmten Vertaggungsplan.<br />
Die eigentliche Integration der Container sollte dem folgenden Muster gemäß geschehen.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_[N U M M E R]" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# Das Data Attribute "'''data-device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist. Mögliche Werte: '''desktop | tablet | mobile'''<br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="[D E V I C E T Y P E]"></div><br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen Signalfunktionen==<br />
<br />
===AdController.finalize(..)===<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
===IQDComplete() - Page-Load Signal===<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=359Adcontroller2026-02-16T14:14:57Z<p>Efeigegernoth: </p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Für das Hosting und den unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Sollte die zuvor genannte Variante aus technisch-organisatorischen Gründen nicht möglich sein, bitte Kontakt mit uns aufnehmen. In Absprache kann in Ausnahmefällen hiervon abgewichen werden. Hosting und Abruf des AC-Deployment vom iq-CDN <br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]",<br />
userData: {<br />
hashedEmail: "[Hashed Email siehe Erläuterung unten]"<br />
}<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpolitik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
<span style="color:red;">'''Achtung:'''</span> Es fehlt absichtlich level1, da dieser Teil der Adunit von der iqdigital innerhalb des Adcontrollers festgelegt wird.<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
====Schlüssel: userData====<br />
<br />
"userData" ist das Sammelobjekt für alle nötigen UserInformationen sowohl im Rahmen von Clean Room Cases als auch unserer ID-Lösungen.<br />
<br />
=====Schlüssel: userData:hashedEmail=====<br />
<br />
Vorherige Normalisierung und Übergabe von E-Mail Adressen (Hashed E-Mail SHA256) über Publisher-CMS-/Mandantenobjekt (AdController), nach User Anmeldung/ Newsletter Registrierung.<br />
<br />
'''Normalisierung''':<br />
<br />
Vor dem Hashing der E-Mail-Adresse Normalisierung der Zeichenfolge, indem „überflüssige“ Zeichen entfernt werden:<br />
<br />
# Entfernen führender und nachgestellter Leerzeichen<br />
# Alle ASCII-Zeichen in Kleinbuchstaben umwandeln<br />
# Entfernen von "." (ASCII-Code 46) aus dem Benutzernamen der E-Mail-Adresse <br />
à z.B. jane.smith@gmail.com wird normalisiert zu janesmith@gmail.com<br />
# Entfernen von "+" (ASCII-Code 43) und alle nachfolgenden Zeichen aus dem Benutzernamen der E-Mail- Adresse <br />
à z.B. janesmith+test@gmail.com wird normalisiert zu janesmith@gmail.com<br />
<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Anzeigen-Containermodell==<br />
<br />
Die Positionierung der Platzhaltercontainer der Anzeigen in der Publisher Seite erfolgt nach dem im Voraus abgestimmten Vertaggungsplan.<br />
Die eigentliche Integration der Container sollte dem folgenden Muster gemäß geschehen.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_[N U M M E R]" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# Das Data Attribute "'''data-device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist. Mögliche Werte: '''desktop | tablet | mobile'''<br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="[D E V I C E T Y P E]"></div><br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen Signalfunktionen==<br />
<br />
===AdController.finalize(..)===<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
===IQDComplete() - Page-Load Signal===<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=358Adcontroller2026-02-16T14:13:36Z<p>Efeigegernoth: </p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Für das Hosting und den unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Sollte die zuvor genannte Variante aus technisch-organisatorischen Gründen nicht möglich sein, bitte Kontakt mit uns aufnehmen. In Absprache kann in Ausnahmefällen hiervon abgewichen werden. Hosting und Abruf des AC-Deployment vom iq-CDN <br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
let mode = 'live';<br />
const currentUrlSearchParams = new URLSearchParams(window.location.search);<br />
<br />
if (currentUrlSearchParams.has('iqdeployment')) {<br />
mode = currentUrlSearchParams.get('iqdeployment').replace(/\W/g, '');<br />
}<br />
<br />
return mode;<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]",<br />
userData: {<br />
hashedEmail: "[siehe Erläuterung unten]"<br />
}<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpolitik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
<span style="color:red;">'''Achtung:'''</span> Es fehlt absichtlich level1, da dieser Teil der Adunit von der iqdigital innerhalb des Adcontrollers festgelegt wird.<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
====Schlüssel: userData====<br />
<br />
"userData" ist das Sammelobjekt für alle nötigen UserInformationen sowohl im Rahmen von Clean Room Cases als auch unserer ID-Lösungen.<br />
<br />
=====Schlüssel: userData:hashedEmail=====<br />
<br />
Vorherige Normalisierung und Übergabe von E-Mail Adressen (Hashed E-Mail SHA256) über Publisher-CMS-/Mandantenobjekt (AdController), nach User Anmeldung/ Newsletter Registrierung.<br />
<br />
'''Normalisierung''':<br />
<br />
Vor dem Hashing der E-Mail-Adresse Normalisierung der Zeichenfolge, indem „überflüssige“ Zeichen entfernt werden:<br />
<br />
# Entfernen führender und nachgestellter Leerzeichen<br />
# Alle ASCII-Zeichen in Kleinbuchstaben umwandeln<br />
# Entfernen von "." (ASCII-Code 46) aus dem Benutzernamen der E-Mail-Adresse <br />
à z.B. jane.smith@gmail.com wird normalisiert zu janesmith@gmail.com<br />
# Entfernen von "+" (ASCII-Code 43) und alle nachfolgenden Zeichen aus dem Benutzernamen der E-Mail- Adresse <br />
à z.B. janesmith+test@gmail.com wird normalisiert zu janesmith@gmail.com<br />
<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Anzeigen-Containermodell==<br />
<br />
Die Positionierung der Platzhaltercontainer der Anzeigen in der Publisher Seite erfolgt nach dem im Voraus abgestimmten Vertaggungsplan.<br />
Die eigentliche Integration der Container sollte dem folgenden Muster gemäß geschehen.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_[N U M M E R]" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# Das Data Attribute "'''data-device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist. Mögliche Werte: '''desktop | tablet | mobile'''<br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="[D E V I C E T Y P E]"></div><br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen Signalfunktionen==<br />
<br />
===AdController.finalize(..)===<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
===IQDComplete() - Page-Load Signal===<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Einbau_des_Google_Mobile_Ads_SDK&diff=282Einbau des Google Mobile Ads SDK2023-06-20T11:54:06Z<p>Efeigegernoth: </p>
<hr />
<div>Diese Dokumentation dient dazu den Einbau des Google Mobile Ads SDK (GMA SDK) und die Werbeintegration der iq digital zu erklären. Sie geht dabei auf notwendige und wichtige Eigenheiten ein und versucht übliche Missverständnisse aufzuklären.<br />
<br />
Die Dokumentation beginnt dabei mit dem GMA SDK und allgemeinen Informationen, welche für alle Werbeformen gelten, die in der App laufen sollen. Darauf folgen Werbeform spezifische Erklärungen und zum Abschluss werden werbeform spezifische Events erklärt, welche die App berücksichtigen muss.<br />
<br />
==Offizielle Dokumentation zum Google Mobile Ads SDK==<br />
Das Google Mobile Ads SDK (GMA SDK) bringt alles mit, was für eine Werbeausspielung in nativen Apps benötigt wird.<br />
<br />
===Getting Started zum Google Mobile Ads SDK===<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/ios/quick-start GMA SDK iOS Getting Started]<br />
<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/android/quick-start GMA SDK Android Getting Started]<br />
<br />
===Download des Google Mobile Ads SDK===<br />
====Android====<br />
Das GMA SDK ist in den Android Play Services integriert und deshalb auf den Android Geräten vorhanden. <br />
<br />
====iOS====<br />
Für iOS kann das GMA SDK hier heruntergeladen werden:<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/ios/download Download iOS]<br />
<br />
===Ad-Manager vs. Admob===<br />
Die Dokumentation zum Google Mobile Ads SDK gibt es in zwei Varianten: für Ad-Manager- und Admob-Nutzer. Die iq digital ist ein Ad-Manager Kunde, deswegen muss unbedingt darauf geachtet werden, dass in der Browser-URL https://developers.google.com/ad-manager/... enthalten ist. Die Admob Doku unterscheidet sich leicht von der Ad-Manager Doku.<br />
<br />
<br />
==Kurze Einführung in den Lebens-Zyklus einer Werbeausspielung mit dem GMA SDK==<br />
Am Beispiel einer Banner-Werbeausspielung wird hier kurz der Lebens-Zyklus einer Werbeausspielung erklärt.<br />
<br />
[[Datei:GMA_SDK.png|800px|thumbnail|Übersicht Workflow der Werbeausspielung mit GMA SDK]]<br />
<br />
===Request===<br />
Das Adrequest wird in der App zusammengestellt und besteht aus mehreren Komponenten. Für eine erfolgreiche Werbeausspielung sind folgende Komponenten wichtig:<br />
;Consent String:Die App benötigt vom Nutzer einen gültigen Consent für die Werbeausspielung. Dabei sind neben mehreren relevanten Purposes auch der Vendor 755 Google Advertising Products notwendig (s.u.)<br />
;Creative-Sizes:In den meisten Fällen benutzen wir '''multisize'''-Adrequests. Das bedeutet, dass das Adrequest mehrere Creative Größen enthält und der Adserver daraufhin prüft, ob er ein Creative für eine dieser Größen zur Verfügung hat. Beispiele sind z.B. 320x1, 320x53, 320x80, 320x106, 320x160 etc.<br />
;Adunit:Die Adunit ist die Adresse der Werbeplatzierung. Damit weiß der Adserver, auf welcher Seite eine Werbeausspielung erfolgt. Die Adunit ist für alle Adrequests eines Pagerequests gleich. Beispiel: /183/Rheinischer_Kurier_ios_phone/homepage <br />
;Keywords (optional):Keywords sind Key-Value Paare und können eine Werbeplatzierung um weitere Informationen anreichern, die für eine gezielte Werbeausspielung notwendig sind. Die Werbeplatzierungen der iq digital enthalten alle eine bestimmte Bezeichnung, welche über die Keywords dem Adserver mitgegeben wird. Beispiel: kw=iqadtile1,digtransfrom&tile=1&doc=homepage<br />
<br />
===Adserver Google Admanager 360===<br />
Wenn der Adserver gültigen Consent besitzt, prüft ein Verteilungsalgorithmus, ob eine oder mehrere Werbebuchungen für die Adunit, Creative sizes und Keywords vorliegen. Ist dies der Fall wählt der Adserver die beste dafür aus. Sind mehrere Buchungen gleich wichtig, wählt er zufällig eine davon aus. Nur im Falle keiner Buchung würde er eine '''no ad''' oder '''no fill''' Meldung ausgeben, die besagt, dass für die Kombination aus adunit, creative size und Keywords keine Buchung existiert.<br />
<br />
===Ausspielung innerhalb der App===<br />
Die App lädt die Response des Adservers, die aus dem Template-Code und den Creative Komponenten besteht. Dabei ist zu beachten, dass der Werbecontainer auf die creative size des ausgelieferten Creatives vergrößert wird. Für Fullscreen Ads muss diese Größe von der App nachträglich auf die Display Viewport Größe (also device independent pixel) angepasst werden. Im Falle einer Banner Anzeige bekommt die App meist nach dem Ladevorgang ein oder mehrere setsize-Events über den einzubauenden AppEventHandler und muss den Werbecontainer auf die neue Größe anpassen, sofern diese sich von der creative size unterscheidet.<br />
<br />
===Impression-Zählung===<br />
Eine Impression Zählung, die misst, dass ein Ad angesehen wurde, wird vom GMA SDK automatisch abgeschickt, sobald mindestens 1px im sichtbaren Bereich des Displays ist.<br />
<br />
==Allgemeine Informationen==<br />
===Adunits (Zonierung)===<br />
Der Google Ad Manager benutzt zur Adressierung der Seiten Adunits, die sich wie folgt zusammensetzen können:<br />
*/netzwerkId/level1<br />
*/netzwerkId/level1/seitentyp<br />
*/netzwerkId/level1/level2/seitentyp<br />
*/netzwerkId/level1/level2/level3/seitentyp<br />
*usw.<br />
<br />
====Begriffserklärung====<br />
;netzwerkId:Hier ist immer die Netzwerk ID der iq digital einzugeben: 183<br />
;level1:Dies ist die Bezeichnung der App im Google Ad Manager und wird von der iq digital vorgegeben. Die Bezeichnung besteht aus <appname>_app_<plattform>_<gerätetyp>.<br />
:;appname:Der Name der App<br />
:;plattform:Das Betriebsystem, also ''ios'' oder ''android''<br />
:;gerätetyp:Der Gerätetyp, also '''phone''' oder ''tablet''<br />
;level2:Dies ist die Bezeichnung einer Rubrik der App, z.B. ''politik''<br />
;level3 (usw.):Dies ist die Bezeichnung für eine Unterrubrik, z.B. im Falle von ''politik'' als level2 wäre ''ausland'' eine Unterrubrik für level3. Level4 und höher sind weitere tiefere Verzweigungen der App, diese werden im Normalfall nicht als Adunits angelegt. Solche Seiten würden dann über das übergeordnete level3 vermarktet werden. Beispiel: Eine Seite ''politik/ausland/usa'' ist zu speziell, um sie einzeln zu vermarkte. In so einem Fall ist es sinnvoll, dass sie nur bis level3, also als ''politik/ausland'', vertaggt wird.<br />
;seitentyp:In Apps mit Banner-Anzeigen (z.B. News Apps) bezeichnet ''seitentyp'' die unterschiedlichen Seitentypen, also ob es sich z.B. um eine Übersichts-, Artikel- oder Bildergalerieseite handelt. Übliche Werte dafür sind ''homepage'', ''index'', ''artikel'', ''bildgal''. In Apps mit Fullscreen-Anzeigen (z.B. epaper oder Zeitungs Apps) werden mit ''seitentyp'' die unterschiedlichen Anzeigeplätze innerhalb der Rubrik gemeint, also ob es sich z.B. erste, zweite oder dritte Swipe Anzeige handelt. Übliche Werte sind ''openingpage'', ''swipe_1'', ''swipe_2'', ''swipe_3'' usw.<br />
<br />
====Beispiel für die fiktive Rheinischer Kurier News App mit Banner-Anzeigen:====<br />
*/183/Rheinischer_Kurier_app_ios_phone<br />
*/183/Rheinischer_Kurier_app_ios_phone /homepage<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/index<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/artikel<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/bildgal<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/index<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/artikel<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/bildgal<br />
<br />
====Beispiel für die fiktive Rheinischer Kurier Epaper iPad App mit Fullscreen-Anzeigen:====<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/preloading_ad<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/openingpage<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_1<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_2<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_3<br />
<br />
{{Warnung|text=Der Adserver DFP erlaubt keine Sonderzeichen in den Adunits mit Ausnahme des Unterstrichs "_". Auch Umlaute und ß sind nicht erlaubt. level2, level3 und seitentyp sollten auch komplett kleingeschrieben werden.<br />
Generell sind die Adunits vom Google Ad Manager so gedacht, dass sie sich dynamisch aus dem CMS des Mandanten generieren lassen. Sollte das CMS so angelegt sein, dass eine andere Benennung sinnvoll erscheint, muss die iq digital frühzeitig kontaktiert werden, damit eine sinnvolle Lösung für alle Beteiligten gefunden werden kann.<br />
Bei Rubriken mit einem "und" bzw. einem "&" im Namen, wie z.B. Wirtschaft & Politik, bietet es sich an, nur die Hauptwörter getrennt mit einem Unterstrich aufzuführen, also wirtschaft_politik.}}<br />
<br />
===Creative Sizes===<br />
Im Google Ad Manager stehen die Creative Sizes für die Werbemittel-Größen. Dabei ist es möglich dass die tatsächlich ausgespielte Größe eines Werbemittels von der CreativeSize abweicht (in so einem Fall wird von Pseudogröße gesprochen). Die App muss für ein Adrequest der entsprechenden Platzierung alle zugehörigen Creative Sizes abfragen. Die oft lange Liste aus Größen ergibt sich aus den vielen möglichen unterschiedlichen Werbeformen und den Unterschieden in direkter und programmatischer Vermarktung.<br />
<br />
Bei Fullscreen Ad und Preloading Ad Platzierungen werden meist Größen für Portrait- und Landscape-Modus gemeinsam abgefragt.<br />
<br />
====Beispiele für Creative Sizes einer Banner Platzierung:====<br />
99x1, 320x1, 320x50, 320x53, 320x80, 320x160, 320x320, 300x50, 300x75, 300x100, 300x150, 300x250<br />
(In diesem Beispiel sind 99x1 und 320x1 Pseudogrößen. 99x1 ruft eine Ausbuchung vom Adserver, die die Werbeplatzierung ausblenden lässt. 320x1 ist eine historische Pseudogröße, welche in seltenen Fällen für von der Norm abweichende Werbemittel auf der Platzierung iqadtile1 verwendet wird. Jede Banner-Platzierung hat eine vergleichbare Pseudogröße der Form 320xY mit Y als Platzierungsbezeichnung, z.B. 320x1, 320x3, 320x4, 320x8 etc.<br />
<br />
====Beispiele für Creative Sizes einer Fullscreen Platzierung auf einem Android Tablet:====<br />
310x480, 480x310, 750x1024, 1024x750<br />
<br />
====Links zu Creative Sizes im Google Mobile Ads SDK:====<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner#multiple_ad_sizes<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/banner#multiple_ad_sizes<br />
und<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner#custom_ad_sizes<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/banner#custom_ad_sizes<br />
<br />
===Keywords (Anhängen von Key-Value-Paaren)===<br />
Ein Adrequest bekommt als CustomTargeting immer eine Gruppe aus Key-Value Paaren. Dabei können mehrere Werte (Values) mit einem Komma separiert sein. <br />
Diese Keywords haben mehrere Funktionen:<br />
*bestimmte Buchungen liefern nur aus, wenn diese Keywords existieren (z.B. bei bestimmten Produkten oder auch bei Testschaltungen)<br />
*Buchungen können über solche Keywords von der Auslieferung ausgeschlossen werden (z.B. um fehlerhafte Darstellungen einer Werbebuchung zu verhindern)<br />
*solche Keywords erlauben detaillierte Auslieferungs-Berichte (Reports)<br />
<br />
Die iq digital benutzt dabei bestimmte Key-Value-Paare. Hier sind die wichtigsten Keys erklärt:<br />
;kw:Generelle Keyword Liste. Hier sind meist mehrere Werte mit Komma separiert. Üblich sind einige Legacy-Werte (z.B. digtransform,nospa,enozqi). Hinzu kommen Bezeichner für die App oder die Seite (z.B. Rheinischer_Kurier_app_ios_phone), sowie die Werbeplatzierungsbezeichnung (z.B. iqadtile3).<br />
;tile:Die Nummer der Werbeplatzierung. Im Falle eines iqadtile3 also als Wert 3.<br />
;doc:Die Bezeichnung des Seitentyps. Gültige Werte sind homepage, index, artikel, bildgal<br />
;iqadtype:Die Angabe der Plattform. Gültige Werte sind online, mew, app, amp<br />
;appver:Die Bezeichnung der Appversions-Nummer (s.u.)<br />
<br />
Angaben welche Keywords für welche Platzierung verwendet werden sollen, finden sich in der creative_sizes_and_keywords.xlsc Tabelle, die von der iq digital zu Projektstart zur Verfügung gestellt wird.<br />
<br />
====Links zum CustomTargeting im Google Mobile Ads SDK====<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/targeting#custom_targeting<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/targeting#custom_targeting<br />
<br />
===Debugging===<br />
[[Datei:Easteregg dialog.png|300px|thumbnail|Beispiel aus einer Android App mit Textfeld für Keywords und Checkbox für USB Debugging]]<br />
Es muss eine "Easter-Egg"-Funktion in die App eingebaut werden, damit die iq digital Probleme und neue Werbeformen innerhalb der Live App (Version aus dem App- bzw. Playstore) testen kann. Der Adserver DFP bietet die Möglichkeiten Testschaltungen über ein Keyword in der App auszuspielen. <br />
<br />
In einem selten frequentierten Bereich der App, wie z.B. dem Impressum, sollte es daher die Möglichkeit für Eingeweihte geben, einen kleinen Dialog aufzurufen. Durch diesen kann man ein selbst gewähltes Keyword jedem zukünftigen Adrequest anhängen. Gleichzeitig oder durch das Aktivierung einer Checkbox kann der USB-Debug-Modus, um die Werbe Webviews in der Android App auf dem Desktop Chrome zu inspizieren, aktiviert werden. <br />
<pre><br />
WebView.setWebContentsDebuggingEnabled(true);<br />
</pre><br />
Danach kann man unter Android die Webviews der App im Desktop Chrome mit chrome://inspect einsehen. <br />
Dies ermöglicht Fehler in der Werbedarstellung besser zu analysieren.<br />
<br />
Ohne ein Debug Easter Egg in der App kann nach Livegang keine Testschaltung aufgesetzt werden und es können auch keine Probleme analysiert werden. Dies würde die Wartung der App von Seiten der iq digital verhindern und auch dem Mandanten keine Möglichkeit geben, selber seine App mit Testwerbung zu überprüfen.<br />
Die Keyword-Funktion dient daher, den Personenkreis einzuschränken, der die Testschaltungen zu Gesicht bekäme. <br />
<br />
Das Anhängen der Keywords ist beim Punkt [[#Anhängen von Key-Value-Paaren]] genauer erklärt.<br />
<br />
Mehrfache Keywords werden durch Kommata separiert.<br />
<br />
Es gibt vielfältige Optionen, wie das Easter-Egg aktiviert werden kann. Mehrfache/unsinnige Taps auf UI-Elemente oder eine ganz spezielle Eingabe ins Suchfeld seien hier beispielhaft genannt. Die iq digital erlaubt sich aber die Vorgabe, dass unter Android und iOS das Debug-Easter-Egg identisch aktiviert wird. Bei der Art der Aktivierung des Debug-Easter-Egg stehen wir gerne beratend zur Seite.<br />
<br />
===Wichtige Hinweise zu dieser Anleitung===<br />
Die Adunits für die Werbeplatzierungen werden von uns erst zu Projektstart erstellt und mit Testwerbung belegt. Anschließend werden die Adunits an den Mandanten übermittelt.<br />
Bitte nicht mit der im SDK fest eingebauten Logik für Test-Werbemittel arbeiten. Diese entspricht nicht der Art und Weise wie die von der iq digital vermarktete Werbung funktioniert und führt zu Missverständnissen.<br />
Stattdessen sind auf den Adunits permanent Buchungen mit Test-Werbemitteln aktiv welche über ein spezielles Test-Keyword im Adrequest vom Adserver ausgeliefert werden.<br />
<br />
===Ansprechpartner iq digital===<br />
Die iq digital steht für Fragen und Kommentare gerne zur Verfügung. Sollten wir einmal nicht weiterhelfen können, ist es uns möglich einen Entwickler von Google als Ansprechpartner in die Diskussion mit einzubeziehen.<br />
<br />
====Tim Lohmann (Mobile Developer Ad Technology)====<br />
;Telefon:+49 211 887 2336<br />
;E-Mail:tim.lohmann@iqdigital.de<br />
<br />
===Wichtige Dokumente===<br />
====Liste der Creative Sizes und Keywords für jede Platzierung:====<br />
*<datum>_dfp_creative_sizes.xlsx<br />
====Liste der Adunits:====<br />
(diese dienen nur als Orientierungshilfe. Die Apps sollten diese Zonen dynamisch aus dem CMS generieren)<br />
<appname> muss durch den entsprechenden App Namen ersetzt werden.<br />
*<datum>_adunits_<appname>_android_tablet.txt<br />
*<datum>_adunits_<appname>_ios_tablet.txt<br />
*<datum>_adunits_<appname>_ android_phone.txt<br />
*<datum>_adunits_<appname>_ios_phone.txt<br />
<br />
<br />
<br />
<br />
==Preloading Ad==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist eine Display ausfüllende Anzeige, die während des Ladescreen (Splashscreen) der App angezeigt wird. Sie wird für 5s angezeigt und schließt dann automatisch. In einer Ecke wird ein Close-Button angezeigt, um vorzeitig zum Inhalt der App zu gelangen.<br />
<br />
[[Datei:Preloading Ad 1.png|x300px]]<br />
[[Datei:Preloading Ad 2.png|300px]]<br />
|position=<br />
Die Platzierung legt sich wie ein Overlay über den Splash-Screen der App. Im Hintergrund kann die App den Content laden.<br />
|template=<br />
*skaliert Werbemittel bei Beibehaltung des Seitenverhältnisses entsprechend der Abmaße des Werbecontainers<br />
*schließt das Werbemittel nach 5s<br />
*positioniert und zentriert das Werbemittel<br />
*zeigt in einer Ecke einen Close-Button an, mit dem der Nutzer jederzeit zum Content zurückkehren kann.<br />
*bei Orientationchange- oder Resize-Event: skaliert die Werbemittel enstprechend der neuen Maße. Dies kann mehrere hundert Millisekunden dauern, bis alle neuen Maße feststehen und vom Webviewbrowser zur Verfügung gestellt werden.<br />
Durch die Skalierung können je nach Display am Rand schwarze oder weiße Balken entstehen. Dies passiert immer dann, wenn das Display ein anderes Seitenverhältnis als die Werbemittel hat.<br />
|app=<br />
*sendet das Adrequest während des Splash-Screens<br />
*im Falle einer Buchung: <br />
**erzeugt das Interstitial mit Hilfe des GMA SDKs<br />
**vergrößert den Werbecontainers auf Display-Größe<br />
*bei Orientationchange- oder Resize-Event: passt die Werbeseite und den Werbecontainer an die neuen Display-Maße an<br />
*bereitet im Hintergrund weiter den Content vor<br />
*im Falle '''keiner''' Buchung: wird normal der Content geladen<br />
|workflowad=<br />
#App wird vom Nutzer gestartet<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt das Interstitial<br />
#Werbetemplate skaliert Werbemittel in dem Container<br />
#nach 5s schließt sich das Ad automatisch und der Content dahinter wird sichtbar<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet, dass er keine Werbebuchung hat<br />
#App lädt ganz normal den Content<br />
|creativesizes=<br />
;Smartphone:320x480 bzw. 480x320<br />
;Tablet:768x1024 bzw. 1024x768<br />(bei Android auch zusätzlich: 320x480 bzw. 480x320)<br />
{{Warnung|text=Die Creativesizes sind Pseudogrößen, sie entsprechen nicht den tatsächlichen Abmaßen des Werbemittels.}}<br />
|keywords=<br />
;kw:iqadtilePre<br />
;tile:0<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/interstitial<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/interstitial<br />
}}<br />
<br />
==Fullscreen Anzeigen (auch Swipe Anzeigen oder Swipe-Ads genannt)==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist eine Display ausfüllende Anzeigen, die zwischen zwei regulären Content-Seiten in der App angezeigt wird. Sie lässt sich horizontal wie die übrigen Content-Seiten swipen und wird von keinen Teilen der App (wie App-Header oder -Footer) überlagert. Sollte der Nutzer ein Orientationchange-Event erzeugen, passt sich die Anzeige dem neuen Seitenverhältnis an.<br />
<br />
[[Datei:Fullscreen Ad 1.png|x300px]]<br />
[[Datei:Fullscreen Ad 2.png|300px]]<br />
|position=<br />
Die Platzierung ist dynamisch zwischen zwei Content-Seiten eingebettet. Dabei befindet sich die Werbeplatzierung immer rechts neben der Seite, die Ihr im Content zugeordnet ist, z.B. Politik/swipe_1 meint, dass zuerst die 1. Politik-Content-Seite angezeigt wird und beim nächsten Swipe die Werbe-Seite erscheint <br />
|template=<br />
*skaliert Werbemittel bei Beibehaltung des Seitenverhältnisses entsprechend der Abmaße des Werbecontainers<br />
*positioniert und zentriert das Werbemittel<br />
*bei Orientationchange- oder Resize-Event: skaliert die Werbemittel enstprechend der neuen Maße. Dies kann mehrere hundert Millisekunden dauern, bis alle neuen Maße feststehen und vom Webviewbrowser zur Verfügung gestellt werden.<br />
Durch die Skalierung können je nach Display am Rand schwarze oder weiße Balken entstehen. Dies passiert immer dann, wenn das Display ein anderes Seitenverhältnis als die Werbemittel hat.<br />
|app=<br />
*sendet das Adrequest 1-2 Content-Seiten vor der Platzierung ab, damit der Adserver Zeit genug hat, die Werbung zu liefern<br />
*erzeugt dynamisch eine Werbeseite im Seitenfluss rechts neben der zugeordneten Content-Seite<br />
*im Falle einer Buchung: vergößert den Werbecontainers auf Display-Größe<br />
*blendet App-Header und -Footer aus (falls erforderlich)<br />
*bei Orientationchange- oder Resize-Event: passt die Werbeseite und den Werbecontainer an die neuen Display-Maße an<br />
*im Falle '''keiner''' Buchung: entfernt die Werbeseite aus dem Seitenfluss<br />
|workflowad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt dynamisch die Werbeseite<br />
#Werbecontainer wird auf die Display-Abmaße aufgezogen<br />
#Werbetemplate skaliert Werbemittel in dem Container<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet, dass er keine Werbebuchung hat<br />
#App erzeugt '''keine''' Werbeseite bzw. entfernt eine zuvor erzeugte Werbeseite aus dem Seitenfluss<br />
|creativesizes=<br />
;Smartphone:310x480 bzw. 480x310<br />
;Tablet:750x1024 bzw. 1024x750<br />(bei Android auch zusätzlich: 310x480 bzw. 480x310)<br />
{{Warnung|text=Die Creativesizes sind Pseudogrößen, sie entsprechen nicht den tatsächlichen Abmaßen des Werbemittels.}}<br />
|keywords=<br />
;kw:iqadtileFull<br />
;tile:1<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
}}<br />
<br />
==Banner-Anzeigen==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist ein Banner innerhalb einer Content-Seite. Je nach Werbeform kann diese Anzeige mehr oder weniger Interaktivität für den Endnutzer besitzen. Sie kann anmiert oder eine komplexe HTML-Anzeige sein. Es ist auch möglich dass die Anzeige durch bestimmte Ereignisse sich in der Größe verändert.<br />
<br />
[[Datei:Mobile High Impact Ad.png|x300px]]<br />
|position=<br />
Die Platzierung ist zwischen Content-Elemente einer Seite platziert und erfordert eine Anzeigenkennzeichnung "Anzeige" oberhalb der Platzierung. Üblicherweise befinden sich mehrere Platzierungen innerhalb einer Seite.<br />
|template=<br />
*kümmert sich um die Funktionalität, welche je nach Werbeform simpel oder komplex sein kann.<br />
|app=<br />
*sendet die Adrequests für alle Platzierungen einer Seite<br />
*baut für jede Platzierung eine Anzeigenkennzeichnung "Anzeige" oberhalb der Platzierung ein<br />
*erstellt den Werbecontainer mit Größe, welche in der Antwort vom Andserver auf das Adrequest mitgeliefert wird<br />
*lauscht mit dem EventListener auf mögliche setsize- oder noad-Events und verändert den Werbecontainer entsprechend.<br />
*im Falle einer Ausbuchung:<br />
**empfängt sie ein setsize-Event muss sie die Werbeplatzierung und den Werbecontainer an die neue Größe anpassen, sofern sich diese von der aktuellen Größe unterscheidet<br />
**empfängt sie ein noad-Event, muss sie die Werbeplatzierung und die zugehörige Anzeigenkennzeichnung komplett entfernen bzw. ausblenden<br />
|workflowad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt Werbecontainer mit der Größe, die in der Response des Adservers enthalten ist<br />
#eventuell muss der Werbecontainer auf Grund eines setsize-Events angepasst werden<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Ausbuchung als Werbebuchung<br />
#App empfängt eine Response mit der Größe 99x1 und erhält kurze Zeit später ein noad-Event<br />
#App blendet Werbeplatzierung und Anzeigenkennzeichnung bis zum nächsten Pagerequest aus<br />
|creativesizes=<br />
320x50, 320x53, 320x80, 320x106, 320x160, 320x320, 320x416, 320x460, 300x50, 300x75, 300x100, 300x150, 300x200, 300x250, 300x600<br />
Weitere Größen sind möglich. Je nach Platzierung wird nur ein Auszug der Größenliste im Adrequest verwendet. Eine genaue Zuordnung erfolgt in einem separaten Dokument.<br />
|keywords=<br />
;kw:nospa, enozqi, digtransform, iqadtileX*<br />
;tile:X*<br />
X entspricht dabei der Nummer der Platzierung, z.B. iqadtile1, iqadtile3, iqadtile4, iqadtile99, iqadtile8<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
}}<br />
<br />
==Dokumentation der iq digital App Events==<br />
Die Werbetemplates der iq digital senden in bestimmten Situationen Events an die App. Die App muss auf diese Events reagieren und gemäß der folgenden Spezifikation den Werbecontainer verändern. Die App Events bestehen dabei immer aus dem Namen und einem "data"-String.<br />
<br />
===Wichtige Links in der GMA SDK Dokumentation===<br />
*[https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner#app_events GMA SDK iOS App Events]<br />
*[https://developers.google.com/ad-manager/mobile-ads-sdk/android/banner#app_events GMA SDK Android App Events]<br />
<br />
===setsize – Event===<br />
Das setsize-Event wird von den Werbetemplates der iq digital aufgerufen, um die Größe des Adviews der Werbeplatzierung zu verändern.<br />
Der "data"-String hat das Format '''"width:height"''' für eine sofortige Änderung der Größe.<br />
<br />
=====Parameter=====<br />
Die Parameter werden mit einem Doppelpunkt von einander getrennt.<br />
;width:Die neue Breite des Adviews in Pixel (Device-Independent-Pixel) als ganze Zahl.<br />
;height:Die neue Höhe des Adviews in Pixel (Device-Independent-Pixel) als ganze Zahl.<br />
{{Warnung|text=Ausnahme: Für eine Anpassung auf die maximal verfügbare Breite oder Höhe wird der Wert '''max''' verwendet. Mit maximaler verfügbare Breite bzw. Höhe ist im Normalfall die Displaybreite bzw. -Höhe gemeint. Sollte eine App hier zwingende Abweichungen haben, wie einen notwendigen Rand, muss dies unbedingt '''frühzeitig mit iq digital''' besprochen werden.}}<br />
<br />
<br />
Beispielaufrufe:<br />
;<nowiki>"setsize","320:80"</nowiki>:Adview bekommt die neue Größe 320x80 Pixel<br />
;<nowiki>"setsize","320:240"</nowiki>:Adview bekommt die neue Größe 320x240 Pixel<br />
;<nowiki>"setsize","max:160"</nowiki>:Adview wird auf die maximal verfügbare Breite und eine Höhe von 160 Pixel angepasst<br />
;<nowiki>"setsize","max:max"</nowiki>:Adview wird auf die maximal verfügbare Breite und die maximal verfügbare Höhe angepasst<br />
<br />
===noad – Event===<br />
Das noad-Event wird von den Werbetemplates der iq digital aufgerufen, um der App zu signalisieren, dass für die Platzierung keine Buchung vorliegt und die App die Werbeplatzierung '''und die zugehörige Anzeigenkennzeichnung''' entfernen soll.<br />
<br />
Der "data"-String hat für dieses Event keine Bedeutung und kann ignoriert werden. Da das AppEventListener Interface von Google eine @NonNull Annotation für data hat, wird beim noad-Event einfach der Wert "noad" für data übergeben, da der leere String von Google als null umgewandelt wird.<br />
<br />
[[Kategorie:Ad Technology]][[Kategorie:APP]]<br />
[[en:Integration of the Google Mobile Ads SDK]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=281Adcontroller2023-04-14T09:47:17Z<p>Efeigegernoth: /* Anzeigen-Containermodell */</p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Hosting und Abruf des AC-Deployment vom iq-CDN <br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Alternativ zum Hosting und unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]"<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpoltik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Anzeigen-Containermodell==<br />
<br />
Die Positionierung der Platzhaltercontainer der Anzeigen in der Publisher Seite erfolgt nach dem im Voraus abgestimmten Vertaggungsplan.<br />
Die eigentliche Integration der Container sollte dem folgenden Muster gemäß geschehen.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_[N U M M E R]" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# Das Data Attribute "'''data-device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist. Mögliche Werte: '''desktop | tablet | mobile'''<br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="[D E V I C E T Y P E]"></div><br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="[D E V I C E T Y P E]"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen Signalfunktionen==<br />
<br />
===AdController.finalize(..)===<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
===IQDComplete() - Page-Load Signal===<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Ad_Technology&diff=277Ad Technology2023-04-13T09:02:10Z<p>Efeigegernoth: </p>
<hr />
<div><div class="chapterlist"><br />
<div class="clheader">Ad Technology</div><br />
*Online/Mobile Web<br />
*[[Adcontroller]]<br />
*[[Creative Identifier]]<br />
*App<br />
*[[Einbau des Google Mobile Ads SDK]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Banner-Anzeigen]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Fullscreen-Anzeigen]]<br />
*[[Prebid Mobile SDK in Apps]]<br />
*[[Akzeptanzkriterien Werbeintegration mit Google Mobile SDK]]<br />
*AMP<br />
*[[Aufbau eines amp-ad-Tags]]<br />
*[[AMP Anzeigenkennzeichnung]]<br />
*[[Wechsel Prebid Server zu Prebid Server Premium]]<br />
</div><br />
<noinclude>[[Kategorie:Ad Technology]]<br />
[[en:Ad Technology]]</noinclude></div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=(Deprecated)_Adcontroller&diff=276(Deprecated) Adcontroller2023-04-13T08:59:24Z<p>Efeigegernoth: Die Seite wurde neu angelegt: „==Implementierung AdController-Deployment (API + Konfiguration)== ===Allgemeine Informationen=== Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung. Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessuale…“</p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Hosting und Abruf des AC-Deployment vom iq-CDN <br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Alternativ zum Hosting und unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]"<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpoltik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Neues Anzeigen-Containermodell==<br />
<br />
Im neuen Anzeigen-Containermodell werden nicht mehr die Werbeplätze vom Mandanten/Publisher direkt in die Seite integriert, sondern nur noch Platzhalter Div Container an die nach Vertaggungsplan entsprechenden Stellen, in welche dann jeweils IQD die passenden Werbeplätze integriert.<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# 1. Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# 2. Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# 3. Das Data Attribute "'''data_device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_2" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="tablet"></div><br />
<br />
<br />
<br />
</syntaxhighlight><br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="tablet"></div><br />
<br />
<br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="tablet"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
====Topbannerkonstrukt in Pos_01 Desktop====<br />
<br />
Der Platzhalter für Desktop mit der "data-placement" Nummer "pos_1" stellt unser altes Topbanner-Konstrukt dar und umfasst daher den Einbau mehrerer Werbeplätze (iqadtile1, iqadtile20, iqadtile21). Um dies kenntlich zu machen sind im Vertaggungsplan auch noch "pos_out_1" und "pos_out_2" eingezeichnet.<br />
Auf Ihren Einbau sollte aber verzichtet werden, da Ihre Funktion bereits komplett von "pos_1" übernommen wird.<br />
<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_1" data-device="desktop"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen==<br />
<br />
===Signale & Anzeigestruktur===<br />
<br />
====AdController.render(..)====<br />
<br />
Nach Initialisierung des AdControllers ist dieser bereit für das Absetzen einer Anzeigenanforderung an den AdServer. Auslöser einer Anzeigenanforderung ist die jeweilige Anzeigenplatzierung mit entsprechender AdController.render-Methode. In der Render-Phase des AdControllers werden die Level-Informationen des CMS-Mandanten-Objects an den AdRequest-URL-Builder des AdControllers übergeben und mit weiteren Konfigurationsparametern des Deployments zu einem AdServer-konformen Anzeigen-Request zusammengeführt und versendet.<br />
<br />
Welche Anzeigenplatzierungen für das jeweilige Layout Ihrer Website umzusetzen ist, ist im Vorfeld mit iq digital hinsichtlich Vermarktungsmöglichkeiten zu besprechen. Die Anzeigenplatzierung ist durch ein eindeutiges DOM-Element mit exemplarischer id=iqadtileT I L E N U M B E R in Ihrem HTML-MarkUp zu implementieren. Der übergebene Positionsschlüssel innerhalb des AdCongroller.render-Aufrufs bewirkt eine asynchrone Einbindung via DOM-Insertion der gelieferten Anzeige im Zielcontainer<br />
<br />
Bitte fügen Sie keinen weitere DOM oder Script-Bestandteile innerhalb dieser Anzeigencontainer ein. Die Anzeigen-Kennzeichnung der Werbeplatzierungen erfolgt optimalerweise durch iq digital. Gerne besprechen wir diesen Punkt gemeinsam mit Ihnen.<br />
<br />
====TopBanner Konstrukt====<br />
<br />
Anzeigenplatzierung TopBanner Konstrukt, beinhaltet die erste Position iqadtile1 und beide Sky Postionen (bitte 1:1 genauso implementieren)<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this construct for the top positions (iqadtile1), the sky right part (iqadtile21) & the left sky part (iqadtile20) and the out-of-page position (iqadtileOOP)--><br />
<div id="iqadtileOOP"><br />
<script><br />
AdController.render('iqadtileOOP');<br />
</script><br />
</div><br />
<div id="iqd_mainAd"><br />
<div id="iqd_align_Ad"><br />
<div id="iqd_topAd"><br />
<div id="iqadtile1"><br />
<script><br />
AdController.render('iqadtile1');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_leftAd"><br />
<div id="iqadtile20"><br />
<script><br />
AdController.render('iqadtile20');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_rightAd"><br />
<div id="iqadtile21"><br />
<script><br />
AdController.render('iqadtile21');<br />
</script><br />
</div><br />
</div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
====weitere Anzeigepositionen====<br />
<br />
Alle weitere Platzierungen nach folgender Muster umsetzen<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this pattern for all other positions --><br />
<div id="iqadtileT I L E N U M B E R"><br />
<script><br />
if (typeof AdController !== 'undefined') {<br />
AdController.render('iqadtileT I L E N U M B E R');<br />
}<br />
</script><br />
</div><br />
</syntaxhighlight><br />
<br />
====AdController.finalize(..)====<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====IQDComplete() - Page-Load Signal====<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Ad_Technology&diff=275Ad Technology2023-04-13T08:59:00Z<p>Efeigegernoth: </p>
<hr />
<div><div class="chapterlist"><br />
<div class="clheader">Ad Technology</div><br />
*Online/Mobile Web<br />
*[[Adcontroller]]<br />
*[[Adcontroller Alt]]<br />
*[[(Deprecated) Adcontroller]]<br />
*[[Creative Identifier]]<br />
*App<br />
*[[Einbau des Google Mobile Ads SDK]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Banner-Anzeigen]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Fullscreen-Anzeigen]]<br />
*[[Prebid Mobile SDK in Apps]]<br />
*[[Akzeptanzkriterien Werbeintegration mit Google Mobile SDK]]<br />
*AMP<br />
*[[Aufbau eines amp-ad-Tags]]<br />
*[[AMP Anzeigenkennzeichnung]]<br />
*[[Wechsel Prebid Server zu Prebid Server Premium]]<br />
</div><br />
<noinclude>[[Kategorie:Ad Technology]]<br />
[[en:Ad Technology]]</noinclude></div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Ad_Technology&diff=274Ad Technology2023-04-13T08:51:00Z<p>Efeigegernoth: </p>
<hr />
<div><div class="chapterlist"><br />
<div class="clheader">Ad Technology</div><br />
*Online/Mobile Web<br />
*[[Adcontroller]]<br />
*[[Adcontroller Alt]]<br />
*[[Creative Identifier]]<br />
*App<br />
*[[Einbau des Google Mobile Ads SDK]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Banner-Anzeigen]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Fullscreen-Anzeigen]]<br />
*[[Prebid Mobile SDK in Apps]]<br />
*[[Akzeptanzkriterien Werbeintegration mit Google Mobile SDK]]<br />
*AMP<br />
*[[Aufbau eines amp-ad-Tags]]<br />
*[[AMP Anzeigenkennzeichnung]]<br />
*[[Wechsel Prebid Server zu Prebid Server Premium]]<br />
</div><br />
<noinclude>[[Kategorie:Ad Technology]]<br />
[[en:Ad Technology]]</noinclude></div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=273Adcontroller2023-04-13T08:49:19Z<p>Efeigegernoth: </p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Hosting und Abruf des AC-Deployment vom iq-CDN <br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Alternativ zum Hosting und unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]"<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpoltik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Neues Anzeigen-Containermodell==<br />
<br />
Im neuen Anzeigen-Containermodell werden nicht mehr die Werbeplätze vom Mandanten/Publisher direkt in die Seite integriert, sondern nur noch Platzhalter Div Container an die nach Vertaggungsplan entsprechenden Stellen, in welche dann jeweils IQD die passenden Werbeplätze integriert.<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# 1. Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# 2. Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# 3. Das Data Attribute "'''data_device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_2" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="tablet"></div><br />
<br />
<br />
<br />
</syntaxhighlight><br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="tablet"></div><br />
<br />
<br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="tablet"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
====Topbannerkonstrukt in Pos_01 Desktop====<br />
<br />
Der Platzhalter für Desktop mit der "data-placement" Nummer "pos_1" stellt unser altes Topbanner-Konstrukt dar und umfasst daher den Einbau mehrerer Werbeplätze (iqadtile1, iqadtile20, iqadtile21). Um dies kenntlich zu machen sind im Vertaggungsplan auch noch "pos_out_1" und "pos_out_2" eingezeichnet.<br />
Auf Ihren Einbau sollte aber verzichtet werden, da Ihre Funktion bereits komplett von "pos_1" übernommen wird.<br />
<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_1" data-device="desktop"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen Signalfunktionen==<br />
<br />
<br />
<br />
===AdController.finalize(..)===<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
===IQDComplete() - Page-Load Signal===<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Ad_Technology&diff=271Ad Technology2023-04-13T08:48:16Z<p>Efeigegernoth: </p>
<hr />
<div><div class="chapterlist"><br />
<div class="clheader">Ad Technology</div><br />
*Online/Mobile Web<br />
*[[Adcontroller]]<br />
*[[Adcontroller Neu]]<br />
*[[Adcontroller Alt]]<br />
*[[Creative Identifier]]<br />
*App<br />
*[[Einbau des Google Mobile Ads SDK]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Banner-Anzeigen]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Fullscreen-Anzeigen]]<br />
*[[Prebid Mobile SDK in Apps]]<br />
*[[Akzeptanzkriterien Werbeintegration mit Google Mobile SDK]]<br />
*AMP<br />
*[[Aufbau eines amp-ad-Tags]]<br />
*[[AMP Anzeigenkennzeichnung]]<br />
*[[Wechsel Prebid Server zu Prebid Server Premium]]<br />
</div><br />
<noinclude>[[Kategorie:Ad Technology]]<br />
[[en:Ad Technology]]</noinclude></div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Ad_Technology&diff=268Ad Technology2023-04-13T08:41:28Z<p>Efeigegernoth: </p>
<hr />
<div><div class="chapterlist"><br />
<div class="clheader">Ad Technology</div><br />
*Online/Mobile Web<br />
*[[Adcontroller]]<br />
*[[Adcontroller Neu]]<br />
*[[Creative Identifier]]<br />
*App<br />
*[[Einbau des Google Mobile Ads SDK]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Banner-Anzeigen]]<br />
*[[Grundsätzliche Regeln und Hinweise zum Einbau von Fullscreen-Anzeigen]]<br />
*[[Prebid Mobile SDK in Apps]]<br />
*[[Akzeptanzkriterien Werbeintegration mit Google Mobile SDK]]<br />
*AMP<br />
*[[Aufbau eines amp-ad-Tags]]<br />
*[[AMP Anzeigenkennzeichnung]]<br />
*[[Wechsel Prebid Server zu Prebid Server Premium]]<br />
</div><br />
<noinclude>[[Kategorie:Ad Technology]]<br />
[[en:Ad Technology]]</noinclude></div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=267Adcontroller2023-03-21T15:34:31Z<p>Efeigegernoth: /* Neues Anzeigen-Containermodell */</p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Hosting und Abruf des AC-Deployment vom iq-CDN <br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Alternativ zum Hosting und unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]"<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpoltik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Neues Anzeigen-Containermodell==<br />
<br />
Im neuen Anzeigen-Containermodell werden nicht mehr die Werbeplätze vom Mandanten/Publisher direkt in die Seite integriert, sondern nur noch Platzhalter Div Container an die nach Vertaggungsplan entsprechenden Stellen, in welche dann jeweils IQD die passenden Werbeplätze integriert.<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# 1. Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# 2. Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# 3. Das Data Attribute "'''data_device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_2" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="tablet"></div><br />
<br />
<br />
<br />
</syntaxhighlight><br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="tablet"></div><br />
<br />
<br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="tablet"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
====Topbannerkonstrukt in Pos_01 Desktop====<br />
<br />
Der Platzhalter für Desktop mit der "data-placement" Nummer "pos_1" stellt unser altes Topbanner-Konstrukt dar und umfasst daher den Einbau mehrerer Werbeplätze (iqadtile1, iqadtile20, iqadtile21). Um dies kenntlich zu machen sind im Vertaggungsplan auch noch "pos_out_1" und "pos_out_2" eingezeichnet.<br />
Auf Ihren Einbau sollte aber verzichtet werden, da Ihre Funktion bereits komplett von "pos_1" übernommen wird.<br />
<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_1" data-device="desktop"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen==<br />
<br />
===Signale & Anzeigestruktur===<br />
<br />
====AdController.render(..)====<br />
<br />
Nach Initialisierung des AdControllers ist dieser bereit für das Absetzen einer Anzeigenanforderung an den AdServer. Auslöser einer Anzeigenanforderung ist die jeweilige Anzeigenplatzierung mit entsprechender AdController.render-Methode. In der Render-Phase des AdControllers werden die Level-Informationen des CMS-Mandanten-Objects an den AdRequest-URL-Builder des AdControllers übergeben und mit weiteren Konfigurationsparametern des Deployments zu einem AdServer-konformen Anzeigen-Request zusammengeführt und versendet.<br />
<br />
Welche Anzeigenplatzierungen für das jeweilige Layout Ihrer Website umzusetzen ist, ist im Vorfeld mit iq digital hinsichtlich Vermarktungsmöglichkeiten zu besprechen. Die Anzeigenplatzierung ist durch ein eindeutiges DOM-Element mit exemplarischer id=iqadtileT I L E N U M B E R in Ihrem HTML-MarkUp zu implementieren. Der übergebene Positionsschlüssel innerhalb des AdCongroller.render-Aufrufs bewirkt eine asynchrone Einbindung via DOM-Insertion der gelieferten Anzeige im Zielcontainer<br />
<br />
Bitte fügen Sie keinen weitere DOM oder Script-Bestandteile innerhalb dieser Anzeigencontainer ein. Die Anzeigen-Kennzeichnung der Werbeplatzierungen erfolgt optimalerweise durch iq digital. Gerne besprechen wir diesen Punkt gemeinsam mit Ihnen.<br />
<br />
====TopBanner Konstrukt====<br />
<br />
Anzeigenplatzierung TopBanner Konstrukt, beinhaltet die erste Position iqadtile1 und beide Sky Postionen (bitte 1:1 genauso implementieren)<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this construct for the top positions (iqadtile1), the sky right part (iqadtile21) & the left sky part (iqadtile20) and the out-of-page position (iqadtileOOP)--><br />
<div id="iqadtileOOP"><br />
<script><br />
AdController.render('iqadtileOOP');<br />
</script><br />
</div><br />
<div id="iqd_mainAd"><br />
<div id="iqd_align_Ad"><br />
<div id="iqd_topAd"><br />
<div id="iqadtile1"><br />
<script><br />
AdController.render('iqadtile1');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_leftAd"><br />
<div id="iqadtile20"><br />
<script><br />
AdController.render('iqadtile20');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_rightAd"><br />
<div id="iqadtile21"><br />
<script><br />
AdController.render('iqadtile21');<br />
</script><br />
</div><br />
</div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
====weitere Anzeigepositionen====<br />
<br />
Alle weitere Platzierungen nach folgender Muster umsetzen<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this pattern for all other positions --><br />
<div id="iqadtileT I L E N U M B E R"><br />
<script><br />
if (typeof AdController !== 'undefined') {<br />
AdController.render('iqadtileT I L E N U M B E R');<br />
}<br />
</script><br />
</div><br />
</syntaxhighlight><br />
<br />
====AdController.finalize(..)====<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====IQDComplete() - Page-Load Signal====<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=266Adcontroller2023-03-21T15:33:51Z<p>Efeigegernoth: /* Neues Anzeigen-Containermodell */</p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Hosting und Abruf des AC-Deployment vom iq-CDN <br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Alternativ zum Hosting und unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]"<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpoltik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Neues Anzeigen-Containermodell==<br />
<br />
Im neuen Anzeigen-Containermodell werden nicht mehr die Werbeplätze vom Mandanten/Publisher direkt in die Seite integriert, sondern nur noch Platzhalter Div Container an die nach Vertaggungsplan entsprechenden Stellen, in welche dann jeweils IQD die passenden Werbeplätze integriert.<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# 1. Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# 2. Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# 3. Das Data Attribute "'''data_device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop, Mobile oder Tablet Werbeausspielung gedacht ist.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_2" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="mobile"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="tablet"></div><br />
<br />
<br />
<br />
</syntaxhighlight><br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="mobile"></div><br />
<br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="mobile"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
====Topbannerkonstrukt in Pos_01 Desktop====<br />
<br />
Der Platzhalter für Desktop mit der "data-placement" Nummer "pos_1" stellt unser altes Topbanner-Konstrukt dar und umfasst daher den Einbau mehrerer Werbeplätze (iqadtile1, iqadtile20, iqadtile21). Um dies kenntlich zu machen sind im Vertaggungsplan auch noch "pos_out_1" und "pos_out_2" eingezeichnet.<br />
Auf Ihren Einbau sollte aber verzichtet werden, da Ihre Funktion bereits komplett von "pos_1" übernommen wird.<br />
<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_1" data-device="desktop"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Anzeigenplatzierungen==<br />
<br />
===Signale & Anzeigestruktur===<br />
<br />
====AdController.render(..)====<br />
<br />
Nach Initialisierung des AdControllers ist dieser bereit für das Absetzen einer Anzeigenanforderung an den AdServer. Auslöser einer Anzeigenanforderung ist die jeweilige Anzeigenplatzierung mit entsprechender AdController.render-Methode. In der Render-Phase des AdControllers werden die Level-Informationen des CMS-Mandanten-Objects an den AdRequest-URL-Builder des AdControllers übergeben und mit weiteren Konfigurationsparametern des Deployments zu einem AdServer-konformen Anzeigen-Request zusammengeführt und versendet.<br />
<br />
Welche Anzeigenplatzierungen für das jeweilige Layout Ihrer Website umzusetzen ist, ist im Vorfeld mit iq digital hinsichtlich Vermarktungsmöglichkeiten zu besprechen. Die Anzeigenplatzierung ist durch ein eindeutiges DOM-Element mit exemplarischer id=iqadtileT I L E N U M B E R in Ihrem HTML-MarkUp zu implementieren. Der übergebene Positionsschlüssel innerhalb des AdCongroller.render-Aufrufs bewirkt eine asynchrone Einbindung via DOM-Insertion der gelieferten Anzeige im Zielcontainer<br />
<br />
Bitte fügen Sie keinen weitere DOM oder Script-Bestandteile innerhalb dieser Anzeigencontainer ein. Die Anzeigen-Kennzeichnung der Werbeplatzierungen erfolgt optimalerweise durch iq digital. Gerne besprechen wir diesen Punkt gemeinsam mit Ihnen.<br />
<br />
====TopBanner Konstrukt====<br />
<br />
Anzeigenplatzierung TopBanner Konstrukt, beinhaltet die erste Position iqadtile1 und beide Sky Postionen (bitte 1:1 genauso implementieren)<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this construct for the top positions (iqadtile1), the sky right part (iqadtile21) & the left sky part (iqadtile20) and the out-of-page position (iqadtileOOP)--><br />
<div id="iqadtileOOP"><br />
<script><br />
AdController.render('iqadtileOOP');<br />
</script><br />
</div><br />
<div id="iqd_mainAd"><br />
<div id="iqd_align_Ad"><br />
<div id="iqd_topAd"><br />
<div id="iqadtile1"><br />
<script><br />
AdController.render('iqadtile1');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_leftAd"><br />
<div id="iqadtile20"><br />
<script><br />
AdController.render('iqadtile20');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_rightAd"><br />
<div id="iqadtile21"><br />
<script><br />
AdController.render('iqadtile21');<br />
</script><br />
</div><br />
</div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
====weitere Anzeigepositionen====<br />
<br />
Alle weitere Platzierungen nach folgender Muster umsetzen<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this pattern for all other positions --><br />
<div id="iqadtileT I L E N U M B E R"><br />
<script><br />
if (typeof AdController !== 'undefined') {<br />
AdController.render('iqadtileT I L E N U M B E R');<br />
}<br />
</script><br />
</div><br />
</syntaxhighlight><br />
<br />
====AdController.finalize(..)====<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====IQDComplete() - Page-Load Signal====<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=265Adcontroller2023-03-20T10:14:05Z<p>Efeigegernoth: </p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Hosting und Abruf des AC-Deployment vom iq-CDN <br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Alternativ zum Hosting und unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]"<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpoltik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Neues Anzeigen-Containermodell==<br />
<br />
Im neuen Anzeigen-Containermodell werden nicht mehr die Werbeplätze vom Mandanten/Publisher direkt in die Seite integriert, sondern nur noch Platzhalter Div Container an die nach Vertaggungsplan entsprechenden Stellen, in welche dann jeweils IQD die passenden Werbeplätze integriert.<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# 1. Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# 2. Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# 3. Das Data Attribute "'''data_device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop oder Mobile Werbeausspielung gedacht ist.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_2" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="mobile"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="mobile"></div><br />
<br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="mobile"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
====Topbannerkonstrukt in Pos_01 Desktop====<br />
<br />
Der Platzhalter für Desktop mit der "data-placement" Nummer "pos_01" stellt unser altes Topbanner-Konstrukt dar und umfasst daher den Einbau mehrerer Werbeplätze (iqadtile1, iqadtile20, iqadtile21). Um dies kenntlich zu machen sind im Vertaggungsplan auch noch "pos_out_1" und "pos_out_2" eingezeichnet.<br />
Auf Ihren Einbau sollte aber verzichtet werden, da Ihre Funktion bereits komplett von "pos_01" übernommen wird.<br />
<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_1" data-device="desktop"></div><br />
<br />
</syntaxhighlight><br />
<br />
<br />
==Anzeigenplatzierungen==<br />
<br />
===Signale & Anzeigestruktur===<br />
<br />
====AdController.render(..)====<br />
<br />
Nach Initialisierung des AdControllers ist dieser bereit für das Absetzen einer Anzeigenanforderung an den AdServer. Auslöser einer Anzeigenanforderung ist die jeweilige Anzeigenplatzierung mit entsprechender AdController.render-Methode. In der Render-Phase des AdControllers werden die Level-Informationen des CMS-Mandanten-Objects an den AdRequest-URL-Builder des AdControllers übergeben und mit weiteren Konfigurationsparametern des Deployments zu einem AdServer-konformen Anzeigen-Request zusammengeführt und versendet.<br />
<br />
Welche Anzeigenplatzierungen für das jeweilige Layout Ihrer Website umzusetzen ist, ist im Vorfeld mit iq digital hinsichtlich Vermarktungsmöglichkeiten zu besprechen. Die Anzeigenplatzierung ist durch ein eindeutiges DOM-Element mit exemplarischer id=iqadtileT I L E N U M B E R in Ihrem HTML-MarkUp zu implementieren. Der übergebene Positionsschlüssel innerhalb des AdCongroller.render-Aufrufs bewirkt eine asynchrone Einbindung via DOM-Insertion der gelieferten Anzeige im Zielcontainer<br />
<br />
Bitte fügen Sie keinen weitere DOM oder Script-Bestandteile innerhalb dieser Anzeigencontainer ein. Die Anzeigen-Kennzeichnung der Werbeplatzierungen erfolgt optimalerweise durch iq digital. Gerne besprechen wir diesen Punkt gemeinsam mit Ihnen.<br />
<br />
====TopBanner Konstrukt====<br />
<br />
Anzeigenplatzierung TopBanner Konstrukt, beinhaltet die erste Position iqadtile1 und beide Sky Postionen (bitte 1:1 genauso implementieren)<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this construct for the top positions (iqadtile1), the sky right part (iqadtile21) & the left sky part (iqadtile20) and the out-of-page position (iqadtileOOP)--><br />
<div id="iqadtileOOP"><br />
<script><br />
AdController.render('iqadtileOOP');<br />
</script><br />
</div><br />
<div id="iqd_mainAd"><br />
<div id="iqd_align_Ad"><br />
<div id="iqd_topAd"><br />
<div id="iqadtile1"><br />
<script><br />
AdController.render('iqadtile1');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_leftAd"><br />
<div id="iqadtile20"><br />
<script><br />
AdController.render('iqadtile20');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_rightAd"><br />
<div id="iqadtile21"><br />
<script><br />
AdController.render('iqadtile21');<br />
</script><br />
</div><br />
</div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
====weitere Anzeigepositionen====<br />
<br />
Alle weitere Platzierungen nach folgender Muster umsetzen<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this pattern for all other positions --><br />
<div id="iqadtileT I L E N U M B E R"><br />
<script><br />
if (typeof AdController !== 'undefined') {<br />
AdController.render('iqadtileT I L E N U M B E R');<br />
}<br />
</script><br />
</div><br />
</syntaxhighlight><br />
<br />
====AdController.finalize(..)====<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====IQDComplete() - Page-Load Signal====<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=264Adcontroller2023-03-20T10:13:18Z<p>Efeigegernoth: </p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Hosting und Abruf des AC-Deployment vom iq-CDN <br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Alternativ zum Hosting und unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]"<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpoltik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
<br />
==Neues Anzeigen-Containermodell Anfang==<br />
<br />
Im neuen Anzeigen-Containermodell werden nicht mehr die Werbeplätze vom Mandanten/Publisher direkt in die Seite integriert, sondern nur noch Platzhalter Div Container an die nach Vertaggungsplan entsprechenden Stellen, in welche dann jeweils IQD die passenden Werbeplätze integriert.<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# 1. Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# 2. Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# 3. Das Data Attribute "'''data_device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop oder Mobile Werbeausspielung gedacht ist.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_2" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="mobile"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="mobile"></div><br />
<br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="mobile"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
====Topbannerkonstrukt in Pos_01 Desktop====<br />
<br />
Der Platzhalter für Desktop mit der "data-placement" Nummer "pos_01" stellt unser altes Topbanner-Konstrukt dar und umfasst daher den Einbau mehrerer Werbeplätze (iqadtile1, iqadtile20, iqadtile21). Um dies kenntlich zu machen sind im Vertaggungsplan auch noch "pos_out_1" und "pos_out_2" eingezeichnet.<br />
Auf Ihren Einbau sollte aber verzichtet werden, da Ihre Funktion bereits komplett von "pos_01" übernommen wird.<br />
<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_1" data-device="desktop"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Neues Anzeigen-Containermodell Ende==<br />
<br />
==Anzeigenplatzierungen==<br />
<br />
===Signale & Anzeigestruktur===<br />
<br />
====AdController.render(..)====<br />
<br />
Nach Initialisierung des AdControllers ist dieser bereit für das Absetzen einer Anzeigenanforderung an den AdServer. Auslöser einer Anzeigenanforderung ist die jeweilige Anzeigenplatzierung mit entsprechender AdController.render-Methode. In der Render-Phase des AdControllers werden die Level-Informationen des CMS-Mandanten-Objects an den AdRequest-URL-Builder des AdControllers übergeben und mit weiteren Konfigurationsparametern des Deployments zu einem AdServer-konformen Anzeigen-Request zusammengeführt und versendet.<br />
<br />
Welche Anzeigenplatzierungen für das jeweilige Layout Ihrer Website umzusetzen ist, ist im Vorfeld mit iq digital hinsichtlich Vermarktungsmöglichkeiten zu besprechen. Die Anzeigenplatzierung ist durch ein eindeutiges DOM-Element mit exemplarischer id=iqadtileT I L E N U M B E R in Ihrem HTML-MarkUp zu implementieren. Der übergebene Positionsschlüssel innerhalb des AdCongroller.render-Aufrufs bewirkt eine asynchrone Einbindung via DOM-Insertion der gelieferten Anzeige im Zielcontainer<br />
<br />
Bitte fügen Sie keinen weitere DOM oder Script-Bestandteile innerhalb dieser Anzeigencontainer ein. Die Anzeigen-Kennzeichnung der Werbeplatzierungen erfolgt optimalerweise durch iq digital. Gerne besprechen wir diesen Punkt gemeinsam mit Ihnen.<br />
<br />
====TopBanner Konstrukt====<br />
<br />
Anzeigenplatzierung TopBanner Konstrukt, beinhaltet die erste Position iqadtile1 und beide Sky Postionen (bitte 1:1 genauso implementieren)<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this construct for the top positions (iqadtile1), the sky right part (iqadtile21) & the left sky part (iqadtile20) and the out-of-page position (iqadtileOOP)--><br />
<div id="iqadtileOOP"><br />
<script><br />
AdController.render('iqadtileOOP');<br />
</script><br />
</div><br />
<div id="iqd_mainAd"><br />
<div id="iqd_align_Ad"><br />
<div id="iqd_topAd"><br />
<div id="iqadtile1"><br />
<script><br />
AdController.render('iqadtile1');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_leftAd"><br />
<div id="iqadtile20"><br />
<script><br />
AdController.render('iqadtile20');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_rightAd"><br />
<div id="iqadtile21"><br />
<script><br />
AdController.render('iqadtile21');<br />
</script><br />
</div><br />
</div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
====weitere Anzeigepositionen====<br />
<br />
Alle weitere Platzierungen nach folgender Muster umsetzen<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this pattern for all other positions --><br />
<div id="iqadtileT I L E N U M B E R"><br />
<script><br />
if (typeof AdController !== 'undefined') {<br />
AdController.render('iqadtileT I L E N U M B E R');<br />
}<br />
</script><br />
</div><br />
</syntaxhighlight><br />
<br />
====AdController.finalize(..)====<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====IQDComplete() - Page-Load Signal====<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=263Adcontroller2023-03-20T10:01:02Z<p>Efeigegernoth: /* Neues Anzeigen-Containermodell */</p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Hosting und Abruf des AC-Deployment vom iq-CDN <br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Alternativ zum Hosting und unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]"<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpoltik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
==Anzeigenplatzierungen==<br />
<br />
<br />
==Neues Anzeigen-Containermodell Anfang==<br />
<br />
Im neuen Anzeigen-Containermodell werden nicht mehr die Werbeplätze vom Mandanten/Publisher direkt in die Seite integriert, sondern nur noch Platzhalter Div Container an die nach Vertaggungsplan entsprechenden Stellen, in welche dann jeweils IQD die passenden Werbeplätze integriert.<br />
Zur richtigen Identifizierung aller Platzhalter müssen folgende Informationen allen Platzhalter Div-Containern mitgegeben werden:<br />
<br />
# 1. Die Klasse "'''iqdcontainer'''". Durch diese Klasse werden alle Divs Werbeplatzhalter gekennzeichnet.<br />
# 2. Das Data Attribute "'''data-placement'''". Über dieses Data-Attribut können die jeweiligen Positionen in der Seite eindeutig erfasst werden.<br />
# 3. Das Data Attribute "'''data_device'''". Über dieses Data-Attribut wird gekennzeichnet, ob der Werbeplatz für die Desktop oder Mobile Werbeausspielung gedacht ist.<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_2" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_2" data-device="mobile"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
===SonderPositionen===<br />
<br />
====Header und Footer====<br />
<br />
Alle Positionen im Footer und Header bekommen keine Zahl in "data-placement", sondern jeweils "pos_header" oder "pos_footer", wodurch sie eindeutig bestimmt sind.<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_header" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_header" data-device="mobile"></div><br />
<br />
<br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="desktop"></div><br />
<div class="iqdcontainer" data-placement="pos_footer" data-device="mobile"></div><br />
<br />
<br />
</syntaxhighlight><br />
<br />
====Topbannerkonstrukt in Pos_01 Desktop====<br />
<br />
Der Platzhalter für Desktop mit der "data-placement" Nummer "pos_01" stellt unser altes Topbanner-Konstrukt dar und umfasst daher den Einbau mehrerer Werbeplätze (iqadtile1, iqadtile20, iqadtile21). Um dies kenntlich zu machen sind im Vertaggungsplan auch noch "pos_out_1" und "pos_out_2" eingezeichnet.<br />
Auf Ihren Einbau sollte aber verzichtet werden, da Ihre Funktion bereits komplett von "pos_01" übernommen wird.<br />
<br />
<br />
<syntaxhighlight lang='html'><br />
<br />
<div class="iqdcontainer" data-placement="pos_1" data-device="desktop"></div><br />
<br />
</syntaxhighlight><br />
<br />
==Neues Anzeigen-Containermodell Ende==<br />
<br />
<br />
===Signale & Anzeigestruktur===<br />
<br />
====AdController.render(..)====<br />
<br />
Nach Initialisierung des AdControllers ist dieser bereit für das Absetzen einer Anzeigenanforderung an den AdServer. Auslöser einer Anzeigenanforderung ist die jeweilige Anzeigenplatzierung mit entsprechender AdController.render-Methode. In der Render-Phase des AdControllers werden die Level-Informationen des CMS-Mandanten-Objects an den AdRequest-URL-Builder des AdControllers übergeben und mit weiteren Konfigurationsparametern des Deployments zu einem AdServer-konformen Anzeigen-Request zusammengeführt und versendet.<br />
<br />
Welche Anzeigenplatzierungen für das jeweilige Layout Ihrer Website umzusetzen ist, ist im Vorfeld mit iq digital hinsichtlich Vermarktungsmöglichkeiten zu besprechen. Die Anzeigenplatzierung ist durch ein eindeutiges DOM-Element mit exemplarischer id=iqadtileT I L E N U M B E R in Ihrem HTML-MarkUp zu implementieren. Der übergebene Positionsschlüssel innerhalb des AdCongroller.render-Aufrufs bewirkt eine asynchrone Einbindung via DOM-Insertion der gelieferten Anzeige im Zielcontainer<br />
<br />
Bitte fügen Sie keinen weitere DOM oder Script-Bestandteile innerhalb dieser Anzeigencontainer ein. Die Anzeigen-Kennzeichnung der Werbeplatzierungen erfolgt optimalerweise durch iq digital. Gerne besprechen wir diesen Punkt gemeinsam mit Ihnen.<br />
<br />
====TopBanner Konstrukt====<br />
<br />
Anzeigenplatzierung TopBanner Konstrukt, beinhaltet die erste Position iqadtile1 und beide Sky Postionen (bitte 1:1 genauso implementieren)<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this construct for the top positions (iqadtile1), the sky right part (iqadtile21) & the left sky part (iqadtile20) and the out-of-page position (iqadtileOOP)--><br />
<div id="iqadtileOOP"><br />
<script><br />
AdController.render('iqadtileOOP');<br />
</script><br />
</div><br />
<div id="iqd_mainAd"><br />
<div id="iqd_align_Ad"><br />
<div id="iqd_topAd"><br />
<div id="iqadtile1"><br />
<script><br />
AdController.render('iqadtile1');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_leftAd"><br />
<div id="iqadtile20"><br />
<script><br />
AdController.render('iqadtile20');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_rightAd"><br />
<div id="iqadtile21"><br />
<script><br />
AdController.render('iqadtile21');<br />
</script><br />
</div><br />
</div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
====weitere Anzeigepositionen====<br />
<br />
Alle weitere Platzierungen nach folgender Muster umsetzen<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this pattern for all other positions --><br />
<div id="iqadtileT I L E N U M B E R"><br />
<script><br />
if (typeof AdController !== 'undefined') {<br />
AdController.render('iqadtileT I L E N U M B E R');<br />
}<br />
</script><br />
</div><br />
</syntaxhighlight><br />
<br />
====AdController.finalize(..)====<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====IQDComplete() - Page-Load Signal====<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Adcontroller&diff=262Adcontroller2023-03-20T07:59:56Z<p>Efeigegernoth: /* Anzeigenplatzierungen */</p>
<hr />
<div>==Implementierung AdController-Deployment (API + Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Der AdController stellt in Form eines Script-Deployments ein Framework für die Initialisierung und das Rendering einer Anzeigenanforderung für die jeweils gültige Konfiguration einer Angebotsseite zur Verfügung.<br />
<br />
Die Implementierung des Script-Deployments soll für die optimierte Bereitstellung der Dienstekonfiguration sowie Steuerbarkeit der prozessualen Code-Ausführung im <head>-Tag der Seite erfolgen. Das Script funktioniert zu 100% asynchron und verwendet keinen blockierenden Script-Code. Kann aus technischen Gründen nicht auf das <head>-Tag zugegriffen werden, ist eine Implementierung im Dokument-body noch vor dem erstem AdRequest zu prüfen (bitte stimmen Sie sich in diesem Fall gesondert mit iq digital ab). Die Initialisierung des AdControllers (AC) soll frühstmöglich erfolgen und ist Voraussetzung für die Anzeigeaufrufe (AdController.render-Aufrufe) zur Anzeigenanforderung. Sollte das nicht möglich sein bzw. Advertising-Technologien in Abhängigkeit von eintretenden Events (z.B. nach Page-Load) vorausgesetzt sein, stimmen Sie sich bitte gesondert mit iq digital ab.<br />
<br />
Es sollte im Voraus geklärt werden, ob es sich bei Ihrem Angebot um eine klassische Webeanwendung handelt, die aus mehreren untereinander verlinkten HTML-Dokumenten besteht (d.h. bei initialem Aufruf einer Content-Seite sowie Navigation zu anderen Seiten wird auch immer ein Browser-Refresh ausgeführt). Sollten Sie im Rahmen einer "Single-Page-Webanwendung" ein davon abweichendes Konzept implementieren, sollten Sie zusätzlich die Schritte im Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] befolgen.<br />
<br />
Wenn lediglich redaktionelle Elemente derselben Seite asynchron nachladen werden (z.B. Bildergalerien ohne Page-Refresh), bietet der AdController zu diesem Zweck eine Callback-Funktion zum Nachladen der Anzeigenpositionen an. Hier können die Schritte aus Abschnitt [[#Single_Page_Applikation_(Kein_Pageload)| Single Page Applikation (Kein Pageload)]] ignoriert werden. Der Publisher verantwortet die Event-Bindung zum Triggern des Callback nach gemeinsamer Absprache mit iq digital ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]]).<br />
<br />
<div class="page-break"></div><br />
===Hosting & Einbindung AdController===<br />
<br />
Es bestehen zwei Möglichkeiten für das Hosting/Einbindung des AdController Script-Deployments auf Ihren Seiten:<br />
<br />
*Abruf des AC-Script-Deployments von einem externen Web-Host der iq digital (AWS-CDN)<br />
**Hosting und Abruf des AC-Deployment vom iq-CDN <br />
*Abruf des AC-Script-Deployments vom Web-Server des Seitenbetreibers (empfohlen)<br />
**Alternativ zum Hosting und unmittelbaren Abruf des AC-Deployment vom iq-CDN wird eine direkte Implementierung des Adcontrollers über den Webserver des Seitenbetreibers empfohlen. Voraussetzung ist eine weiterhin flexible Anbindung des AC- Deployment als PRELIVE- und SANDBOX-Version (siehe "Auslieferungsmodus") durch den iq-Entwickler mittels iqdeployment-Parameter. Es gibt hierzu bereits unterschiedliche Umsetzungen im Einsatz, die wir gerne gemeinsam mit Ihnen abstimmen.<br />
<br />
===Caching AdController===<br />
<br />
Für ein optimiertes Ergebnis hinsichtlich Performance und aktuelle Version des AC-Deployment stimmen wir Möglichkeiten zum kurzfristigen Cachen sowie Expire-Varianten gerne gemeinsam mit Ihnen ab. Die sichere Ausspielung ist dabei voranzustellen, so dass durch iq digital erforderliche Änderungen im AC-Deployment auch sofort beim User in die Ausführung kommen und nicht durch ältere Versionen im Cache blockiert werden.<br />
<br />
===Auslieferungsmodus===<br />
<br />
Die Variable iqd_mode (siehe Code Beispiel zur Umsetzung von AdController) referenziert, die geplante LIVE Version des AdControllers, oder eine von LIVE abweichende Version (z.B. PRELIVE- oder SANDBOX- Version des AC-Deployments). Durch die URL-Parametererweiterung "iqdeployment=[platzhalter]" ist es dem iq-Entwickler möglich eine Vorabversion des AC-Deployments, ohne Umstellung der Website oder Implikation der Webseitenbesucher, während des Live- Betriebs zu testen bzw. bereitzustellen.<br />
<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments (die Trennung der Script-Blöcke ist erforderlich).</p><br />
<p>Der Wert für das Makro <b>[cdn_partnersite_Folgt_durch_iq]</b> wird von iq zur Verfügung gestellt.</p><br />
</i><br />
<br />
====Einbindung auf einer nicht-reponsive Seite====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function IQSLoader(url) {<br />
var script = document.createElement("script");<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
//VARIANTE 1:<br />
IQSLoader("https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz ");<br />
//VARIANTE 2:<br />
IQSLoader("https://[publisher_directory]/[cdn_partnersite_Folgt_durch_iq]/" + iqd_mode + "/iqadcontroller.js.gz");<br />
<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====Einbindung auf einer responsive Seite (Beispiel Implementierung)====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
function isDesktop() {<br />
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;<br />
return width >= 850;<br />
}<br />
<br />
function isMobileOrTablet() {<br />
return !isDesktop();<br />
}<br />
<br />
function isTablet() {<br />
return isMobileOrTablet() && window.outerWidth >= 480 && window.hasOwnProperty('orientation');<br />
}<br />
<br />
function isMobile() {<br />
return isMobileOrTablet() && !isTablet();<br />
}<br />
<br />
function getPlatform() {<br />
if (isDesktop()) {<br />
return 'desktop';<br />
}<br />
if (isTablet()) {<br />
return 'tablet';<br />
}<br />
return 'mobile';<br />
}<br />
<br />
function IQSLoader(url) {<br />
var script = document.createElement("script")<br />
script.type = "text/javascript";<br />
script.src = url;<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
<br />
var iqd_mode = (function () {<br />
var dm = window.location.href.toLowerCase();<br />
return (dm.indexOf('iqdeployment=') > 1) ? dm.split('iqdeployment=')[1].split('&')[0] : 'live';<br />
})();<br />
<br />
if (isDesktop()) {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
} else {<br />
IQSLoader(<br />
"https://s3.eu-central-1.amazonaws.com/prod.iqdcontroller.iqdigital/[cdn_partnersite_Folgt_durch_iq]/" +<br />
iqd_mode + "/iqadcontroller.js.gz");<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
====AdController proxy====<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
(function () {<br />
window.AdController = {<br />
i: null, // page info<br />
q: [], // render queue<br />
f: false, // is finalized <br />
s: false, // is staged<br />
n: false, // is initialized <br />
r: null, // ready function <br />
c: [], // command queue<br />
setPageInfo: function (i) {<br />
window.AdController.i = i;<br />
},<br />
stage: function () {<br />
window.AdController.s = true;<br />
},<br />
initialize: function () {<br />
window.AdController.n = true;<br />
},<br />
render: function (n, c) {<br />
window.AdController.q.push([n, c]);<br />
},<br />
finalize: function () {<br />
window.AdController.f = true;<br />
},<br />
ready: function (callback) {<br />
window.AdController.r = callback;<br />
},<br />
startLoadCycle: function () {<br />
window.AdController.c.push(['startLoadCycle']);<br />
},<br />
reload: function (p, t) {<br />
window.AdController.c.push(['reload', p, t]);<br />
},<br />
reinitialize: function (i) {<br />
window.AdController.c.push(['reinitialize', i]);<br />
}<br />
};<br />
})();<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
==Mandanten-CMS-Objekt (Seiteninformationen für AdController-Konfiguration)==<br />
<br />
===Allgemeine Informationen===<br />
<br />
Um unter Anderem die anzuwendende Konfiguration für die aktuelle Angebotsseite festzustellen, werden dem AdController über dieses Objekt notwendige Informationen des Seitenbetreibers übergeben.<br />
Das vom Seitenbetreiber bereitzustellende Mandanten-CMS-Objekt übermittelt die seitenspezifischen Informationen zur Auswahl der gültigen bzw. spezifischen AdController-Konfiguration und inventargerechten Anzeigenanforderung.<br />
<br />
<i><p>Code-Beispiel zur Umsetzung im <head>-Tag des Dokuments nach der AdController Einbindung:</p></i><br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
// ########### CMS-MANDANTEN-OBJECT #############<br />
var cmsObject = {};<br />
cmsObject = {<br />
$handle: "[Erfolgt_mit_Abstimmung_iq]",<br />
level2: "[Erfolgt_mit_Abstimmung_iq]",<br />
level3: "",<br />
level4: "",<br />
isWrapperApp: [true,false],<br />
keywords: "[Erfolgt_mit_Abstimmung_iq]",<br />
tma: "[Erfolgt_mit_Abstimmung_iq]",<br />
platform: "[desktop | tablet | mobile]"<br />
};<br />
</script><br />
</syntaxhighlight><br />
<br />
===Schlüssel Informationen===<br />
<br />
====Schlüssel: $handle====<br />
<br />
Die Zuordnung von einer Seite der Webpräsenz zu einer Subsite des iq digital Tag Management Systems (TMS), deren Konfiguration für die aktuelle Seite wirksam ist, erfolgt über das $handle-Matching-Kriterium. Die Anzeigen-Vertaggung erfolgt somit nach vermarktungsrelevanten und technisch abbildbaren CMS-Layout-Typen der Webpräsenz. iq digital liefert soweit möglich die für das Matching relevanten und zuvor abgestimmten $handle-Bezeichner für die definierten Layout-Cluster - z.B. Homepage ($handle:'homepage'), Übersichts- und Sub-Übersichtsseiten ($handle:'index'), Detailseiten ($handle:'index'), Artikelseiten ($handle:'artikel'). Je nach redaktioneller Layout-Struktur und Anforderungen zur Ansteuerungen der Webpräsenz kann eine granulare oder flache $handle-Clusterung erforderlich sein. Für die optimale Zuordnung ist durch den Seitenbetreiber eine Site-Map mit abgesprochenen und "offenen" Layout-$handle-Zuordnung zur Verfügung zu stellen.<br />
<br />
====Schlüssel: level2, level3 und level4====<br />
<br />
Enthalten seitenspezifische Informationen für die erforderliche Inventarisierung der Publisher-Site im Ad Server und den AdRequest- URL-Builder zur Anforderungen der auf dieses Inventar gebuchten Anzeigen. Die Level-Informationen sind in Abhängigkeit der Ressort- bzw. Umfeld-Tiefen zu füllen insofern vermarktungsrelevant. <br />
Beispiel: Wenn die Seite eine Rubrik 'Politik' hat und diese eine Unterrubrik 'Außenpoltik', dann wäre den Wert für level2:'politik' und für level3:'aussenpolitik'<br />
<br />
====Schlüssel: isWrapperApp====<br />
<br />
Anhand von diesem Wert sollte die Information an uns übermittelt werden, ob es sich bei der Ausspielung um eine Wrapper App handelt oder nicht. Möglich Werte hierzu sind true oder false. <br />
<br />
====Schlüssel: keywords====<br />
<br />
Hier kommen die Werte aus level2, level3, level4 mitrein. Zusätzlich können hier weitere Schlagwörter optional hinzugefügt werden, die die Seite beschreiben und für besseres Kampagnien-Targeting helfen können.<br />
<br />
====Schlüssel: tma====<br />
<br />
Dieses Wert ist optional, sollte jedoch befüllt werden, wenn es sich hierbei um eine Themenseite oder Themenunterseite handelt. Der Wert ist hier der Name von dem Thema, um das es sich hier handelt.<br />
<br />
====Schlüssel: platform====<br />
<br />
Hier sind folgende Werte möglich: desktop, tablet oder mobile<br />
Je nachdem auf welchen Device der User unterwegs ist sollte der entsprechende Wert übergeben werden.<br />
<br />
===Zeichenlimitierung===<br />
<br />
Alle Informationen im CMS-Objekt sind ausschließlich klein zu schreiben; Leerzeichen, Sonderzeichen und Umlaute sind nicht erlaubt. Die einzige Ausnahme ist das "_" Zeichen (Unterstrich/Underscore).<br />
<br />
FALSCH: Archäologie RICHTIG: archaeologie | FALSCH: Psychologie-Hirnforschung RICHTIG: psychologie_hirnforschung<br />
<br />
<div class="page-break"></div><br />
==AdController initialisieren==<br />
<br />
Nach dem Setzen von dem cmsObject muss der AdController initialisiert werden wie folgt:<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
if (!AdController._initialized) {<br />
AdController.setPageInfo(cmsObject);<br />
try {<br />
AdController.stage();<br />
} catch (e) {}<br />
AdController.initialize();<br />
} else {<br />
(function checkDOMReadyState(c) {<br />
try {<br />
if (AdController.getRenderController().isReady()) {<br />
AdController.reinitialize(cmsObject);<br />
}<br />
} catch (e) {<br />
if (c < 50) {<br />
c++;<br />
setTimeout(function () {<br />
checkDOMReadyState(c);<br />
}, 100);<br />
}<br />
}<br />
})(0);<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
==Mandanten-SiteMap (Übersicht AdController-$handle-Zuordnung)==<br />
<br />
Zum besseren Verständnis Ihrer Website-Struktur und deren Verwaltung in Ihrem CMS ist die Bereitstellung einer Site-Map des Angebotes wünschenswert. Des Weiteren ist die Klärung folgender Fragen für die AC- Implementierung wichtig.<br />
<br />
*Generierung eines generellen Verständnisses des Mandanten-Content-Managements<br />
**Welche Angebote werden über das eigene Redaktionssystem betrieben?<br />
**Welche Angebote werden von externen Dienstleistern (Content-Partnern) betrieben. Gibt es abweichende Voraussetzungen für die AC-Implementierung, z.B. Cross-Domain-Integrationen via IFrame?<br />
**Welche Cluster, Limitierung für die Angebotsansteuerung- bzw. -aussteuerung ist durch das CMS-Layout-Templating vorgegeben?<br />
*Welche Angebote sind derzeit nicht vermarktet und werden auch zukünftig keinen AdController einbinden?<br />
*Welche Angebote sind derzeit vermarktet ggf. aber nicht sofort bzw. zum vereinbarten Timing mit dem AdController implementiert?<br />
**Problem: Ggf. Unterschiedliche AdServer-Technologien parallel im Einsatz<br />
**Timing erforderlich, wann diese Angebote nachgezogen werden können<br />
*Zuordnung des CMS-Layout-Templating zu AdController-$handle-Cluster<br />
**Die Möglichkeit eine individuelle Tagging-Konfiguration für einen bestimmten Angebotsbereich wirksam zu machen ist nur gegeben, wenn auch ein eigenes AdController-$handle für die Konfigurationsauswahl im AC-Deployment vergeben wurde<br />
**I.d.R. erfolgt das $handle-Cluster Layout-basiert (z.B. Homepage, Startseiten, Detailseiten, …) da die Vermarktung entsprechende Produktpakete zur Umfeld-Vermarktung erfordert und Anzeigenpositionen oftmals in Layoutabhängigkeit stehen<br />
**Zielsetzung ist, nicht für jedes abweichende Layout im Angebot auch ein eigenes $handle-Cluster bzw. eigene Konfiguration bereitzustellen, sondern nicht relevante bzw. produktunabhängige Reichweitenangebote in passende Cluster zusammenzufassen. Es gilt der Grundsatz - so viel $handle-Bezeichner wie nötig, so wenig wie möglich. iq kann zu diesem Zweck mehrere von der Redaktion bereitgestellt Cluster verdichten, so dass zwar eine granulare Kennzeichnung erfolgt, jedoch immer dieselbe Konfiguration im AdController zur Ausführung kommt. Ein Vorteil ist, dass iq digital in diesen Fällen bei späterem Bedarf spezifische Konfigurationen nach Auflösung solcher Bundle vergeben kann<br />
<br />
Bitte stellen Sie die Zuordnung der Layout-$handle nur in Absprache mit iq digital zur Verfügung. Je nach Anforderung kann es zu unterschiedlichen Ergebnissen kommen.<br />
<br />
<div class="page-break"></div><br />
==Anzeigenplatzierungen==<br />
<br />
<br />
==Neues Anzeigen-Containermodell==<br />
<br />
===Signale & Anzeigestruktur===<br />
<br />
====AdController.render(..)====<br />
<br />
Nach Initialisierung des AdControllers ist dieser bereit für das Absetzen einer Anzeigenanforderung an den AdServer. Auslöser einer Anzeigenanforderung ist die jeweilige Anzeigenplatzierung mit entsprechender AdController.render-Methode. In der Render-Phase des AdControllers werden die Level-Informationen des CMS-Mandanten-Objects an den AdRequest-URL-Builder des AdControllers übergeben und mit weiteren Konfigurationsparametern des Deployments zu einem AdServer-konformen Anzeigen-Request zusammengeführt und versendet.<br />
<br />
Welche Anzeigenplatzierungen für das jeweilige Layout Ihrer Website umzusetzen ist, ist im Vorfeld mit iq digital hinsichtlich Vermarktungsmöglichkeiten zu besprechen. Die Anzeigenplatzierung ist durch ein eindeutiges DOM-Element mit exemplarischer id=iqadtileT I L E N U M B E R in Ihrem HTML-MarkUp zu implementieren. Der übergebene Positionsschlüssel innerhalb des AdCongroller.render-Aufrufs bewirkt eine asynchrone Einbindung via DOM-Insertion der gelieferten Anzeige im Zielcontainer<br />
<br />
Bitte fügen Sie keinen weitere DOM oder Script-Bestandteile innerhalb dieser Anzeigencontainer ein. Die Anzeigen-Kennzeichnung der Werbeplatzierungen erfolgt optimalerweise durch iq digital. Gerne besprechen wir diesen Punkt gemeinsam mit Ihnen.<br />
<br />
====TopBanner Konstrukt====<br />
<br />
Anzeigenplatzierung TopBanner Konstrukt, beinhaltet die erste Position iqadtile1 und beide Sky Postionen (bitte 1:1 genauso implementieren)<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this construct for the top positions (iqadtile1), the sky right part (iqadtile21) & the left sky part (iqadtile20) and the out-of-page position (iqadtileOOP)--><br />
<div id="iqadtileOOP"><br />
<script><br />
AdController.render('iqadtileOOP');<br />
</script><br />
</div><br />
<div id="iqd_mainAd"><br />
<div id="iqd_align_Ad"><br />
<div id="iqd_topAd"><br />
<div id="iqadtile1"><br />
<script><br />
AdController.render('iqadtile1');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_leftAd"><br />
<div id="iqadtile20"><br />
<script><br />
AdController.render('iqadtile20');<br />
</script><br />
</div><br />
</div><br />
<div id="iqd_rightAd"><br />
<div id="iqadtile21"><br />
<script><br />
AdController.render('iqadtile21');<br />
</script><br />
</div><br />
</div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
====weitere Anzeigepositionen====<br />
<br />
Alle weitere Platzierungen nach folgender Muster umsetzen<br />
<br />
<syntaxhighlight lang='html'><br />
<!-- please use this pattern for all other positions --><br />
<div id="iqadtileT I L E N U M B E R"><br />
<script><br />
if (typeof AdController !== 'undefined') {<br />
AdController.render('iqadtileT I L E N U M B E R');<br />
}<br />
</script><br />
</div><br />
</syntaxhighlight><br />
<br />
====AdController.finalize(..)====<br />
<br />
Die Web-Seite signalisiert dem AdController mit dem AdController.finalize-Aufruf, dass die Render-Phase abgeschlossen werden kann, da keine weiteren Anzeigen-Anforderungen von der Seite implementiert sind. In Einzelfällen kann es dazu kommen, dass die geplante AdController-Konfiguration für die aktuelle Seite von den tatsächlich implementierten Anzeigeplatzierungen abweicht. In diesem Fall werden die Abweichungen durch den AdController evaluiert, abgefangen und bei Bedarf protokolliert. Abweichungen können immer dann Auftreten, wenn für das betroffene Angebot keine spezifische $handle-Zuordnung geplant wurde. Das kann auch ein durch iq digital gewünschtes Szenario sein.<br />
<br />
<syntaxhighlight lang='html'><br />
<script><br />
AdController.finalize(); //Signalisiert dem AdController, dass keine weiteren AdCall-Aufrufe auf dieser Seite folgen<br />
</script><br />
</syntaxhighlight><br />
<br />
<div class="page-break"></div><br />
====IQDComplete() - Page-Load Signal====<br />
<br />
Sobald alle Inhalte auf der Seite (auch verzögert dynamisch geladener Content), die zur Höhenberechnung der Seite beitragen, geladen worden sind, soll ein Signal an iq digital gesendet werden:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
var IQDComplete = {<br />
init: function () {<br />
return true;<br />
}<br />
};<br />
</script><br />
<br />
</syntaxhighlight><br />
<br />
==Bereitstellung Entwicklungsumgebung==<br />
<br />
Für die ordnungsgemäße Umsetzung und Gewährleistung des AdControllers hinsichtlich Betriebsbereitschaft der Webpräsenzen und Sicherstellung der gegenwärtigen und zukünftigen Vermarktungskonzepte durch iq digital ist die Umsetzung auf einer vollumfänglichen Entwicklungsumgebung für die initiale Vertaggung der Seiten durch den AdController erforderlich.<br />
<br />
Ziel ist die Sicherstellung einer realen, dem LIVE-Betrieb entsprechenden Umsetzung des AdControllers auf einem parallelen System, welches LIVE gestellt wird, wenn das finale SetUp und Testing von beiden Seiten abgeschlossen wurde.<br />
<br />
Die Bereitstellung des AdControllers für die Web-Seiten wird über verschiedene Kanäle erfolgen. Änderungen und weitere Entwicklungen im Rahmen von Konfigurationsanpassungen oder Technologieerweiterung für eine Seite erfolgen bei iq digital über ein Preview-Deployment. Die derzeitige Einbindung des AdControllers sieht bereits einen dynamischen Switch zwischen LIVE- und PRELIVE- Version des AdControllers vor, die auf Clientseite mit einer GET-Parameter-Erweiterung in der URL gesteuert werden kann "https://www.domain.de?iqdeployment=prelive".<br />
<br />
<b>Die CMP, die auf die Liveseite verwendet wird, sollte außerdem auch auf die Testseite implementiert sein.</b><br />
<br />
==Fluide/Responsive Webanwendungen==<br />
Wenn Sie eine fluide bzw. responsive Webanwendung betreiben um unterschiedliche Kanäle im Rahmen des stationären Desktop- und Mobilen-Webs mit schlankeren Code und einheitlichen Redaktionssystem zu pflegen, ist eine Abstimmung der für die Vermarktung relevanten Punkte im Vorfeld erforderlich. Für den Fall des AdControllers bedeutet das, dass Anzeigenplatzierungs-Konzepte für Desktop-Web und Mobile aufeinander plausibel abgestimmt werden müssen. Bitte stellen Sie iq digital eine Übersicht Ihrer Layout- Lösung mit darin geplanten Sprungmarken, ggf. adaptiven Layout-Anpassungen und Device-Detektionen zur Verfügung.<br />
<br />
Beim Wechsel vom Layout für Desktop-Web zur Mobile-optimierten Ansicht ist die Implementierung eines gesonderten AC-Mobile- Deployments erforderlich, sobald Ihr Code zur Device-Detektion das entsprechende Umfeld identifiziert. Des Weiteren lassen sich dann die Anzeigenplatzierungen des Desktop-Webs nicht 1:1 auf das zu diesem Zeitpunkt Mobile-optimierte Design übertragen, da Anzahl und Position der Platzierungen bei fluider Neu-Anordnung des HTML-MarkUps nicht den verschiedenen Vermarktungsanforderungen dieser Umfelder entsprechen. Bitte stimmen Sie sich gemeinsam mit iq digital bzgl. eines entsprechenden Platzierungs-Konzeptes ab.<br />
<br />
Entsprechende Anforderungen und Konzepte sind bereits im Vermarktungsportfolio von iq digital im Einsatz, gerne Leisten wir Hilfestellung im Rahmen bereits aktiver Implementierungen.<br />
<br />
==Single Page Applikation (Kein Pageload)==<br />
<br />
Der Mandant muss im Falle einer SPA Implementierung beim Seitennavigieren dafür sorgen, dass:<br />
<br />
* cmsObject muss neu gesetzt werden<br />
* AdController muss reinitialisiert wird<br />
* Render Funktionen müssen erneut aufgerufen werden<br />
* eine postMessage() Nachricht an uns geschickt wird ([[#Callback-Funktion_zum_Nachladen_der_Anzeigenpositionen| siehe Abschnitt Callback-Funktion zum Nachladen der Anzeigenpositionen]])<br />
<br />
<br />
==Callback-Funktion zum Nachladen der Anzeigenpositionen==<br />
<br />
Folgende postMessage muss an iq gesendet werden, sobald dies mit iq schon abgestimmt wurde, um ein Nachladen der Anzeigen anzustoßen:<br />
<br />
<syntaxhighlight lang='html'><br />
<script type="text/javascript"><br />
window.top.postMessage("iq_refresh_ads","[targetOrigin]");<br />
</script><br />
</syntaxhighlight><br />
<br />
<br />
[[Kategorie:Adcontroller]][[Kategorie:Ad Technology]]<br />
[[en:Adcontroller]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Einbau_des_Google_Mobile_Ads_SDK&diff=195Einbau des Google Mobile Ads SDK2021-11-12T23:13:36Z<p>Efeigegernoth: /* Preloading Ad */</p>
<hr />
<div>==Offizielle Dokumentation zum Google Mobile Ads SDK==<br />
Das Google Mobile Ads SDK (GMA SDK) bringt alles mit, was für eine Werbeausspielung in nativen Apps benötigt wird.<br />
<br />
===Getting Started zum Google Mobile Ads SDK===<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/ios/quick-start GMA SDK iOS Getting Started]<br />
<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/android/quick-start GMA SDK iOS Getting Started]<br />
<br />
===Download des Google Mobile Ads SDK===<br />
====Android====<br />
Das GMA SDK ist in den Android Play Services integriert und deshalb auf den Android Geräten vorhanden. <br />
<br />
====iOS====<br />
Für iOS kann das GMA SDK hier heruntergeladen werden:<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/ios/download Download iOS]<br />
<br />
===Ad-Manager vs. Admob===<br />
Die Dokumentation zum Google Mobile Ads SDK gibt es in zwei Varianten: für Ad-Manager- und Admob-Nutzer. Die iq digital ist ein Ad-Manager Kunde, deswegen muss unbedingt darauf geachtet werden, dass in der Browser-URL https://developers.google.com/ad-manager/... enthalten ist. Die Admob Doku unterscheidet sich leicht von der Ad-Manager Doku.<br />
<br />
<br />
==Kurze Einführung in den Lebens-Zyklus einer Werbeausspielung mit dem GMA SDK==<br />
Am Beispiel einer Banner-Werbeausspielung wird hier kurz der Lebens-Zyklus einer Werbeausspielung erklärt.<br />
<br />
[[Datei:GMA_SDK.png|800px|thumbnail|Übersicht Workflow der Werbeausspielung mit GMA SDK]]<br />
<br />
===Request===<br />
Das Adrequest wird in der App zusammengestellt und besteht aus mehreren Komponenten. Für eine erfolgreiche Werbeausspielung sind folgende Komponenten wichtig:<br />
;Consent String:Die App benötigt vom Nutzer einen gültigen Consent für die Werbeausspielung. Dabei sind neben mehreren relevanten Purposes auch der Vendor 755 Google Advertising Products notwendig (s.u.)<br />
;Creative-Sizes:In den meisten Fällen benutzen wir '''multisize'''-Adrequests. Das bedeutet, dass das Adrequest mehrere Creative Größen enthält und der Adserver daraufhin prüft, ob er ein Creative für eine dieser Größen zur Verfügung hat. Beispiele sind z.B. 320x1, 320x53, 320x80, 320x106, 320x160 etc.<br />
;Adunit:Die Adunit ist die Adresse der Werbeplatzierung. Damit weiß der Adserver, auf welcher Seite eine Werbeausspielung erfolgt. Die Adunit ist für alle Adrequests eines Pagerequests gleich. Beispiel: /183/Rheinischer_Kurier_ios_phone/homepage <br />
;Keywords (optional):Keywords sind Key-Value Paare und können eine Werbeplatzierung um weitere Informationen anreichern, die für eine gezielte Werbeausspielung notwendig sind. Die Werbeplatzierungen der iq digital enthalten alle eine bestimmte Bezeichnung, welche über die Keywords dem Adserver mitgegeben wird. Beispiel: kw=iqadtile1,digtransfrom&tile=1&doc=homepage<br />
<br />
===Adserver Google Admanager 360===<br />
Wenn der Adserver gültigen Consent besitzt, prüft ein Verteilungsalgorithmus, ob eine oder mehrere Werbebuchungen für die Adunit, Creative sizes und Keywords vorliegen. Ist dies der Fall wählt der Adserver die beste dafür aus. Sind mehrere Buchungen gleich wichtig, wählt er zufällig eine davon aus. Nur im Falle keiner Buchung würde er eine '''no ad''' oder '''no fill''' Meldung ausgeben, die besagt, dass für die Kombination aus adunit, creative size und Keywords keine Buchung existiert.<br />
<br />
===Ausspielung innerhalb der App===<br />
Die App lädt die Response des Adservers, die aus dem Template-Code und den Creative Komponenten besteht. Dabei ist zu beachten, dass der Werbecontainer auf die creative size des ausgelieferten Creatives vergrößert wird. Für Fullscreen Ads muss diese Größe von der App nachträglich auf die Display Viewport Größe (also device independent pixel) angepasst werden. Im Falle einer Banner Anzeige bekommt die App meist nach dem Ladevorgang ein oder mehrere setsize-Events über den einzubauenden AppEventHandler und muss den Werbecontainer auf die neue Größe anpassen, sofern diese sich von der creative size unterscheidet.<br />
<br />
===Impression-Zählung===<br />
Eine Impression Zählung, die misst, dass ein Ad angesehen wurde, wird vom GMA SDK automatisch abgeschickt, sobald mindestens 1px im sichtbaren Bereich des Displays ist.<br />
<br />
==Allgemeine Informationen==<br />
===Adunits (Zonierung)===<br />
Der Google Ad Manager benutzt zur Adressierung der Seiten Adunits, die sich wie folgt zusammensetzen können:<br />
*/netzwerkId/level1<br />
*/netzwerkId/level1/seitentyp<br />
*/netzwerkId/level1/level2/seitentyp<br />
*/netzwerkId/level1/level2/level3/seitentyp<br />
*usw.<br />
<br />
====Begriffserklärung====<br />
;netzwerkId:Hier ist immer die Netzwerk ID der iq digital einzugeben: 183<br />
;level1:Dies ist die Bezeichnung der App im Google Ad Manager und wird von der iq digital vorgegeben. Die Bezeichnung besteht aus <appname>_app_<plattform>_<gerätetyp>.<br />
:;appname:Der Name der App<br />
:;plattform:Das Betriebsystem, also ''ios'' oder ''android''<br />
:;gerätetyp:Der Gerätetyp, also '''phone''' oder ''tablet''<br />
;level2:Dies ist die Bezeichnung einer Rubrik der App, z.B. ''politik''<br />
;level3 (usw.):Dies ist die Bezeichnung für eine Unterrubrik, z.B. im Falle von ''politik'' als level2 wäre ''ausland'' eine Unterrubrik für level3. Level4 und höher sind weitere tiefere Verzweigungen der App, diese werden im Normalfall nicht also Adunits angelegt und solche Seiten würden unter dem level3 angelegt werden.<br />
;seitentyp:In Apps mit Banner-Anzeigen (z.B. News Apps) bezeichnet ''seitentyp'' die unterschiedlichen Seitentypen, also ob es sich z.B. um eine Übersichts-, Artikel- oder Bildergalerieseite handelt. Übliche Werte dafür sind ''homepage'', ''index'', ''artikel'', ''bildgal''. In Apps mit Fullscreen-Anzeigen (z.B. epaper oder Zeitungs Apps) werden mit ''seitentyp'' die unterschiedlichen Anzeigeplätze innerhalb der Rubrik gemeint, also ob es sich z.B. erste, zweite oder dritte Swipe Anzeige handelt. Übliche Werte sind ''openingpage'', ''swipe_1'', ''swipe_2'', ''swipe_3'' usw.<br />
<br />
====Beispiel für die fiktive Rheinischer Kurier News App mit Banner-Anzeigen:====<br />
*/183/Rheinischer_Kurier_app_ios_phone<br />
*/183/Rheinischer_Kurier_app_ios_phone /homepage<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/index<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/artikel<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/bildgal<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/index<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/artikel<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/bildgal<br />
<br />
====Beispiel für die fiktive Rheinischer Kurier Epaper iPad App mit Fullscreen-Anzeigen:====<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/preloading_ad<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/openingpage<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_1<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_2<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_3<br />
<br />
{{Warnung|text=Der Adserver DFP erlaubt keine Sonderzeichen in den Adunits mit Ausnahme des Unterstrichs "_". Auch Umlaute und ß sind nicht erlaubt. level2, level3 und seitentyp sollten auch komplett kleingeschrieben werden.<br />
Generell sind die Adunits vom Google Ad Manager so gedacht, dass sie sich dynamisch aus dem CMS des Mandanten generieren lassen. Sollte das CMS so angelegt sein, dass eine andere Benennung sinnvoll erscheint, muss die iq digital frühzeitig kontaktiert werden, damit eine sinnvolle Lösung für alle Beteiligten gefunden werden kann.<br />
Bei Rubriken mit einem "und" bzw. einem "&" im Namen, wie z.B. Wirtschaft & Politik, bietet es sich an, nur die Hauptwörter getrennt mit einem Unterstrich aufzuführen, also wirtschaft_politik.}}<br />
<br />
===Creative Sizes===<br />
Im Google Ad Manager stehen die Creative Sizes für die Werbemittel-Größen. Dabei ist es möglich dass die tatsächlich ausgespielte Größe eines Werbemittels von der CreativeSize abweicht (in so einem Fall wird von Pseudogröße gesprochen). Die App muss für ein Adrequest der entsprechenden Platzierung alle zugehörigen Creative Sizes abfragen. Die oft lange Liste aus Größen ergibt sich aus den vielen möglichen unterschiedlichen Werbeformen und den Unterschieden in direkter und programmatischer Vermarktung.<br />
<br />
Bei Fullscreen Ad und Preloading Ad Platzierungen werden meist Größen für Portrait- und Landscape-Modus gemeinsam abgefragt.<br />
<br />
====Beispiele für Creative Sizes einer Banner Platzierung:====<br />
99x1, 320x1, 320x50, 320x53, 320x80, 320x160, 320x320, 300x50, 300x75, 300x100, 300x150, 300x250<br />
(In diesem Beispiel sind 99x1 und 320x1 Pseudogrößen. 99x1 ruft eine Ausbuchung vom Adserver, die die Werbeplatzierung ausblenden lässt. 320x1 ist eine historische Pseudogröße, welche in seltenen Fällen für von der Norm abweichende Werbemittel auf der Platzierung iqadtile1 verwendet wird. Jede Banner-Platzierung hat eine vergleichbare Pseudogröße der Form 320xY mit Y als Platzierungsbezeichnung, z.B. 320x1, 320x3, 320x4, 320x8 etc.<br />
<br />
====Beispiele für Creative Sizes einer Fullscreen Platzierung auf einem Android Tablet:====<br />
310x480, 480x310, 750x1024, 1024x750<br />
<br />
====Links zu Creative Sizes im Google Mobile Ads SDK:====<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner#multiple_ad_sizes<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/banner#multiple_ad_sizes<br />
und<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner#custom_ad_sizes<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/banner#custom_ad_sizes<br />
<br />
===Keywords (Anhängen von Key-Value-Paaren)===<br />
Ein Adrequest bekommt als CustomTargeting immer eine Gruppe aus Key-Value Paaren. Dabei können mehrere Werte (Values) mit einem Komma separiert sein. <br />
Diese Keywords haben mehrere Funktionen:<br />
*bestimmte Buchungen liefern nur aus, wenn diese Keywords existieren (z.B. bei bestimmten Produkten oder auch bei Testschaltungen)<br />
*Buchungen können über solche Keywords von der Auslieferung ausgeschlossen werden (z.B. um fehlerhafte Darstellungen einer Werbebuchung zu verhindern)<br />
*solche Keywords erlauben detaillierte Auslieferungs-Berichte (Reports)<br />
<br />
Die iq digital benutzt dabei bestimmte Key-Value-Paare. Hier sind die wichtigsten Keys erklärt:<br />
;kw:Generelle Keyword Liste. Hier sind meist mehrere Werte mit Komma separiert. Üblich sind einige Legacy-Werte (z.B. digtransform,nospa,enozqi). Hinzu kommen Bezeichner für die App oder die Seite (z.B. Rheinischer_Kurier_app_ios_phone), sowie die Werbeplatzierungsbezeichnung (z.B. iqadtile3).<br />
;tile:Die Nummer der Werbeplatzierung. Im Falle eines iqadtile3 also als Wert 3.<br />
;doc:Die Bezeichnung des Seitentyps. Gültige Werte sind homepage, index, artikel, bildgal<br />
;iqadtype:Die Angabe der Plattform. Gültige Werte sind online, mew, app, amp<br />
;appver:Die Bezeichnung der Appversions-Nummer (s.u.)<br />
<br />
Angaben welche Keywords für welche Platzierung verwendet werden sollen, finden sich in der creative_sizes_and_keywords.xlsc Tabelle, die von der iq digital zu Projektstart zur Verfügung gestellt wird.<br />
<br />
====Links zum CustomTargeting im Google Mobile Ads SDK====<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/targeting#custom_targeting<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/targeting#custom_targeting<br />
<br />
===Debugging===<br />
[[Datei:Easteregg dialog.png|300px|thumbnail|Beispiel aus einer Android App mit Textfeld für Keywords und Checkbox für USB Debugging]]<br />
Es muss eine "Easter-Egg"-Funktion in die App eingebaut werden, damit die iq digital Probleme und neue Werbeformen innerhalb der Live App (Version aus dem App- bzw. Playstore) testen kann. Der Adserver DFP bietet die Möglichkeiten Testschaltungen über ein Keyword in der App auszuspielen. <br />
<br />
In einem selten frequentierten Bereich der App, wie z.B. dem Impressum, sollte es daher die Möglichkeit für Eingeweihte geben, einen kleinen Dialog aufzurufen. Durch diesen kann man ein selbst gewähltes Keyword jedem zukünftigen Adrequest anhängen. Gleichzeitig oder durch das Aktivierung einer Checkbox kann der USB-Debug-Modus, um die Werbe Webviews in der Android App auf dem Desktop Chrome zu inspizieren, aktiviert werden. <br />
<pre><br />
WebView.setWebContentsDebuggingEnabled(true);<br />
</pre><br />
Danach kann man unter Android die Webviews der App im Desktop Chrome mit chrome://inspect einsehen. <br />
Dies ermöglicht Fehler in der Werbedarstellung besser zu analysieren.<br />
<br />
Ohne ein Debug Easter Egg in der App kann nach Livegang keine Testschaltung aufgesetzt werden und es können auch keine Probleme analysiert werden. Dies würde die Wartung der App von Seiten der iq digital verhindern und auch dem Mandanten keine Möglichkeit geben, selber seine App mit Testwerbung zu überprüfen.<br />
Die Keyword-Funktion dient daher, den Personenkreis einzuschränken, der die Testschaltungen zu Gesicht bekäme. <br />
<br />
Das Anhängen der Keywords ist beim Punkt [[#Anhängen von Key-Value-Paaren]] genauer erklärt.<br />
<br />
Mehrfache Keywords werden durch Kommata separiert.<br />
<br />
Es gibt vielfältige Optionen, wie das Easter-Egg aktiviert werden kann. Mehrfache/unsinnige Taps auf UI-Elemente oder eine ganz spezielle Eingabe ins Suchfeld seien hier beispielhaft genannt. Die iq digital erlaubt sich aber die Vorgabe, dass unter Android und iOS das Debug-Easter-Egg identisch aktiviert wird. Bei der Art der Aktivierung des Debug-Easter-Egg stehen wir gerne beratend zur Seite.<br />
<br />
===Wichtige Hinweise zu dieser Anleitung===<br />
Die Adunits für die Werbeplatzierungen werden von uns erst zu Projektstart erstellt und mit Testwerbung belegt. Anschließend werden die Adunits an den Mandanten übermittelt.<br />
Bitte nicht mit der im SDK fest eingebauten Logik für Test-Werbemittel arbeiten. Diese entspricht nicht der Art und Weise wie die von der iq digital vermarktete Werbung funktioniert und führt zu Missverständnissen.<br />
Stattdessen sind auf den Adunits permanent Buchungen mit Test-Werbemitteln aktiv welche über ein spezielles Test-Keyword im Adrequest vom Adserver ausgeliefert werden.<br />
<br />
===Ansprechpartner iq digital===<br />
Die iq digital steht für Fragen und Kommentare gerne zur Verfügung. Sollten wir einmal nicht weiterhelfen können, ist es uns möglich einen Entwickler von Google als Ansprechpartner in die Diskussion mit einzubeziehen.<br />
<br />
====Tim Lohmann (Mobile Developer Ad Technology)====<br />
;Telefon:+49 211 887 2336<br />
;E-Mail:tim.lohmann@iqdigital.de<br />
<br />
===Wichtige Dokumente===<br />
====Liste der Creative Sizes und Keywords für jede Platzierung:====<br />
*<datum>_dfp_creative_sizes.xlsx<br />
====Liste der Adunits:====<br />
(diese dienen nur als Orientierungshilfe. Die Apps sollten diese Zonen dynamisch aus dem CMS generieren)<br />
<appname> muss durch den entsprechenden App Namen ersetzt werden.<br />
*<datum>_adunits_<appname>_android_tablet.txt<br />
*<datum>_adunits_<appname>_ios_tablet.txt<br />
*<datum>_adunits_<appname>_ android_phone.txt<br />
*<datum>_adunits_<appname>_ios_phone.txt<br />
<br />
<br />
<br />
<br />
==Preloading Ad==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist eine Display ausfüllende Anzeige, die während des Ladescreen (Splashscreen) der App angezeigt wird. Sie wird für 5s angezeigt und schließt dann automatisch. In einer Ecke wird ein Close-Button angezeigt, um vorzeitig zum Inhalt der App zu gelangen.<br />
<br />
[[Datei:Preloading Ad 1.png|x300px]]<br />
[[Datei:Preloading Ad 2.png|300px]]<br />
|position=<br />
Die Platzierung legt sich wie ein Overlay über den Splash-Screen der App. Im Hintergrund kann die App den Content laden.<br />
|template=<br />
*skaliert Werbemittel bei Beibehaltung des Seitenverhältnisses entsprechend der Abmaße des Werbecontainers<br />
*schließt das Werbemittel nach 5s<br />
*positioniert und zentriert das Werbemittel<br />
*zeigt in einer Ecke einen Close-Button an, mit dem der Nutzer jederzeit zum Content zurückkehren kann.<br />
*bei Orientationchange- oder Resize-Event: skaliert die Werbemittel enstprechend der neuen Maße. Dies kann mehrere hundert Millisekunden dauern, bis alle neuen Maße feststehen und vom Webviewbrowser zur Verfügung gestellt werden.<br />
Durch die Skalierung können je nach Display am Rand schwarze oder weiße Balken entstehen. Dies passiert immer dann, wenn das Display ein anderes Seitenverhältnis als die Werbemittel hat.<br />
|app=<br />
*sendet das Adrequest während des Splash-Screens<br />
*im Falle einer Buchung: <br />
**erzeugt das Interstitial mit Hilfe des GMA SDKs<br />
**vergrößert den Werbecontainers auf Display-Größe<br />
*bei Orientationchange- oder Resize-Event: passt die Werbeseite und den Werbecontainer an die neuen Display-Maße an<br />
*bereitet im Hintergrund weiter den Content vor<br />
*im Falle '''keiner''' Buchung: wird normal der Content geladen<br />
|workflowad=<br />
#App wird vom Nutzer gestartet<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt das Interstitial<br />
#Werbetemplate skaliert Werbemittel in dem Container<br />
#nach 5s schließt sich das Ad automatisch und der Content dahinter wird sichtbar<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet, dass er keine Werbebuchung hat<br />
#App lädt ganz normal den Content<br />
|creativesizes=<br />
;Smartphone:320x480 bzw. 480x320<br />
;Tablet:768x1024 bzw. 1024x768<br />(bei Android auch zusätzlich: 320x480 bzw. 480x320)<br />
{{Warnung|text=Die Creativesizes sind Pseudogrößen, sie entsprechen nicht den tatsächlichen Abmaßen des Werbemittels.}}<br />
|keywords=<br />
;kw:iqadtilePre<br />
;tile:0<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/interstitial<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/interstitial<br />
}}<br />
<br />
==Fullscreen Anzeigen (auch Swipe Anzeigen oder Swipe-Ads genannt)==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist eine Display ausfüllende Anzeigen, die zwischen zwei regulären Content-Seiten in der App angezeigt wird. Sie lässt sich horizontal wie die übrigen Content-Seiten swipen und wird von keinen Teilen der App (wie App-Header oder -Footer) überlagert. Sollte der Nutzer ein Orientationchange-Event erzeugen, passt sich die Anzeige dem neuen Seitenverhältnis an.<br />
<br />
[[Datei:Fullscreen Ad 1.png|x300px]]<br />
[[Datei:Fullscreen Ad 2.png|300px]]<br />
|position=<br />
Die Platzierung ist dynamisch zwischen zwei Content-Seiten eingebettet. Dabei befindet sich die Werbeplatzierung immer rechts neben der Seite, die Ihr im Content zugeordnet ist, z.B. Politik/swipe_1 meint, dass zuerst die 1. Politik-Content-Seite angezeigt wird und beim nächsten Swipe die Werbe-Seite erscheint <br />
|template=<br />
*skaliert Werbemittel bei Beibehaltung des Seitenverhältnisses entsprechend der Abmaße des Werbecontainers<br />
*positioniert und zentriert das Werbemittel<br />
*bei Orientationchange- oder Resize-Event: skaliert die Werbemittel enstprechend der neuen Maße. Dies kann mehrere hundert Millisekunden dauern, bis alle neuen Maße feststehen und vom Webviewbrowser zur Verfügung gestellt werden.<br />
Durch die Skalierung können je nach Display am Rand schwarze oder weiße Balken entstehen. Dies passiert immer dann, wenn das Display ein anderes Seitenverhältnis als die Werbemittel hat.<br />
|app=<br />
*sendet das Adrequest 1-2 Content-Seiten vor der Platzierung ab, damit der Adserver Zeit genug hat, die Werbung zu liefern<br />
*erzeugt dynamisch eine Werbeseite im Seitenfluss rechts neben der zugeordneten Content-Seite<br />
*im Falle einer Buchung: vergößert den Werbecontainers auf Display-Größe<br />
*blendet App-Header und -Footer aus (falls erforderlich)<br />
*bei Orientationchange- oder Resize-Event: passt die Werbeseite und den Werbecontainer an die neuen Display-Maße an<br />
*im Falle '''keiner''' Buchung: entfernt die Werbeseite aus dem Seitenfluss<br />
|workflowad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt dynamisch die Werbeseite<br />
#Werbecontainer wird auf die Display-Abmaße aufgezogen<br />
#Werbetemplate skaliert Werbemittel in dem Container<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet, dass er keine Werbebuchung hat<br />
#App erzeugt '''keine''' Werbeseite bzw. entfernt eine zuvor erzeugte Werbeseite aus dem Seitenfluss<br />
|creativesizes=<br />
;Smartphone:310x480 bzw. 480x310<br />
;Tablet:750x1024 bzw. 1024x750<br />(bei Android auch zusätzlich: 310x480 bzw. 480x310)<br />
{{Warnung|text=Die Creativesizes sind Pseudogrößen, sie entsprechen nicht den tatsächlichen Abmaßen des Werbemittels.}}<br />
|keywords=<br />
;kw:iqadtileFull<br />
;tile:1<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
}}<br />
<br />
==Banner-Anzeigen==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist ein Banner innerhalb einer Content-Seite. Je nach Werbeform kann diese Anzeige mehr oder weniger Interaktivität für den Endnutzer besitzen. Sie kann anmiert oder eine komplexe HTML-Anzeige sein. Es ist auch möglich dass die Anzeige durch bestimmte Ereignisse sich in der Größe verändert.<br />
<br />
[[Datei:Mobile High Impact Ad.png|x300px]]<br />
|position=<br />
Die Platzierung ist zwischen Content-Elemente einer Seite platziert und erfordert eine Anzeigenkennzeichnung "Anzeige" oberhalb der Platzierung. Üblicherweise befinden sich mehrere Platzierungen innerhalb einer Seite.<br />
|template=<br />
*kümmert sich um die Funktionalität, welche je nach Werbeform simpel oder komplex sein kann.<br />
|app=<br />
*sendet die Adrequests für alle Platzierungen einer Seite<br />
*baut für jede Platzierung eine Anzeigenkennzeichnung "Anzeige" oberhalb der Platzierung ein<br />
*erstellt den Werbecontainer mit Größe, welche in der Antwort vom Andserver auf das Adrequest mitgeliefert wird<br />
*lauscht mit dem EventListener auf mögliche setsize- oder noad-Events und verändert den Werbecontainer entsprechend.<br />
*im Falle einer Ausbuchung:<br />
**empfängt sie ein setsize-Event muss sie die Werbeplatzierung und den Werbecontainer an die neue Größe anpassen, sofern sich diese von der aktuellen Größe unterscheidet<br />
**empfängt sie ein noad-Event, muss sie die Werbeplatzierung und die zugehörige Anzeigenkennzeichnung komplett entfernen bzw. ausblenden<br />
|workflowad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt Werbecontainer mit der Größe, die in der Response des Adservers enthalten ist<br />
#eventuell muss der Werbecontainer auf Grund eines setsize-Events angepasst werden<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Ausbuchung als Werbebuchung<br />
#App empfängt eine Response mit der Größe 99x1 und erhält kurze Zeit später ein noad-Event<br />
#App blendet Werbeplatzierung und Anzeigenkennzeichnung bis zum nächsten Pagerequest aus<br />
|creativesizes=<br />
320x50, 320x53, 320x80, 320x106, 320x160, 320x320, 320x416, 320x460, 300x50, 300x75, 300x100, 300x150, 300x200, 300x250, 300x600<br />
Weitere Größen sind möglich. Je nach Platzierung wird nur ein Auszug der Größenliste im Adrequest verwendet. Eine genaue Zuordnung erfolgt in einem separaten Dokument.<br />
|keywords=<br />
;kw:nospa, enozqi, digtransform, iqadtileX*<br />
;tile:X*<br />
X entspricht dabei der Nummer der Platzierung, z.B. iqadtile1, iqadtile3, iqadtile4, iqadtile99, iqadtile8<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
}}<br />
<br />
==Dokumentation der iq digital App Events==<br />
Die App Events bestehen aus dem Namen und einem "data"-String<br />
<br />
===setsize – Event===<br />
Das setsize-Event wird von den Werbetemplates der iq digital aufgerufen, um die Größe des Adviews der Werbeplatzierung zu verändern.<br />
Der "data"-String hat das Format '''"width:height"''' für eine sofortige Änderung der Größe.<br />
<br />
=====Parameter=====<br />
Die Parameter werden mit einem Doppelpunkt von einander getrennt.<br />
;width:Die neue Breite des Adviews in Pixel (Device-Independent-Pixel) als ganze Zahl.<br />
;height:Die neue Höhe des Adviews in Pixel (Device-Independent-Pixel) als ganze Zahl.<br />
{{Warnung|text=Ausnahme: Für eine Anpassung auf die maximal verfügbare Breite oder Höhe wird der Wert '''max''' verwendet.}}<br />
<br />
Beispielaufrufe:<br />
;<nowiki>"setsize","320:80"</nowiki>:Adview bekommt die neue Größe 320x80 Pixel<br />
;<nowiki>"setsize","320:240"</nowiki>:Adview bekommt die neue Größe 320x240 Pixel<br />
;<nowiki>"setsize","max:160"</nowiki>:Adview wird auf die maximal verfügbare Breite und eine Höhe von 160 Pixel angepasst<br />
;<nowiki>"setsize","max:max"</nowiki>:Adview wird auf die maximal verfügbare Breite und die maximal verfügbare Höhe angepasst<br />
<br />
===noad – Event===<br />
Das noad-Event wird von den Werbetemplates der iq digital aufgerufen, um der App zu signalisieren, dass für die Platzierung keine Buchung vorliegt und die App die Werbeplatzierung '''und die zugehörige Anzeigenkennzeichnung''' entfernen soll.<br />
<br />
Der "data"-String hat für dieses Event keine Bedeutung und kann ignoriert werden.<br />
<br />
[[Kategorie:Ad Technology]][[Kategorie:APP]]<br />
[[en:Integration of the Google Mobile Ads SDK]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Einbau_des_Google_Mobile_Ads_SDK&diff=194Einbau des Google Mobile Ads SDK2021-11-12T22:57:51Z<p>Efeigegernoth: /* Creative Sizes */</p>
<hr />
<div>==Offizielle Dokumentation zum Google Mobile Ads SDK==<br />
Das Google Mobile Ads SDK (GMA SDK) bringt alles mit, was für eine Werbeausspielung in nativen Apps benötigt wird.<br />
<br />
===Getting Started zum Google Mobile Ads SDK===<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/ios/quick-start GMA SDK iOS Getting Started]<br />
<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/android/quick-start GMA SDK iOS Getting Started]<br />
<br />
===Download des Google Mobile Ads SDK===<br />
====Android====<br />
Das GMA SDK ist in den Android Play Services integriert und deshalb auf den Android Geräten vorhanden. <br />
<br />
====iOS====<br />
Für iOS kann das GMA SDK hier heruntergeladen werden:<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/ios/download Download iOS]<br />
<br />
===Ad-Manager vs. Admob===<br />
Die Dokumentation zum Google Mobile Ads SDK gibt es in zwei Varianten: für Ad-Manager- und Admob-Nutzer. Die iq digital ist ein Ad-Manager Kunde, deswegen muss unbedingt darauf geachtet werden, dass in der Browser-URL https://developers.google.com/ad-manager/... enthalten ist. Die Admob Doku unterscheidet sich leicht von der Ad-Manager Doku.<br />
<br />
<br />
==Kurze Einführung in den Lebens-Zyklus einer Werbeausspielung mit dem GMA SDK==<br />
Am Beispiel einer Banner-Werbeausspielung wird hier kurz der Lebens-Zyklus einer Werbeausspielung erklärt.<br />
<br />
[[Datei:GMA_SDK.png|800px|thumbnail|Übersicht Workflow der Werbeausspielung mit GMA SDK]]<br />
<br />
===Request===<br />
Das Adrequest wird in der App zusammengestellt und besteht aus mehreren Komponenten. Für eine erfolgreiche Werbeausspielung sind folgende Komponenten wichtig:<br />
;Consent String:Die App benötigt vom Nutzer einen gültigen Consent für die Werbeausspielung. Dabei sind neben mehreren relevanten Purposes auch der Vendor 755 Google Advertising Products notwendig (s.u.)<br />
;Creative-Sizes:In den meisten Fällen benutzen wir '''multisize'''-Adrequests. Das bedeutet, dass das Adrequest mehrere Creative Größen enthält und der Adserver daraufhin prüft, ob er ein Creative für eine dieser Größen zur Verfügung hat. Beispiele sind z.B. 320x1, 320x53, 320x80, 320x106, 320x160 etc.<br />
;Adunit:Die Adunit ist die Adresse der Werbeplatzierung. Damit weiß der Adserver, auf welcher Seite eine Werbeausspielung erfolgt. Die Adunit ist für alle Adrequests eines Pagerequests gleich. Beispiel: /183/Rheinischer_Kurier_ios_phone/homepage <br />
;Keywords (optional):Keywords sind Key-Value Paare und können eine Werbeplatzierung um weitere Informationen anreichern, die für eine gezielte Werbeausspielung notwendig sind. Die Werbeplatzierungen der iq digital enthalten alle eine bestimmte Bezeichnung, welche über die Keywords dem Adserver mitgegeben wird. Beispiel: kw=iqadtile1,digtransfrom&tile=1&doc=homepage<br />
<br />
===Adserver Google Admanager 360===<br />
Wenn der Adserver gültigen Consent besitzt, prüft ein Verteilungsalgorithmus, ob eine oder mehrere Werbebuchungen für die Adunit, Creative sizes und Keywords vorliegen. Ist dies der Fall wählt der Adserver die beste dafür aus. Sind mehrere Buchungen gleich wichtig, wählt er zufällig eine davon aus. Nur im Falle keiner Buchung würde er eine '''no ad''' oder '''no fill''' Meldung ausgeben, die besagt, dass für die Kombination aus adunit, creative size und Keywords keine Buchung existiert.<br />
<br />
===Ausspielung innerhalb der App===<br />
Die App lädt die Response des Adservers, die aus dem Template-Code und den Creative Komponenten besteht. Dabei ist zu beachten, dass der Werbecontainer auf die creative size des ausgelieferten Creatives vergrößert wird. Für Fullscreen Ads muss diese Größe von der App nachträglich auf die Display Viewport Größe (also device independent pixel) angepasst werden. Im Falle einer Banner Anzeige bekommt die App meist nach dem Ladevorgang ein oder mehrere setsize-Events über den einzubauenden AppEventHandler und muss den Werbecontainer auf die neue Größe anpassen, sofern diese sich von der creative size unterscheidet.<br />
<br />
===Impression-Zählung===<br />
Eine Impression Zählung, die misst, dass ein Ad angesehen wurde, wird vom GMA SDK automatisch abgeschickt, sobald mindestens 1px im sichtbaren Bereich des Displays ist.<br />
<br />
==Allgemeine Informationen==<br />
===Adunits (Zonierung)===<br />
Der Google Ad Manager benutzt zur Adressierung der Seiten Adunits, die sich wie folgt zusammensetzen können:<br />
*/netzwerkId/level1<br />
*/netzwerkId/level1/seitentyp<br />
*/netzwerkId/level1/level2/seitentyp<br />
*/netzwerkId/level1/level2/level3/seitentyp<br />
*usw.<br />
<br />
====Begriffserklärung====<br />
;netzwerkId:Hier ist immer die Netzwerk ID der iq digital einzugeben: 183<br />
;level1:Dies ist die Bezeichnung der App im Google Ad Manager und wird von der iq digital vorgegeben. Die Bezeichnung besteht aus <appname>_app_<plattform>_<gerätetyp>.<br />
:;appname:Der Name der App<br />
:;plattform:Das Betriebsystem, also ''ios'' oder ''android''<br />
:;gerätetyp:Der Gerätetyp, also '''phone''' oder ''tablet''<br />
;level2:Dies ist die Bezeichnung einer Rubrik der App, z.B. ''politik''<br />
;level3 (usw.):Dies ist die Bezeichnung für eine Unterrubrik, z.B. im Falle von ''politik'' als level2 wäre ''ausland'' eine Unterrubrik für level3. Level4 und höher sind weitere tiefere Verzweigungen der App, diese werden im Normalfall nicht also Adunits angelegt und solche Seiten würden unter dem level3 angelegt werden.<br />
;seitentyp:In Apps mit Banner-Anzeigen (z.B. News Apps) bezeichnet ''seitentyp'' die unterschiedlichen Seitentypen, also ob es sich z.B. um eine Übersichts-, Artikel- oder Bildergalerieseite handelt. Übliche Werte dafür sind ''homepage'', ''index'', ''artikel'', ''bildgal''. In Apps mit Fullscreen-Anzeigen (z.B. epaper oder Zeitungs Apps) werden mit ''seitentyp'' die unterschiedlichen Anzeigeplätze innerhalb der Rubrik gemeint, also ob es sich z.B. erste, zweite oder dritte Swipe Anzeige handelt. Übliche Werte sind ''openingpage'', ''swipe_1'', ''swipe_2'', ''swipe_3'' usw.<br />
<br />
====Beispiel für die fiktive Rheinischer Kurier News App mit Banner-Anzeigen:====<br />
*/183/Rheinischer_Kurier_app_ios_phone<br />
*/183/Rheinischer_Kurier_app_ios_phone /homepage<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/index<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/artikel<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/bildgal<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/index<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/artikel<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/bildgal<br />
<br />
====Beispiel für die fiktive Rheinischer Kurier Epaper iPad App mit Fullscreen-Anzeigen:====<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/preloading_ad<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/openingpage<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_1<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_2<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_3<br />
<br />
{{Warnung|text=Der Adserver DFP erlaubt keine Sonderzeichen in den Adunits mit Ausnahme des Unterstrichs "_". Auch Umlaute und ß sind nicht erlaubt. level2, level3 und seitentyp sollten auch komplett kleingeschrieben werden.<br />
Generell sind die Adunits vom Google Ad Manager so gedacht, dass sie sich dynamisch aus dem CMS des Mandanten generieren lassen. Sollte das CMS so angelegt sein, dass eine andere Benennung sinnvoll erscheint, muss die iq digital frühzeitig kontaktiert werden, damit eine sinnvolle Lösung für alle Beteiligten gefunden werden kann.<br />
Bei Rubriken mit einem "und" bzw. einem "&" im Namen, wie z.B. Wirtschaft & Politik, bietet es sich an, nur die Hauptwörter getrennt mit einem Unterstrich aufzuführen, also wirtschaft_politik.}}<br />
<br />
===Creative Sizes===<br />
Im Google Ad Manager stehen die Creative Sizes für die Werbemittel-Größen. Dabei ist es möglich dass die tatsächlich ausgespielte Größe eines Werbemittels von der CreativeSize abweicht (in so einem Fall wird von Pseudogröße gesprochen). Die App muss für ein Adrequest der entsprechenden Platzierung alle zugehörigen Creative Sizes abfragen. Die oft lange Liste aus Größen ergibt sich aus den vielen möglichen unterschiedlichen Werbeformen und den Unterschieden in direkter und programmatischer Vermarktung.<br />
<br />
Bei Fullscreen Ad und Preloading Ad Platzierungen werden meist Größen für Portrait- und Landscape-Modus gemeinsam abgefragt.<br />
<br />
====Beispiele für Creative Sizes einer Banner Platzierung:====<br />
99x1, 320x1, 320x50, 320x53, 320x80, 320x160, 320x320, 300x50, 300x75, 300x100, 300x150, 300x250<br />
(In diesem Beispiel sind 99x1 und 320x1 Pseudogrößen. 99x1 ruft eine Ausbuchung vom Adserver, die die Werbeplatzierung ausblenden lässt. 320x1 ist eine historische Pseudogröße, welche in seltenen Fällen für von der Norm abweichende Werbemittel auf der Platzierung iqadtile1 verwendet wird. Jede Banner-Platzierung hat eine vergleichbare Pseudogröße der Form 320xY mit Y als Platzierungsbezeichnung, z.B. 320x1, 320x3, 320x4, 320x8 etc.<br />
<br />
====Beispiele für Creative Sizes einer Fullscreen Platzierung auf einem Android Tablet:====<br />
310x480, 480x310, 750x1024, 1024x750<br />
<br />
====Links zu Creative Sizes im Google Mobile Ads SDK:====<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner#multiple_ad_sizes<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/banner#multiple_ad_sizes<br />
und<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner#custom_ad_sizes<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/banner#custom_ad_sizes<br />
<br />
===Keywords (Anhängen von Key-Value-Paaren)===<br />
Ein Adrequest bekommt als CustomTargeting immer eine Gruppe aus Key-Value Paaren. Dabei können mehrere Werte (Values) mit einem Komma separiert sein. <br />
Diese Keywords haben mehrere Funktionen:<br />
*bestimmte Buchungen liefern nur aus, wenn diese Keywords existieren (z.B. bei bestimmten Produkten oder auch bei Testschaltungen)<br />
*Buchungen können über solche Keywords von der Auslieferung ausgeschlossen werden (z.B. um fehlerhafte Darstellungen einer Werbebuchung zu verhindern)<br />
*solche Keywords erlauben detaillierte Auslieferungs-Berichte (Reports)<br />
<br />
Die iq digital benutzt dabei bestimmte Key-Value-Paare. Hier sind die wichtigsten Keys erklärt:<br />
;kw:Generelle Keyword Liste. Hier sind meist mehrere Werte mit Komma separiert. Üblich sind einige Legacy-Werte (z.B. digtransform,nospa,enozqi). Hinzu kommen Bezeichner für die App oder die Seite (z.B. Rheinischer_Kurier_app_ios_phone), sowie die Werbeplatzierungsbezeichnung (z.B. iqadtile3).<br />
;tile:Die Nummer der Werbeplatzierung. Im Falle eines iqadtile3 also als Wert 3.<br />
;doc:Die Bezeichnung des Seitentyps. Gültige Werte sind homepage, index, artikel, bildgal<br />
;iqadtype:Die Angabe der Plattform. Gültige Werte sind online, mew, app, amp<br />
;appver:Die Bezeichnung der Appversions-Nummer (s.u.)<br />
<br />
Angaben welche Keywords für welche Platzierung verwendet werden sollen, finden sich in der creative_sizes_and_keywords.xlsc Tabelle, die von der iq digital zu Projektstart zur Verfügung gestellt wird.<br />
<br />
====Links zum CustomTargeting im Google Mobile Ads SDK====<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/targeting#custom_targeting<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/targeting#custom_targeting<br />
<br />
===Debugging===<br />
[[Datei:Easteregg dialog.png|300px|thumbnail|Beispiel aus einer Android App mit Textfeld für Keywords und Checkbox für USB Debugging]]<br />
Es muss eine "Easter-Egg"-Funktion in die App eingebaut werden, damit die iq digital Probleme und neue Werbeformen innerhalb der Live App (Version aus dem App- bzw. Playstore) testen kann. Der Adserver DFP bietet die Möglichkeiten Testschaltungen über ein Keyword in der App auszuspielen. <br />
<br />
In einem selten frequentierten Bereich der App, wie z.B. dem Impressum, sollte es daher die Möglichkeit für Eingeweihte geben, einen kleinen Dialog aufzurufen. Durch diesen kann man ein selbst gewähltes Keyword jedem zukünftigen Adrequest anhängen. Gleichzeitig oder durch das Aktivierung einer Checkbox kann der USB-Debug-Modus, um die Werbe Webviews in der Android App auf dem Desktop Chrome zu inspizieren, aktiviert werden. <br />
<pre><br />
WebView.setWebContentsDebuggingEnabled(true);<br />
</pre><br />
Danach kann man unter Android die Webviews der App im Desktop Chrome mit chrome://inspect einsehen. <br />
Dies ermöglicht Fehler in der Werbedarstellung besser zu analysieren.<br />
<br />
Ohne ein Debug Easter Egg in der App kann nach Livegang keine Testschaltung aufgesetzt werden und es können auch keine Probleme analysiert werden. Dies würde die Wartung der App von Seiten der iq digital verhindern und auch dem Mandanten keine Möglichkeit geben, selber seine App mit Testwerbung zu überprüfen.<br />
Die Keyword-Funktion dient daher, den Personenkreis einzuschränken, der die Testschaltungen zu Gesicht bekäme. <br />
<br />
Das Anhängen der Keywords ist beim Punkt [[#Anhängen von Key-Value-Paaren]] genauer erklärt.<br />
<br />
Mehrfache Keywords werden durch Kommata separiert.<br />
<br />
Es gibt vielfältige Optionen, wie das Easter-Egg aktiviert werden kann. Mehrfache/unsinnige Taps auf UI-Elemente oder eine ganz spezielle Eingabe ins Suchfeld seien hier beispielhaft genannt. Die iq digital erlaubt sich aber die Vorgabe, dass unter Android und iOS das Debug-Easter-Egg identisch aktiviert wird. Bei der Art der Aktivierung des Debug-Easter-Egg stehen wir gerne beratend zur Seite.<br />
<br />
===Wichtige Hinweise zu dieser Anleitung===<br />
Die Adunits für die Werbeplatzierungen werden von uns erst zu Projektstart erstellt und mit Testwerbung belegt. Anschließend werden die Adunits an den Mandanten übermittelt.<br />
Bitte nicht mit der im SDK fest eingebauten Logik für Test-Werbemittel arbeiten. Diese entspricht nicht der Art und Weise wie die von der iq digital vermarktete Werbung funktioniert und führt zu Missverständnissen.<br />
Stattdessen sind auf den Adunits permanent Buchungen mit Test-Werbemitteln aktiv welche über ein spezielles Test-Keyword im Adrequest vom Adserver ausgeliefert werden.<br />
<br />
===Ansprechpartner iq digital===<br />
Die iq digital steht für Fragen und Kommentare gerne zur Verfügung. Sollten wir einmal nicht weiterhelfen können, ist es uns möglich einen Entwickler von Google als Ansprechpartner in die Diskussion mit einzubeziehen.<br />
<br />
====Tim Lohmann (Mobile Developer Ad Technology)====<br />
;Telefon:+49 211 887 2336<br />
;E-Mail:tim.lohmann@iqdigital.de<br />
<br />
===Wichtige Dokumente===<br />
====Liste der Creative Sizes und Keywords für jede Platzierung:====<br />
*<datum>_dfp_creative_sizes.xlsx<br />
====Liste der Adunits:====<br />
(diese dienen nur als Orientierungshilfe. Die Apps sollten diese Zonen dynamisch aus dem CMS generieren)<br />
<appname> muss durch den entsprechenden App Namen ersetzt werden.<br />
*<datum>_adunits_<appname>_android_tablet.txt<br />
*<datum>_adunits_<appname>_ios_tablet.txt<br />
*<datum>_adunits_<appname>_ android_phone.txt<br />
*<datum>_adunits_<appname>_ios_phone.txt<br />
<br />
<br />
<br />
<br />
==Preloading Ad==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist eine Display ausfüllende Anzeige, die während des Ladescreen (Splashscreen) der App angezeigt wird. Sie wird für 5s angezeigt und schließt dann automatisch. In einer Ecke wird ein Close-Button angezeigt, um vorzeitig zum Inhalt der App zu gelangen.<br />
<br />
[[Datei:Preloading Ad 1.png|x300px]]<br />
[[Datei:Preloading Ad 2.png|300px]]<br />
|position=<br />
Die Platzierung legt sich wie ein Overlay über den Splash-Screen der App. Im Hintergrund kann die App den Content laden.<br />
|template=<br />
*skaliert Werbemittel bei Beibehaltung des Seitenverhältnisses entsprechend der Abmaße des Werbecontainers<br />
*schließt das Werbemittel nach 5s<br />
*positioniert und zentriert das Werbemittel<br />
*zeigt in einer Ecke einen Close-Button an, mit dem der Nutzer jederzeit zum Content zurückkehren kann.<br />
*bei Orientationchange- oder Resize-Event: skaliert die Werbemittel enstprechend der neuen Maße. Dies kann mehrere hundert Millisekunden dauern, bis alle neuen Maße feststehen und vom Webviewbrowser zur Verfügung gestellt werden.<br />
Durch die Skalierung können je nach Display am Rand schwarze oder weiße Balken entstehen. Dies passiert immer dann, wenn das Display ein anderes Seitenverhältnis als die Werbemittel hat.<br />
|app=<br />
*sendet das Adrequest während des Splash-Screens<br />
*im Falle einer Buchung: <br />
**erzeugt das Interstitial mit Hilfe des GMA SDKs<br />
**vergößert den Werbecontainers auf Display-Größe<br />
*bei Orientationchange- oder Resize-Event: passt die Werbeseite und den Werbecontainer an die neuen Display-Maße an<br />
*bereitet im Hintergrund weiter den Content vor<br />
*im Falle '''keiner''' Buchung: wird normal der Content geladen<br />
|workflowad=<br />
#App wird vom Nutzer gestartet<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt das Interstitial<br />
#Werbetemplate skaliert Werbemittel in dem Container<br />
#nach 5s schließt sich das Ad automatisch und der Content dahinter wird sichtbar<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet, dass er keine Werbebuchung hat<br />
#App lädt ganz normal den Content<br />
|creativesizes=<br />
;Smartphone:320x480 bzw. 480x320<br />
;Tablet:768x1024 bzw. 1024x768<br />(bei Android auch zusätzlich: 320x480 bzw. 480x320)<br />
{{Warnung|text=Die Creativesizes sind Pseudogrößen, sie entsprechen nicht den tatsächlichen Abmaßen des Werbemittels.}}<br />
|keywords=<br />
;kw:iqadtilePre<br />
;tile:0<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/interstitial<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/interstitial<br />
}}<br />
<br />
==Fullscreen Anzeigen (auch Swipe Anzeigen oder Swipe-Ads genannt)==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist eine Display ausfüllende Anzeigen, die zwischen zwei regulären Content-Seiten in der App angezeigt wird. Sie lässt sich horizontal wie die übrigen Content-Seiten swipen und wird von keinen Teilen der App (wie App-Header oder -Footer) überlagert. Sollte der Nutzer ein Orientationchange-Event erzeugen, passt sich die Anzeige dem neuen Seitenverhältnis an.<br />
<br />
[[Datei:Fullscreen Ad 1.png|x300px]]<br />
[[Datei:Fullscreen Ad 2.png|300px]]<br />
|position=<br />
Die Platzierung ist dynamisch zwischen zwei Content-Seiten eingebettet. Dabei befindet sich die Werbeplatzierung immer rechts neben der Seite, die Ihr im Content zugeordnet ist, z.B. Politik/swipe_1 meint, dass zuerst die 1. Politik-Content-Seite angezeigt wird und beim nächsten Swipe die Werbe-Seite erscheint <br />
|template=<br />
*skaliert Werbemittel bei Beibehaltung des Seitenverhältnisses entsprechend der Abmaße des Werbecontainers<br />
*positioniert und zentriert das Werbemittel<br />
*bei Orientationchange- oder Resize-Event: skaliert die Werbemittel enstprechend der neuen Maße. Dies kann mehrere hundert Millisekunden dauern, bis alle neuen Maße feststehen und vom Webviewbrowser zur Verfügung gestellt werden.<br />
Durch die Skalierung können je nach Display am Rand schwarze oder weiße Balken entstehen. Dies passiert immer dann, wenn das Display ein anderes Seitenverhältnis als die Werbemittel hat.<br />
|app=<br />
*sendet das Adrequest 1-2 Content-Seiten vor der Platzierung ab, damit der Adserver Zeit genug hat, die Werbung zu liefern<br />
*erzeugt dynamisch eine Werbeseite im Seitenfluss rechts neben der zugeordneten Content-Seite<br />
*im Falle einer Buchung: vergößert den Werbecontainers auf Display-Größe<br />
*blendet App-Header und -Footer aus (falls erforderlich)<br />
*bei Orientationchange- oder Resize-Event: passt die Werbeseite und den Werbecontainer an die neuen Display-Maße an<br />
*im Falle '''keiner''' Buchung: entfernt die Werbeseite aus dem Seitenfluss<br />
|workflowad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt dynamisch die Werbeseite<br />
#Werbecontainer wird auf die Display-Abmaße aufgezogen<br />
#Werbetemplate skaliert Werbemittel in dem Container<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet, dass er keine Werbebuchung hat<br />
#App erzeugt '''keine''' Werbeseite bzw. entfernt eine zuvor erzeugte Werbeseite aus dem Seitenfluss<br />
|creativesizes=<br />
;Smartphone:310x480 bzw. 480x310<br />
;Tablet:750x1024 bzw. 1024x750<br />(bei Android auch zusätzlich: 310x480 bzw. 480x310)<br />
{{Warnung|text=Die Creativesizes sind Pseudogrößen, sie entsprechen nicht den tatsächlichen Abmaßen des Werbemittels.}}<br />
|keywords=<br />
;kw:iqadtileFull<br />
;tile:1<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
}}<br />
<br />
==Banner-Anzeigen==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist ein Banner innerhalb einer Content-Seite. Je nach Werbeform kann diese Anzeige mehr oder weniger Interaktivität für den Endnutzer besitzen. Sie kann anmiert oder eine komplexe HTML-Anzeige sein. Es ist auch möglich dass die Anzeige durch bestimmte Ereignisse sich in der Größe verändert.<br />
<br />
[[Datei:Mobile High Impact Ad.png|x300px]]<br />
|position=<br />
Die Platzierung ist zwischen Content-Elemente einer Seite platziert und erfordert eine Anzeigenkennzeichnung "Anzeige" oberhalb der Platzierung. Üblicherweise befinden sich mehrere Platzierungen innerhalb einer Seite.<br />
|template=<br />
*kümmert sich um die Funktionalität, welche je nach Werbeform simpel oder komplex sein kann.<br />
|app=<br />
*sendet die Adrequests für alle Platzierungen einer Seite<br />
*baut für jede Platzierung eine Anzeigenkennzeichnung "Anzeige" oberhalb der Platzierung ein<br />
*erstellt den Werbecontainer mit Größe, welche in der Antwort vom Andserver auf das Adrequest mitgeliefert wird<br />
*lauscht mit dem EventListener auf mögliche setsize- oder noad-Events und verändert den Werbecontainer entsprechend.<br />
*im Falle einer Ausbuchung:<br />
**empfängt sie ein setsize-Event muss sie die Werbeplatzierung und den Werbecontainer an die neue Größe anpassen, sofern sich diese von der aktuellen Größe unterscheidet<br />
**empfängt sie ein noad-Event, muss sie die Werbeplatzierung und die zugehörige Anzeigenkennzeichnung komplett entfernen bzw. ausblenden<br />
|workflowad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt Werbecontainer mit der Größe, die in der Response des Adservers enthalten ist<br />
#eventuell muss der Werbecontainer auf Grund eines setsize-Events angepasst werden<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Ausbuchung als Werbebuchung<br />
#App empfängt eine Response mit der Größe 99x1 und erhält kurze Zeit später ein noad-Event<br />
#App blendet Werbeplatzierung und Anzeigenkennzeichnung bis zum nächsten Pagerequest aus<br />
|creativesizes=<br />
320x50, 320x53, 320x80, 320x106, 320x160, 320x320, 320x416, 320x460, 300x50, 300x75, 300x100, 300x150, 300x200, 300x250, 300x600<br />
Weitere Größen sind möglich. Je nach Platzierung wird nur ein Auszug der Größenliste im Adrequest verwendet. Eine genaue Zuordnung erfolgt in einem separaten Dokument.<br />
|keywords=<br />
;kw:nospa, enozqi, digtransform, iqadtileX*<br />
;tile:X*<br />
X entspricht dabei der Nummer der Platzierung, z.B. iqadtile1, iqadtile3, iqadtile4, iqadtile99, iqadtile8<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
}}<br />
<br />
==Dokumentation der iq digital App Events==<br />
Die App Events bestehen aus dem Namen und einem "data"-String<br />
<br />
===setsize – Event===<br />
Das setsize-Event wird von den Werbetemplates der iq digital aufgerufen, um die Größe des Adviews der Werbeplatzierung zu verändern.<br />
Der "data"-String hat das Format '''"width:height"''' für eine sofortige Änderung der Größe.<br />
<br />
=====Parameter=====<br />
Die Parameter werden mit einem Doppelpunkt von einander getrennt.<br />
;width:Die neue Breite des Adviews in Pixel (Device-Independent-Pixel) als ganze Zahl.<br />
;height:Die neue Höhe des Adviews in Pixel (Device-Independent-Pixel) als ganze Zahl.<br />
{{Warnung|text=Ausnahme: Für eine Anpassung auf die maximal verfügbare Breite oder Höhe wird der Wert '''max''' verwendet.}}<br />
<br />
Beispielaufrufe:<br />
;<nowiki>"setsize","320:80"</nowiki>:Adview bekommt die neue Größe 320x80 Pixel<br />
;<nowiki>"setsize","320:240"</nowiki>:Adview bekommt die neue Größe 320x240 Pixel<br />
;<nowiki>"setsize","max:160"</nowiki>:Adview wird auf die maximal verfügbare Breite und eine Höhe von 160 Pixel angepasst<br />
;<nowiki>"setsize","max:max"</nowiki>:Adview wird auf die maximal verfügbare Breite und die maximal verfügbare Höhe angepasst<br />
<br />
===noad – Event===<br />
Das noad-Event wird von den Werbetemplates der iq digital aufgerufen, um der App zu signalisieren, dass für die Platzierung keine Buchung vorliegt und die App die Werbeplatzierung '''und die zugehörige Anzeigenkennzeichnung''' entfernen soll.<br />
<br />
Der "data"-String hat für dieses Event keine Bedeutung und kann ignoriert werden.<br />
<br />
[[Kategorie:Ad Technology]][[Kategorie:APP]]<br />
[[en:Integration of the Google Mobile Ads SDK]]</div>Efeigegernothhttp://docs.iqd-ao.de/de/index.php?title=Einbau_des_Google_Mobile_Ads_SDK&diff=193Einbau des Google Mobile Ads SDK2021-11-11T13:29:48Z<p>Efeigegernoth: /* Begriffserklärung */</p>
<hr />
<div>==Offizielle Dokumentation zum Google Mobile Ads SDK==<br />
Das Google Mobile Ads SDK (GMA SDK) bringt alles mit, was für eine Werbeausspielung in nativen Apps benötigt wird.<br />
<br />
===Getting Started zum Google Mobile Ads SDK===<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/ios/quick-start GMA SDK iOS Getting Started]<br />
<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/android/quick-start GMA SDK iOS Getting Started]<br />
<br />
===Download des Google Mobile Ads SDK===<br />
====Android====<br />
Das GMA SDK ist in den Android Play Services integriert und deshalb auf den Android Geräten vorhanden. <br />
<br />
====iOS====<br />
Für iOS kann das GMA SDK hier heruntergeladen werden:<br />
[https://developers.google.com/ad-manager/mobile-ads-sdk/ios/download Download iOS]<br />
<br />
===Ad-Manager vs. Admob===<br />
Die Dokumentation zum Google Mobile Ads SDK gibt es in zwei Varianten: für Ad-Manager- und Admob-Nutzer. Die iq digital ist ein Ad-Manager Kunde, deswegen muss unbedingt darauf geachtet werden, dass in der Browser-URL https://developers.google.com/ad-manager/... enthalten ist. Die Admob Doku unterscheidet sich leicht von der Ad-Manager Doku.<br />
<br />
<br />
==Kurze Einführung in den Lebens-Zyklus einer Werbeausspielung mit dem GMA SDK==<br />
Am Beispiel einer Banner-Werbeausspielung wird hier kurz der Lebens-Zyklus einer Werbeausspielung erklärt.<br />
<br />
[[Datei:GMA_SDK.png|800px|thumbnail|Übersicht Workflow der Werbeausspielung mit GMA SDK]]<br />
<br />
===Request===<br />
Das Adrequest wird in der App zusammengestellt und besteht aus mehreren Komponenten. Für eine erfolgreiche Werbeausspielung sind folgende Komponenten wichtig:<br />
;Consent String:Die App benötigt vom Nutzer einen gültigen Consent für die Werbeausspielung. Dabei sind neben mehreren relevanten Purposes auch der Vendor 755 Google Advertising Products notwendig (s.u.)<br />
;Creative-Sizes:In den meisten Fällen benutzen wir '''multisize'''-Adrequests. Das bedeutet, dass das Adrequest mehrere Creative Größen enthält und der Adserver daraufhin prüft, ob er ein Creative für eine dieser Größen zur Verfügung hat. Beispiele sind z.B. 320x1, 320x53, 320x80, 320x106, 320x160 etc.<br />
;Adunit:Die Adunit ist die Adresse der Werbeplatzierung. Damit weiß der Adserver, auf welcher Seite eine Werbeausspielung erfolgt. Die Adunit ist für alle Adrequests eines Pagerequests gleich. Beispiel: /183/Rheinischer_Kurier_ios_phone/homepage <br />
;Keywords (optional):Keywords sind Key-Value Paare und können eine Werbeplatzierung um weitere Informationen anreichern, die für eine gezielte Werbeausspielung notwendig sind. Die Werbeplatzierungen der iq digital enthalten alle eine bestimmte Bezeichnung, welche über die Keywords dem Adserver mitgegeben wird. Beispiel: kw=iqadtile1,digtransfrom&tile=1&doc=homepage<br />
<br />
===Adserver Google Admanager 360===<br />
Wenn der Adserver gültigen Consent besitzt, prüft ein Verteilungsalgorithmus, ob eine oder mehrere Werbebuchungen für die Adunit, Creative sizes und Keywords vorliegen. Ist dies der Fall wählt der Adserver die beste dafür aus. Sind mehrere Buchungen gleich wichtig, wählt er zufällig eine davon aus. Nur im Falle keiner Buchung würde er eine '''no ad''' oder '''no fill''' Meldung ausgeben, die besagt, dass für die Kombination aus adunit, creative size und Keywords keine Buchung existiert.<br />
<br />
===Ausspielung innerhalb der App===<br />
Die App lädt die Response des Adservers, die aus dem Template-Code und den Creative Komponenten besteht. Dabei ist zu beachten, dass der Werbecontainer auf die creative size des ausgelieferten Creatives vergrößert wird. Für Fullscreen Ads muss diese Größe von der App nachträglich auf die Display Viewport Größe (also device independent pixel) angepasst werden. Im Falle einer Banner Anzeige bekommt die App meist nach dem Ladevorgang ein oder mehrere setsize-Events über den einzubauenden AppEventHandler und muss den Werbecontainer auf die neue Größe anpassen, sofern diese sich von der creative size unterscheidet.<br />
<br />
===Impression-Zählung===<br />
Eine Impression Zählung, die misst, dass ein Ad angesehen wurde, wird vom GMA SDK automatisch abgeschickt, sobald mindestens 1px im sichtbaren Bereich des Displays ist.<br />
<br />
==Allgemeine Informationen==<br />
===Adunits (Zonierung)===<br />
Der Google Ad Manager benutzt zur Adressierung der Seiten Adunits, die sich wie folgt zusammensetzen können:<br />
*/netzwerkId/level1<br />
*/netzwerkId/level1/seitentyp<br />
*/netzwerkId/level1/level2/seitentyp<br />
*/netzwerkId/level1/level2/level3/seitentyp<br />
*usw.<br />
<br />
====Begriffserklärung====<br />
;netzwerkId:Hier ist immer die Netzwerk ID der iq digital einzugeben: 183<br />
;level1:Dies ist die Bezeichnung der App im Google Ad Manager und wird von der iq digital vorgegeben. Die Bezeichnung besteht aus <appname>_app_<plattform>_<gerätetyp>.<br />
:;appname:Der Name der App<br />
:;plattform:Das Betriebsystem, also ''ios'' oder ''android''<br />
:;gerätetyp:Der Gerätetyp, also '''phone''' oder ''tablet''<br />
;level2:Dies ist die Bezeichnung einer Rubrik der App, z.B. ''politik''<br />
;level3 (usw.):Dies ist die Bezeichnung für eine Unterrubrik, z.B. im Falle von ''politik'' als level2 wäre ''ausland'' eine Unterrubrik für level3. Level4 und höher sind weitere tiefere Verzweigungen der App, diese werden im Normalfall nicht also Adunits angelegt und solche Seiten würden unter dem level3 angelegt werden.<br />
;seitentyp:In Apps mit Banner-Anzeigen (z.B. News Apps) bezeichnet ''seitentyp'' die unterschiedlichen Seitentypen, also ob es sich z.B. um eine Übersichts-, Artikel- oder Bildergalerieseite handelt. Übliche Werte dafür sind ''homepage'', ''index'', ''artikel'', ''bildgal''. In Apps mit Fullscreen-Anzeigen (z.B. epaper oder Zeitungs Apps) werden mit ''seitentyp'' die unterschiedlichen Anzeigeplätze innerhalb der Rubrik gemeint, also ob es sich z.B. erste, zweite oder dritte Swipe Anzeige handelt. Übliche Werte sind ''openingpage'', ''swipe_1'', ''swipe_2'', ''swipe_3'' usw.<br />
<br />
====Beispiel für die fiktive Rheinischer Kurier News App mit Banner-Anzeigen:====<br />
*/183/Rheinischer_Kurier_app_ios_phone<br />
*/183/Rheinischer_Kurier_app_ios_phone /homepage<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/index<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/artikel<br />
*/183/Rheinischer_Kurier_app_ios_phone/politik/bildgal<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/index<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/artikel<br />
*/183/Rheinischer_Kurier_app_ios_phone/sport/bildgal<br />
<br />
====Beispiel für die fiktive Rheinischer Kurier Epaper iPad App mit Fullscreen-Anzeigen:====<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/preloading_ad<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/openingpage<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_1<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_2<br />
*/183/Rheinischer_Kurier_epaper_app_ios_tablet/politik/swipe_3<br />
<br />
{{Warnung|text=Der Adserver DFP erlaubt keine Sonderzeichen in den Adunits mit Ausnahme des Unterstrichs "_". Auch Umlaute und ß sind nicht erlaubt. level2, level3 und seitentyp sollten auch komplett kleingeschrieben werden.<br />
Generell sind die Adunits vom Google Ad Manager so gedacht, dass sie sich dynamisch aus dem CMS des Mandanten generieren lassen. Sollte das CMS so angelegt sein, dass eine andere Benennung sinnvoll erscheint, muss die iq digital frühzeitig kontaktiert werden, damit eine sinnvolle Lösung für alle Beteiligten gefunden werden kann.<br />
Bei Rubriken mit einem "und" bzw. einem "&" im Namen, wie z.B. Wirtschaft & Politik, bietet es sich an, nur die Hauptwörter getrennt mit einem Unterstrich aufzuführen, also wirtschaft_politik.}}<br />
<br />
===Creative Sizes===<br />
Im Google Ad Manager stehen die Creative Sizes für die Werbemittel-Größen. Dabei ist es möglich dass die tatsächlich ausgespielte Größe eines Werbemittels von der CreativeSize abweicht (in so einem Fall wird von Pseudogröße gesprochen). Die App muss für ein Adrequest der entsprechenden Platzierung alle zugehörigen Creative Sizes abfragen. Die oft lange Liste aus Größen ergibt sich aus den vielen möglichen unterschiedlichen Werbeformen und den unterschieden in direkter und programmatischer Vermarktung.<br />
<br />
Bei Fullscreen Ad und Preloading Ad Platzierungen werden meist Größen für Portrait- und Landscape-Modus gemeinsam abgefragt.<br />
<br />
====Beispiele für Creative Sizes einer Banner Platzierung:====<br />
99x1, 320x1, 320x50, 320x53, 320x80, 320x160, 320x320, 300x50, 300x75, 300x100, 300x150, 300x250<br />
(In diesem Beispiel sind 99x1 und 320x1 Pseudogrößen. 99x1 ruft eine Ausbuchung vom Adserver, die die Werbeplatzierung ausblenden lässt. 320x1 ist eine historische Pseudogröße, welche in seltenen Fällen für von der Norm abweichende Werbemittel auf der Platzierung iqadtile1 verwendet wird. Jede Banner-Platzierung hat eine vergleichbare Pseudogröße der Form 320xY mit Y als Platzierungsbezeichnung, z.B. 320x1, 320x3, 320x4, 320x8 etc.<br />
<br />
====Beispiele für Creative Sizes einer Fullscreen Platzierung auf einem Android Tablet:====<br />
310x480, 480x310, 750x1024, 1024x750<br />
<br />
====Links zu Creative Sizes im Google Mobile Ads SDK:====<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner#multiple_ad_sizes<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/banner#multiple_ad_sizes<br />
und<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner#custom_ad_sizes<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/banner#custom_ad_sizes<br />
<br />
===Keywords (Anhängen von Key-Value-Paaren)===<br />
Ein Adrequest bekommt als CustomTargeting immer eine Gruppe aus Key-Value Paaren. Dabei können mehrere Werte (Values) mit einem Komma separiert sein. <br />
Diese Keywords haben mehrere Funktionen:<br />
*bestimmte Buchungen liefern nur aus, wenn diese Keywords existieren (z.B. bei bestimmten Produkten oder auch bei Testschaltungen)<br />
*Buchungen können über solche Keywords von der Auslieferung ausgeschlossen werden (z.B. um fehlerhafte Darstellungen einer Werbebuchung zu verhindern)<br />
*solche Keywords erlauben detaillierte Auslieferungs-Berichte (Reports)<br />
<br />
Die iq digital benutzt dabei bestimmte Key-Value-Paare. Hier sind die wichtigsten Keys erklärt:<br />
;kw:Generelle Keyword Liste. Hier sind meist mehrere Werte mit Komma separiert. Üblich sind einige Legacy-Werte (z.B. digtransform,nospa,enozqi). Hinzu kommen Bezeichner für die App oder die Seite (z.B. Rheinischer_Kurier_app_ios_phone), sowie die Werbeplatzierungsbezeichnung (z.B. iqadtile3).<br />
;tile:Die Nummer der Werbeplatzierung. Im Falle eines iqadtile3 also als Wert 3.<br />
;doc:Die Bezeichnung des Seitentyps. Gültige Werte sind homepage, index, artikel, bildgal<br />
;iqadtype:Die Angabe der Plattform. Gültige Werte sind online, mew, app, amp<br />
;appver:Die Bezeichnung der Appversions-Nummer (s.u.)<br />
<br />
Angaben welche Keywords für welche Platzierung verwendet werden sollen, finden sich in der creative_sizes_and_keywords.xlsc Tabelle, die von der iq digital zu Projektstart zur Verfügung gestellt wird.<br />
<br />
====Links zum CustomTargeting im Google Mobile Ads SDK====<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/ios/targeting#custom_targeting<br />
*https://developers.google.com/ad-manager/mobile-ads-sdk/android/targeting#custom_targeting<br />
<br />
===Debugging===<br />
[[Datei:Easteregg dialog.png|300px|thumbnail|Beispiel aus einer Android App mit Textfeld für Keywords und Checkbox für USB Debugging]]<br />
Es muss eine "Easter-Egg"-Funktion in die App eingebaut werden, damit die iq digital Probleme und neue Werbeformen innerhalb der Live App (Version aus dem App- bzw. Playstore) testen kann. Der Adserver DFP bietet die Möglichkeiten Testschaltungen über ein Keyword in der App auszuspielen. <br />
<br />
In einem selten frequentierten Bereich der App, wie z.B. dem Impressum, sollte es daher die Möglichkeit für Eingeweihte geben, einen kleinen Dialog aufzurufen. Durch diesen kann man ein selbst gewähltes Keyword jedem zukünftigen Adrequest anhängen. Gleichzeitig oder durch das Aktivierung einer Checkbox kann der USB-Debug-Modus, um die Werbe Webviews in der Android App auf dem Desktop Chrome zu inspizieren, aktiviert werden. <br />
<pre><br />
WebView.setWebContentsDebuggingEnabled(true);<br />
</pre><br />
Danach kann man unter Android die Webviews der App im Desktop Chrome mit chrome://inspect einsehen. <br />
Dies ermöglicht Fehler in der Werbedarstellung besser zu analysieren.<br />
<br />
Ohne ein Debug Easter Egg in der App kann nach Livegang keine Testschaltung aufgesetzt werden und es können auch keine Probleme analysiert werden. Dies würde die Wartung der App von Seiten der iq digital verhindern und auch dem Mandanten keine Möglichkeit geben, selber seine App mit Testwerbung zu überprüfen.<br />
Die Keyword-Funktion dient daher, den Personenkreis einzuschränken, der die Testschaltungen zu Gesicht bekäme. <br />
<br />
Das Anhängen der Keywords ist beim Punkt [[#Anhängen von Key-Value-Paaren]] genauer erklärt.<br />
<br />
Mehrfache Keywords werden durch Kommata separiert.<br />
<br />
Es gibt vielfältige Optionen, wie das Easter-Egg aktiviert werden kann. Mehrfache/unsinnige Taps auf UI-Elemente oder eine ganz spezielle Eingabe ins Suchfeld seien hier beispielhaft genannt. Die iq digital erlaubt sich aber die Vorgabe, dass unter Android und iOS das Debug-Easter-Egg identisch aktiviert wird. Bei der Art der Aktivierung des Debug-Easter-Egg stehen wir gerne beratend zur Seite.<br />
<br />
===Wichtige Hinweise zu dieser Anleitung===<br />
Die Adunits für die Werbeplatzierungen werden von uns erst zu Projektstart erstellt und mit Testwerbung belegt. Anschließend werden die Adunits an den Mandanten übermittelt.<br />
Bitte nicht mit der im SDK fest eingebauten Logik für Test-Werbemittel arbeiten. Diese entspricht nicht der Art und Weise wie die von der iq digital vermarktete Werbung funktioniert und führt zu Missverständnissen.<br />
Stattdessen sind auf den Adunits permanent Buchungen mit Test-Werbemitteln aktiv welche über ein spezielles Test-Keyword im Adrequest vom Adserver ausgeliefert werden.<br />
<br />
===Ansprechpartner iq digital===<br />
Die iq digital steht für Fragen und Kommentare gerne zur Verfügung. Sollten wir einmal nicht weiterhelfen können, ist es uns möglich einen Entwickler von Google als Ansprechpartner in die Diskussion mit einzubeziehen.<br />
<br />
====Tim Lohmann (Mobile Developer Ad Technology)====<br />
;Telefon:+49 211 887 2336<br />
;E-Mail:tim.lohmann@iqdigital.de<br />
<br />
===Wichtige Dokumente===<br />
====Liste der Creative Sizes und Keywords für jede Platzierung:====<br />
*<datum>_dfp_creative_sizes.xlsx<br />
====Liste der Adunits:====<br />
(diese dienen nur als Orientierungshilfe. Die Apps sollten diese Zonen dynamisch aus dem CMS generieren)<br />
<appname> muss durch den entsprechenden App Namen ersetzt werden.<br />
*<datum>_adunits_<appname>_android_tablet.txt<br />
*<datum>_adunits_<appname>_ios_tablet.txt<br />
*<datum>_adunits_<appname>_ android_phone.txt<br />
*<datum>_adunits_<appname>_ios_phone.txt<br />
<br />
<br />
<br />
<br />
==Preloading Ad==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist eine Display ausfüllende Anzeige, die während des Ladescreen (Splashscreen) der App angezeigt wird. Sie wird für 5s angezeigt und schließt dann automatisch. In einer Ecke wird ein Close-Button angezeigt, um vorzeitig zum Inhalt der App zu gelangen.<br />
<br />
[[Datei:Preloading Ad 1.png|x300px]]<br />
[[Datei:Preloading Ad 2.png|300px]]<br />
|position=<br />
Die Platzierung legt sich wie ein Overlay über den Splash-Screen der App. Im Hintergrund kann die App den Content laden.<br />
|template=<br />
*skaliert Werbemittel bei Beibehaltung des Seitenverhältnisses entsprechend der Abmaße des Werbecontainers<br />
*schließt das Werbemittel nach 5s<br />
*positioniert und zentriert das Werbemittel<br />
*zeigt in einer Ecke einen Close-Button an, mit dem der Nutzer jederzeit zum Content zurückkehren kann.<br />
*bei Orientationchange- oder Resize-Event: skaliert die Werbemittel enstprechend der neuen Maße. Dies kann mehrere hundert Millisekunden dauern, bis alle neuen Maße feststehen und vom Webviewbrowser zur Verfügung gestellt werden.<br />
Durch die Skalierung können je nach Display am Rand schwarze oder weiße Balken entstehen. Dies passiert immer dann, wenn das Display ein anderes Seitenverhältnis als die Werbemittel hat.<br />
|app=<br />
*sendet das Adrequest während des Splash-Screens<br />
*im Falle einer Buchung: <br />
**erzeugt das Interstitial mit Hilfe des GMA SDKs<br />
**vergößert den Werbecontainers auf Display-Größe<br />
*bei Orientationchange- oder Resize-Event: passt die Werbeseite und den Werbecontainer an die neuen Display-Maße an<br />
*bereitet im Hintergrund weiter den Content vor<br />
*im Falle '''keiner''' Buchung: wird normal der Content geladen<br />
|workflowad=<br />
#App wird vom Nutzer gestartet<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt das Interstitial<br />
#Werbetemplate skaliert Werbemittel in dem Container<br />
#nach 5s schließt sich das Ad automatisch und der Content dahinter wird sichtbar<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet, dass er keine Werbebuchung hat<br />
#App lädt ganz normal den Content<br />
|creativesizes=<br />
;Smartphone:320x480 bzw. 480x320<br />
;Tablet:768x1024 bzw. 1024x768<br />(bei Android auch zusätzlich: 320x480 bzw. 480x320)<br />
{{Warnung|text=Die Creativesizes sind Pseudogrößen, sie entsprechen nicht den tatsächlichen Abmaßen des Werbemittels.}}<br />
|keywords=<br />
;kw:iqadtilePre<br />
;tile:0<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/interstitial<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/interstitial<br />
}}<br />
<br />
==Fullscreen Anzeigen (auch Swipe Anzeigen oder Swipe-Ads genannt)==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist eine Display ausfüllende Anzeigen, die zwischen zwei regulären Content-Seiten in der App angezeigt wird. Sie lässt sich horizontal wie die übrigen Content-Seiten swipen und wird von keinen Teilen der App (wie App-Header oder -Footer) überlagert. Sollte der Nutzer ein Orientationchange-Event erzeugen, passt sich die Anzeige dem neuen Seitenverhältnis an.<br />
<br />
[[Datei:Fullscreen Ad 1.png|x300px]]<br />
[[Datei:Fullscreen Ad 2.png|300px]]<br />
|position=<br />
Die Platzierung ist dynamisch zwischen zwei Content-Seiten eingebettet. Dabei befindet sich die Werbeplatzierung immer rechts neben der Seite, die Ihr im Content zugeordnet ist, z.B. Politik/swipe_1 meint, dass zuerst die 1. Politik-Content-Seite angezeigt wird und beim nächsten Swipe die Werbe-Seite erscheint <br />
|template=<br />
*skaliert Werbemittel bei Beibehaltung des Seitenverhältnisses entsprechend der Abmaße des Werbecontainers<br />
*positioniert und zentriert das Werbemittel<br />
*bei Orientationchange- oder Resize-Event: skaliert die Werbemittel enstprechend der neuen Maße. Dies kann mehrere hundert Millisekunden dauern, bis alle neuen Maße feststehen und vom Webviewbrowser zur Verfügung gestellt werden.<br />
Durch die Skalierung können je nach Display am Rand schwarze oder weiße Balken entstehen. Dies passiert immer dann, wenn das Display ein anderes Seitenverhältnis als die Werbemittel hat.<br />
|app=<br />
*sendet das Adrequest 1-2 Content-Seiten vor der Platzierung ab, damit der Adserver Zeit genug hat, die Werbung zu liefern<br />
*erzeugt dynamisch eine Werbeseite im Seitenfluss rechts neben der zugeordneten Content-Seite<br />
*im Falle einer Buchung: vergößert den Werbecontainers auf Display-Größe<br />
*blendet App-Header und -Footer aus (falls erforderlich)<br />
*bei Orientationchange- oder Resize-Event: passt die Werbeseite und den Werbecontainer an die neuen Display-Maße an<br />
*im Falle '''keiner''' Buchung: entfernt die Werbeseite aus dem Seitenfluss<br />
|workflowad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt dynamisch die Werbeseite<br />
#Werbecontainer wird auf die Display-Abmaße aufgezogen<br />
#Werbetemplate skaliert Werbemittel in dem Container<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet, dass er keine Werbebuchung hat<br />
#App erzeugt '''keine''' Werbeseite bzw. entfernt eine zuvor erzeugte Werbeseite aus dem Seitenfluss<br />
|creativesizes=<br />
;Smartphone:310x480 bzw. 480x310<br />
;Tablet:750x1024 bzw. 1024x750<br />(bei Android auch zusätzlich: 310x480 bzw. 480x310)<br />
{{Warnung|text=Die Creativesizes sind Pseudogrößen, sie entsprechen nicht den tatsächlichen Abmaßen des Werbemittels.}}<br />
|keywords=<br />
;kw:iqadtileFull<br />
;tile:1<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
}}<br />
<br />
==Banner-Anzeigen==<br />
{{SDKAppInfo<br />
|info=<br />
Die Werbeplatzierung ist ein Banner innerhalb einer Content-Seite. Je nach Werbeform kann diese Anzeige mehr oder weniger Interaktivität für den Endnutzer besitzen. Sie kann anmiert oder eine komplexe HTML-Anzeige sein. Es ist auch möglich dass die Anzeige durch bestimmte Ereignisse sich in der Größe verändert.<br />
<br />
[[Datei:Mobile High Impact Ad.png|x300px]]<br />
|position=<br />
Die Platzierung ist zwischen Content-Elemente einer Seite platziert und erfordert eine Anzeigenkennzeichnung "Anzeige" oberhalb der Platzierung. Üblicherweise befinden sich mehrere Platzierungen innerhalb einer Seite.<br />
|template=<br />
*kümmert sich um die Funktionalität, welche je nach Werbeform simpel oder komplex sein kann.<br />
|app=<br />
*sendet die Adrequests für alle Platzierungen einer Seite<br />
*baut für jede Platzierung eine Anzeigenkennzeichnung "Anzeige" oberhalb der Platzierung ein<br />
*erstellt den Werbecontainer mit Größe, welche in der Antwort vom Andserver auf das Adrequest mitgeliefert wird<br />
*lauscht mit dem EventListener auf mögliche setsize- oder noad-Events und verändert den Werbecontainer entsprechend.<br />
*im Falle einer Ausbuchung:<br />
**empfängt sie ein setsize-Event muss sie die Werbeplatzierung und den Werbecontainer an die neue Größe anpassen, sofern sich diese von der aktuellen Größe unterscheidet<br />
**empfängt sie ein noad-Event, muss sie die Werbeplatzierung und die zugehörige Anzeigenkennzeichnung komplett entfernen bzw. ausblenden<br />
|workflowad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Werbebuchung<br />
#App erzeugt Werbecontainer mit der Größe, die in der Response des Adservers enthalten ist<br />
#eventuell muss der Werbecontainer auf Grund eines setsize-Events angepasst werden<br />
|workflownoad=<br />
#App sendet Adrequest an Adserver<br />
#Adserver antwortet mit Ausbuchung als Werbebuchung<br />
#App empfängt eine Response mit der Größe 99x1 und erhält kurze Zeit später ein noad-Event<br />
#App blendet Werbeplatzierung und Anzeigenkennzeichnung bis zum nächsten Pagerequest aus<br />
|creativesizes=<br />
320x50, 320x53, 320x80, 320x106, 320x160, 320x320, 320x416, 320x460, 300x50, 300x75, 300x100, 300x150, 300x200, 300x250, 300x600<br />
Weitere Größen sind möglich. Je nach Platzierung wird nur ein Auszug der Größenliste im Adrequest verwendet. Eine genaue Zuordnung erfolgt in einem separaten Dokument.<br />
|keywords=<br />
;kw:nospa, enozqi, digtransform, iqadtileX*<br />
;tile:X*<br />
X entspricht dabei der Nummer der Platzierung, z.B. iqadtile1, iqadtile3, iqadtile4, iqadtile99, iqadtile8<br />
|links=<br />
;iOS:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
;Android:https://developers.google.com/ad-manager/mobile-ads-sdk/ios/banner<br />
}}<br />
<br />
==Dokumentation der iq digital App Events==<br />
Die App Events bestehen aus dem Namen und einem "data"-String<br />
<br />
===setsize – Event===<br />
Das setsize-Event wird von den Werbetemplates der iq digital aufgerufen, um die Größe des Adviews der Werbeplatzierung zu verändern.<br />
Der "data"-String hat das Format '''"width:height"''' für eine sofortige Änderung der Größe.<br />
<br />
=====Parameter=====<br />
Die Parameter werden mit einem Doppelpunkt von einander getrennt.<br />
;width:Die neue Breite des Adviews in Pixel (Device-Independent-Pixel) als ganze Zahl.<br />
;height:Die neue Höhe des Adviews in Pixel (Device-Independent-Pixel) als ganze Zahl.<br />
{{Warnung|text=Ausnahme: Für eine Anpassung auf die maximal verfügbare Breite oder Höhe wird der Wert '''max''' verwendet.}}<br />
<br />
Beispielaufrufe:<br />
;<nowiki>"setsize","320:80"</nowiki>:Adview bekommt die neue Größe 320x80 Pixel<br />
;<nowiki>"setsize","320:240"</nowiki>:Adview bekommt die neue Größe 320x240 Pixel<br />
;<nowiki>"setsize","max:160"</nowiki>:Adview wird auf die maximal verfügbare Breite und eine Höhe von 160 Pixel angepasst<br />
;<nowiki>"setsize","max:max"</nowiki>:Adview wird auf die maximal verfügbare Breite und die maximal verfügbare Höhe angepasst<br />
<br />
===noad – Event===<br />
Das noad-Event wird von den Werbetemplates der iq digital aufgerufen, um der App zu signalisieren, dass für die Platzierung keine Buchung vorliegt und die App die Werbeplatzierung '''und die zugehörige Anzeigenkennzeichnung''' entfernen soll.<br />
<br />
Der "data"-String hat für dieses Event keine Bedeutung und kann ignoriert werden.<br />
<br />
[[Kategorie:Ad Technology]][[Kategorie:APP]]<br />
[[en:Integration of the Google Mobile Ads SDK]]</div>Efeigegernoth