Hoe at.js flikkering beheert
Informatie over hoe de JavaScript-bibliotheek Adobe Target at.js flikkering voorkomt tijdens het laden van de pagina of de toepassing.
Er wordt geflikkerd als de standaardinhoud tijdelijk aan bezoekers wordt weergegeven voordat deze wordt vervangen door de inhoud van de activiteit. flikkering is ongewenst, omdat dit verwarrend kan zijn voor bezoekers.
Een automatisch gemaakte globale mbox gebruiken
Als u toelaat creeer Auto Globale Mbox plaatsend wanneer het vormen bij.js, beheert at.js flikkering door het opaciteitplaatsen te veranderen aangezien de pagina laadt. Wanneer at.js wordt geladen, wordt de dekkingsinstelling van het element <body> gewijzigd in “0”, waardoor de pagina aanvankelijk onzichtbaar wordt voor bezoekers. Nadat een reactie van Target is ontvangen—of als een fout met de Target request is gedetecteerd—herstelt at.js de dekking naar “1”. Zo weet u zeker dat de bezoeker de pagina alleen ziet nadat de inhoud van uw activiteiten is toegepast.
Als u de instelling inschakelt tijdens het configureren van at.js, stelt at.js de dekking van de HTML BODY-stijl in op 0. Nadat een reactie van Target is ontvangen, stelt at.js de dekking van de HTML-LICHAAM opnieuw in op 1.
Dekking ingesteld op 0 houdt de pagina-inhoud verborgen om flikkering te voorkomen, maar de browser geeft de pagina nog steeds weer en laadt alle benodigde elementen, zoals CSS, afbeeldingen, enz.
Als opacity: 0 niet werkt in uw implementatie, kunt u flikkering ook beheren door bodyHiddenStyle aan te passen en deze in te stellen op body {visibility:hidden !important} . U kunt body {opacity:0 !important} of body {visibility:hidden !important} gebruiken, afhankelijk van wat het beste werkt voor uw specifieke omstandigheid.
De volgende illustratie toont het Lichaam van de Huid en toont de vraag van het Lichaam in zowel at.js 1.x en at.js 2.x.
at.js 2.x
(Klik op de afbeelding om deze uit te breiden naar de volledige breedte.)
at.js 1.x
(Klik op de afbeelding om deze uit te breiden naar de volledige breedte.)
Voor meer informatie over de bodyHiddenStyle opheffing, zie targetGlobalSettings () .
flikkering beheren bij asynchroon laden bij .js
Het asynchroon laden van at.js is een goede manier om te voorkomen dat de browser de rendering blokkeert. deze techniek kan echter tot flikkering op de webpagina leiden .
U kunt flikkering voorkomen door een vooraf verborgen fragment te gebruiken dat zichtbaar zal zijn nadat de relevante HTML-elementen door Target zijn gepersonaliseerd.
at.js kan asynchroon worden geladen, rechtstreeks ingesloten op de pagina of via een tagbeheer (bijvoorbeeld Adobe Experience Platform Launch).
Als at.js op de pagina is ingesloten, moet het fragment worden toegevoegd voordat u at.js laadt. Als u at.js laadt via een tagmanager die ook asynchroon wordt geladen, moet u het fragment toevoegen voordat u het tagbeheer laadt. Als de tagmanager synchroon wordt geladen, kan het script vóór at.js worden opgenomen in de tagmanager.
Het vooraf verborgen codefragment ziet er als volgt uit:
;(function(win, doc, style, timeout) {
var STYLE_ID = 'at-body-style';
function getParent() {
return doc.getElementsByTagName('head')[0];
}
function addStyle(parent, id, def) {
if (!parent) {
return;
}
var style = doc.createElement('style');
style.id = id;
style.innerHTML = def;
parent.appendChild(style);
}
function removeStyle(parent, id) {
if (!parent) {
return;
}
var style = doc.getElementById(id);
if (!style) {
return;
}
parent.removeChild(style);
}
addStyle(getParent(), STYLE_ID, style);
setTimeout(function() {
removeStyle(getParent(), STYLE_ID);
}, timeout);
}(window, document, "body {opacity: 0 !important}", 3000));
Standaard wordt in het fragment de hele HTML-instantie vooraf verborgen. In sommige gevallen wilt u wellicht alleen bepaalde HTML-elementen vooraf verbergen en niet de hele pagina. U kunt dit bereiken door de stijlparameter aan te passen. Het kan worden vervangen door iets dat slechts bepaalde gebieden van de pagina vooraf verbergt.
U hebt bijvoorbeeld twee gebieden die worden aangeduid met ID’s container-1 en container-2, en de stijl kan vervolgens worden vervangen door:
#container-1, #container-2 {opacity: 0 !important}
In plaats van de standaardinstelling:
body {opacity: 0 !important}
Flicker beheren in at.js 2.x voor triggerView()
Wanneer het gebruiken van triggerView() om gerichte inhoud in uw SPA te tonen, wordt het flikkerbeheer verstrekt uit de doos. Dit betekent dat vooraf verborgen logica niet handmatig hoeft te worden toegevoegd. In plaats daarvan verbergt at at.js 2.x de locatie waar de weergave moet worden weergegeven voordat de doelinhoud wordt toegepast.
Flicker beheren met getOffer() en applyOffer()
Omdat zowel getOffer() als applyOffer() API’s van laag niveau zijn, is er geen ingebouwde flikkerbesturing. U kunt een kiezer of HTML-element als een optie doorgeven aan applyOffer() , in dit geval voegt applyOffer() de activity-inhoud toe aan dit specifieke element. u moet er echter voor zorgen dat het element correct vooraf is verborgen voordat u getOffer() en applyOffer() aanroept.
document.documentElement.style.opacity = "0";
adobe.target.getOffer({
mbox: 'target-global-mbox',
success: function(offer) {
adobe.target.applyOffer({
mbox: 'target-global-mbox',
offer: offer
});
document.documentElement.style.opacity = "1";
},
error: function() {
document.documentElement.style.opacity = "1";
}
});
Een regionale box met mboxCreate() gebruiken in at.js 1.x (niet ondersteund in at.js 2.x)
Als u een regionale mbox-implementatie gebruikt, kunt u mboxCreate() gebruiken met een pagina die ongeveer overeenkomt met de volgende voorbeeldcode:
<div class="mboxDefault">
Some default content
</div>
<script>
mboxCreate('some-mbox');
</script>
Als uw pagina’s correct zijn ingericht, beheert at.js flikkering door de CSS "zicht"bezit van het element met de mboxDefault klasse geschikt te schakelen.