Billboard with reminder - Revision history

Tlohmann at 07:15, 30 March 2022

2022-03-30T07:15:01Z

← Older revision		Revision as of 09:15, 30 March 2022
Line 79:		Line 79:

	\|pagenameDE=Billboard mit Reminder		\|pagenameDE=Billboard mit Reminder
			<includeonly>\|wirdReferenziert=true</includeonly>
	}}		}}

Tlohmann at 13:50, 10 June 2020

2020-06-10T13:50:29Z

← Older revision		Revision as of 15:50, 10 June 2020
Line 1:		Line 1:
	{{TechSpecsOnline		{{TechSpecsOnline
	\|galerie=~~[[File:Billboard_reminder~~.png\|~~300px]]~~		\|galerie=
			<gallery mode="packed" heights="200px">
			Online_Billboard_mit_reminder1.png\|1. Initial state
			Online_Billboard_mit_reminder2.png\|2. During scrolling, the billboard remains sticky for 5s at the top of the screen
			Online_Billboard_mit_reminder3.png\|3. After 5s it turns into a sticky reminder bar
			Online_Billboard_mit_reminder4.png\|4. After expansion, the billboard + reminder bar are visible and sticky
			</gallery>
	\|beschreibung=The billboard is always visible in its full dimensions for 5 seconds, also during scrolling. It then collapses into a sticky reminder bar that can be expanded to full billboard size once again at any time.		\|beschreibung=The billboard is always visible in its full dimensions for 5 seconds, also during scrolling. It then collapses into a sticky reminder bar that can be expanded to full billboard size once again at any time.
	\|3rdParty={{3rdParty\|erlaubt=nein}}		\|3rdParty={{3rdParty\|erlaubt=nein}}

Tlohmann at 05:54, 3 June 2020

2020-06-03T05:54:09Z

← Older revision		Revision as of 07:54, 3 June 2020
Line 72:		Line 72:
	}}		}}

			\|pagenameDE=Billboard mit Reminder
	}}		}}

Tlohmann at 06:31, 2 June 2020

2020-06-02T06:31:21Z

← Older revision		Revision as of 08:31, 2 June 2020
Line 1:		Line 1:
	{{TechSpecsOnline		{{TechSpecsOnline
	\|galerie=[[File:Billboard_reminder.png\|300px]]		\|galerie=[[File:Billboard_reminder.png\|300px]]
	\|beschreibung=~~Das Billboard ist für~~ 5 ~~Sek. Immer in voller Größe sichtbar~~, ~~auch beim Scrollen~~. ~~Danach zieht es sich zu einer Sticky-Reminder-Leiste zusammen, die jederzeit wieder zu voller Billboard-Größe expandiert werden kann~~.		\|beschreibung=The billboard is always visible in its full dimensions for 5 seconds, also during scrolling. It then collapses into a sticky reminder bar that can be expanded to full billboard size once again at any time.
	\|3rdParty={{3rdParty\|erlaubt=nein}}		\|3rdParty={{3rdParty\|erlaubt=nein}}
	\|technischeDaten={{AnlieferungKombination		\|technischeDaten={{AnlieferungKombination
Line 13:		Line 13:
	}}		}}
	\|besondereInformation=		\|besondereInformation=
	{{Baustein\|titel=~~Interaktion~~\|text=~~Scroll-Event des Users fixiert das Billboard sichtbar für~~ 5 ~~Sek~~. ~~am oberen Viewport des Browsers. Nach Ablauf der Zeit kollabiert das Billboard zu einer weniger hohen Reminder-Leiste~~, ~~die ebenfalls fixiert am oberen Viewport des Browsers verbleibt~~. ~~Durch Klick kann dieser erneut auf das initiale Format geöffnet werden~~ (~~die Reminder-Leiste bleibt dauerhaft unterhalb am Billboard angedockt~~). ~~Durch Klick auf Schließen-Buttons wird das Fixierung bzw.~~ stickiness ~~aufgelöst und das Billboard mit itialem Format im originären Werbeplatz zurückgesetzt und verbleibt dort~~. ~~Die Features zur Steuerung werden von~~ iq digital ~~umgesetzt - siehe nachfolgende Anforderung zur Umsetzung Creation~~ .		{{Baustein\|titel=Interaction\|text=A scroll event of the user fixes the billboard visibly for 5 seconds in the upper viewport of the browser. After this time, the billboard collapses into a narrower reminder bar that also remains in a fixed position in the upper viewport of the browser. It can be opened once again in the initial format by user click (the reminder bar remains permanently in place in the area below the billboard). Clicking on Close buttons releases the fixed position or stickiness and resets the billboard with initial format in the original advertising space, where it then remains. The features to control this functionality are implemented by iq digital. See the requirement below for implementation of the creation.
	}}		}}
	{{Baustein\|titel=Feature~~-Steuerung~~\|text=		{{Baustein\|titel=Feature control\|text=If the ad is supplied as an HTML5 zip file, the functions and elements for '''click interaction''' must be implemented by the creative agency in line with the above interaction rules. As the HTML5 project is implemented within a cross-domain iFrame in the advertising space, coordinated '''commands''' are necessary for messaging with the ad template of iq digital..
	~~Bei Anlieferung des Werbemittels als~~ HTML5~~-Zip-File müssen die Funktionen und Elemente für~~ '''~~Klick-Interaktion~~''' ~~nach obigen Interaktions-Regeln durch die Creative-Agentur umgesetzt werden~~. ~~Da das~~ HTML5-~~Project innerhalb eines Cross-Domain-iFrames~~ in ~~den Werbeplatz implementiert wird~~, ~~sind abgestimmte~~ '''~~Commands~~''' ~~für das Messaging mit dem Anzeigen-Template von~~ iq digital ~~erforderlich~~.
	<br/><br/>		<br/><br/>
	'''This code has to be included in your ad on top level window "once":'''		'''This code has to be included in your ad on top level window "once":'''

Tlohmann: Created page with "{{TechSpecsOnline |galerie=300px |beschreibung=Das Billboard ist für 5 Sek. Immer in voller Größe sichtbar, auch beim Scrollen. Danach zieht..."

2020-05-19T13:42:01Z

Created page with "{{TechSpecsOnline |galerie=300px |beschreibung=Das Billboard ist für 5 Sek. Immer in voller Größe sichtbar, auch beim Scrollen. Danach zieht..."

New page

{{TechSpecsOnline
|galerie=[[File:Billboard_reminder.png|300px]]
|beschreibung=Das Billboard ist für 5 Sek. Immer in voller Größe sichtbar, auch beim Scrollen. Danach zieht es sich zu einer Sticky-Reminder-Leiste zusammen, die jederzeit wieder zu voller Billboard-Größe expandiert werden kann.
|3rdParty={{3rdParty|erlaubt=nein}}
|technischeDaten={{AnlieferungKombination
|typ=vertikal
|zeichen=AND
|bezeichnung1=Billboard
|text1=
|teil1={{AnlieferungKombination|zeichen=|teil1={{Anlieferungselement|abmessung={{Abmessung|w=970|h=250}}|format=jpg, png, gif, html5|gewicht={{Gewicht Online Standard}}}}}}
|bezeichnung2=Reminder
|teil2={{AnlieferungKombination|zeichen=|teil1={{Anlieferungselement|abmessung={{Abmessung|w=970|h=60}}|format=jpg, png, gif, html5|gewicht={{Gewicht Online Standard}}}}}}
}}
|besondereInformation=
{{Baustein|titel=Interaktion|text=Scroll-Event des Users fixiert das Billboard sichtbar für 5 Sek. am oberen Viewport des Browsers. Nach Ablauf der Zeit kollabiert das Billboard zu einer weniger hohen Reminder-Leiste, die ebenfalls fixiert am oberen Viewport des Browsers verbleibt. Durch Klick kann dieser erneut auf das initiale Format geöffnet werden (die Reminder-Leiste bleibt dauerhaft unterhalb am Billboard angedockt). Durch Klick auf Schließen-Buttons wird das Fixierung bzw. stickiness aufgelöst und das Billboard mit itialem Format im originären Werbeplatz zurückgesetzt und verbleibt dort. Die Features zur Steuerung werden von iq digital umgesetzt - siehe nachfolgende Anforderung zur Umsetzung Creation .
}}
{{Baustein|titel=Feature-Steuerung|text=
Bei Anlieferung des Werbemittels als HTML5-Zip-File müssen die Funktionen und Elemente für '''Klick-Interaktion''' nach obigen Interaktions-Regeln durch die Creative-Agentur umgesetzt werden. Da das HTML5-Project innerhalb eines Cross-Domain-iFrames in den Werbeplatz implementiert wird, sind abgestimmte '''Commands''' für das Messaging mit dem Anzeigen-Template von iq digital erforderlich.
<br/><br/>
'''This code has to be included in your ad on top level window "once":'''
<syntaxhighlight lang="html" line="line">
<script type="text/javascript">
try {
var iqdNS={};
iqdNS.addEvent=function(d,c,b){
if(typeof d.addEventListener!=="undefined"){
d.addEventListener(c,b,false);
} else if(typeof d.attachEvent!=="undefined"){
d.attachEvent("on"+c,b);
} else if(typeof d["on"+c]!=="undefined"){
var a=d["on"+c];d["on"+c]=function(f){a(f);b(f);
}
};
iqdNS.postOrigin=(function(){
var a=window.location.href.toLowerCase();
return a.split("iqdurl=")[1].split('&')[0]
})();
iqdNS.creativeID=(function(){
var a=window.location.href.toLowerCase();
return a.split("iqdcid=")[1].split('&')[0]
})();
iqdNS.getElm=function(o){
return(typeof o==="string")?document.getElementById(o):o;
};
}catch(e){}
</script>
</syntaxhighlight>
'''Implement on the same level this "Listener", which will be notified by the iq template and carries out an action:'''
<syntaxhighlight lang="html" line="line" highlight="14-15">
<script type="text/javascript">
try {
iqdNS.initAnimation=function(b){
var a;
if(b.origin===iqdNS.postOrigin){
a=JSON.parse(b.data);
if(a.info==="startAnimation"+iqdNS.creativeID){
iqdNS.animationCallback(a.command)
}
}
};
iqdNS.animationCallback = function(command){
switch (command){
case "[iq-command]":
// Please add your own function callback to start your animation
break;
}
};
iqdNS.addEvent(window,'message',iqdNS.initAnimation);
} catch(e){}
</script>
</syntaxhighlight>
{{ReminderSteuerungBaustein}}
}}

}}