Ändringar

Information om Modifications sida in Adobe Target som gör att du kan visa ändringar på sidan och lägga till ytterligare ändringar (CSS-väljare, Mbox och anpassad kod).

The Modifications visas alla ändringar som har gjorts på sidan i Visual Experience Composer (VEC) och där kan du göra ytterligare ändringar genom att klicka på varje element på sidan och välja en åtgärd. Varje ändring du gör visas som en separat åtgärd eller ett separat element i Modifications lista. Du kan också lägga till ändringar, bland annat följande ändringstyper: CSS-väljare, Mbox. och anpassad kod.

Översikt över ändringar

The Modifications visas alla ändringar som har gjorts på sidan i VEC. Varje ändring du gör visas som en separat åtgärd eller ett separat element i Modifications lista.

codeeditor_page_mods, bild

Använd sidan Modifications (Ändringar) för att göra små ändringar i väljaren som Target väljer när du använder VEC för att konfigurera hur innehåll levereras. Du kan ändra antingen innehållet eller ett HTML-attribut. Du kan också redigera koden och skapa motsvarigheten till ett HTML-erbjudande i en mbox.

Använd sidan Ändringar för att:

  • Visa en åtgärd som har utförts i den visuella dispositionen.

    codeeditor_viewÄndra bild

  • Redigera en befintlig åtgärd. Håll pekaren över den önskade ändringen och klicka sedan på Edit ikon.

    codeeditor_edit image

    Gör ändringarna.

    codeeditor_changeChange1 image

  • Ta bort en befintlig åtgärd. Håll pekaren över den önskade ändringen och klicka sedan på Delete ikon.

    codeditor_delete image

  • Lägg till en ny ändring. Klicka Add Modification eller ikonen + anger du ändringarna enligt nedan.

    codeeditor_new image

    Observera att när en ändring har skapats visas en ±ikon längst upp på panelen Ändringar i stället för knappen Lägg till ändring längst ned på panelen.

  • Docka ändringspanelen lodrätt längs sidan av målgränssnittet eller vågrätt längst ned. Klicka på Dock för att växla mellan de två inställningarna.

    codeditor_dock, bild

    I följande bild visas panelen Ändringar som är dockad längst ned på skärmen:

    codeeditor_dock_bottom image

Lägg till ändringar

  1. Visa Modifications för en vald upplevelse, i VEC, klicka på Modifications </>-ikon.

    codeeditor_icon_big image

    OBSERVERA

    Skapa eller redigera ett erbjudande från HTML om du vill öppna panelen Ändringar i den formulärbaserade Experience Composer. Mer information finns i Formulärbaserad Experience Composer.

    The Modifications sidan öppnas och skärmen delas mellan det visuella läget till vänster och panelen Ändringar till höger. Klicka på Dock -ikonen om du vill docka panelen Ändringar lodrätt längs sidan av målgränssnittet eller vågrätt längst ned. Observera att Experience A i följande bild inte har några tidigare ändringar.

    codeeditor_page image

    Experience B visar de tidigare ändringarna i Modifications till höger.

    codeeditor_page_mods, bild

  2. Så här lägger du till en ändring:

    • Om inga tidigare ändringar av upplevelsen har gjorts klickar du på Add Modification längst ned på Modifications till höger.
    • Om det finns tidigare ändringar för upplevelsen klickar du på ±ikonen högst upp i Modifications till höger.

    På panelen Ändringar visas:

    codeeditor_page_mods_add image

  3. Från Modifications Type väljer du typ:

    Ändringstyp Detaljer
    CSS-väljare I rutan CSS-elementväljare anger du önskat CSS-element som du vill ändra, väljer en åtgärdstyp ( Ange innehåll eller Ange attribut) och fyller sedan i den obligatoriska informationen och det önskade innehållet.
    Mbox Ange mbox-namnet och önskat innehåll.

    Anteckning: Mboxes stöds inte längre i VEC på sidor som använder at.js 2.x.

    Som tillfälliga lösningar:

    • Om at.js 2 används.x lägger du till en CSS-väljarändring i stället för en Mbox-ändring och lägger till innehållet i väljaren som din mbox använde.
    • Använd formulärbaserade aktiviteter (fungerar med mboxes och at.js 1.)x och at.js 2.x).
    • Använd at.js 1.x i VEC.
    Egen kod Ange ett valfritt namn, markera eller avmarkera Add Code in the <HEAD> Avsnitt markera kryssrutan efter behov och lägg sedan till din egen kod.

    Om du väljer Add Code in the <HEAD> Avsnittläggs egen kod till i <head> -avsnittet och dess körning väntar inte på body- eller page-load-händelser. Lägg endast till <script> och <style> -element. Lägger till <div> taggar och andra element kan orsaka resterande <head> element som ska visas i <body>. Om du använder at.js kommer alla erbjudanden att levereras asynkront.

    Om du avmarkerar Add Code in the <HEAD> Avsnitt, egen kod körs omedelbart efter <body> -tagg. Radbryt all kod i en enda <div> för att bevara DOM-strukturen. Om du använder at.js kommer alla erbjudanden att levereras asynkront.

    Om HTML för <BODY> innehåller <SCRIPT> och <DIV>sedan <DIV> läggs till i <BODY> och <SCRIPT> körs i <HEAD>. Dessutom <SCRIPT> som läser in en extern fil läggs till i <HEAD>.

    Anteckning: Skript körs asynkront. Det innebär att du inte kan använda document.write eller liknande skriptmetoder.

    Anpassad kod ger ett icke-visuellt gränssnitt för att visa, redigera och lägga till nya åtgärder i VEC, den formulärbaserade Experience Composer och HTML erbjuder redigerare. Panelen innehåller en kodvy med en upplevelse som hjälper dig att skapa mer komplexa upplevelser, finjustera befintliga upplevelser och felsöka problem.

    Anpassad kod är avsedd för avancerade användare som känner sig bekväma med HTML, JavaScript och CSS. I kodvyn kan du finjustera eller finjustera ändringar eller åtgärda väljarproblem. Den kan också användas för att lägga till ny anpassad kod och åtgärder. Du kan lägga till mer än en anpassad kod och eventuellt namnge varje anpassad kod.

    Anteckning: Anpassad kod är för närvarande endast tillgänglig för A/B- och Experience Targeting-aktiviteter (XT). Anpassad kod inaktiveras för övertäckning och om ett omdirigeringserbjudande används.

    Anpassad kod har stöd för följande användningsexempel:

    • Lägg till anpassad JavaScript, HTML eller CSS som ska köras högst upp på sidan
    • Visa eller redigera koden som genererats av VEC efter att ha gjort ändringar
    • Ange HTML-innehåll för en väljare (endast CSS-väljare)
    • Ange ett attribut för ett HTML-element
    • Lägg till erbjudandeinnehåll som ska levereras i en regional mbox
    • Växla på DOM-klar med jQuery
    • Växla på DOM-klar, ingen jquery (stöder inte Internet Explorer 8)
    • Växla med DOM-avsökning via plugin-programmet "elementOnLoad"
    • Anpassad omdirigering
    Anpassad kod ger:
    • Radnummer ger bättre användbarhet.
    • Syntaxmarkering hjälper dig att undvika felaktig syntax för erbjudanden från HTML.
    • Möjlighet att skapa flera anpassade koder och ange ett valfritt namn för var och en. Om du skapar flera anpassade koder blir det enklare att felsöka i framtiden. I stället för att skapa en enda anpassad kod för att utföra flera ändringar kan du skapa en separat anpassad kod för varje ändring med ett beskrivande namn. Om du har separata anpassade koder blir ändringarna mer modulära och hanterbara. Observera att det inte är säkert att flera anpassade koder körs i den sekvens i vilken de skapades.
    Panelen Ändringar delar upp skärmen mellan det visuella läget och kodläget. Båda lägena är synkroniserade. Alla ändringar som görs visuellt har en motsvarande rad i kodvyn. På samma sätt visas alla ändringar som implementeras i kodvyn i den visuella upplevelsen. Om du klickar på en rad i kodvyn markeras motsvarande element på den visuella sidan.

    Anpassad kod stöder HTML, skript och format. All giltig HTML-kod eller skript kan läggas till eller redigeras.

  4. Lägg till ytterligare ändringar efter behov.

Användningsexempel för anpassad kod

The Custom Code -panelen innehåller kod som körs i början av sidinläsningen.

Du kan köra JavaScript-koden i <head> -tagg. Kodkörningen väntar inte på <body> -tagg som ska finnas i DOM.

Väljare för efterföljande visuella åtgärder beror på vilka HTML-element som läggs till på den här fliken.

Panelen Egen kod används ofta för att lägga till JavaScript eller CSS högst upp på sidan.

codeeditor_custom image

Använd Custom Code till:

  • Använd intern JavaScript-kod eller länka till en extern JavaScript-fil

    Om du till exempel vill ändra ett elements färg:

    <script type="text/javascript">
document.getElementById("element_id").style.color = "blue";
</script>

  • Konfigurera en infogad formatmall eller länka till en extern formatmall

    Så här definierar du en klass för ett övertäckningselement:

    <style>
.overlay
{ position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; }
</style>

  • Lägga till HTML-fragment för att definiera nya element

    Använd till exempel följande HTML-utdrag för att skapa en övertäckning <div> med den CSS-klass som definieras ovan:

    <div class="overlay"></div>

  • Växla på DOM-klar med jQuery

    I följande exempel med JQuery förutsätts att det finns jQuery tillgängligt på kundens webbplats när Target verkställer erbjudandena.

    <style>#default_content {visibility:hidden;}</style>
<script>
jQuery( document ).ready(function() {
    jQuery("#default_content").html( "<span style='color:red'>Hello <strong>Again</strong></span>" );
    jQuery("#default_content").css("visibility","visible");
});
</script>

  • Växla på DOM-klar, ingen jQuery (stöder inte Internet Explorer 8)

    <style>#default_content {visibility:hidden;}</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById("default_content").innerHTML = "<span style='color:red'>Hello <strong>Again</strong></span>";
    document.getElementById("default_content").style.visibility="visible";
});
</script>

  • Anpassad omdirigering som skickar befintliga parametrar. s_tnt param (för äldre integrering med Analytics), referensparam och mbox-session

    <style type="text/css">body{display:none!important;}</style>
<script type="text/javascript">
 var qs='';window.location.search?qs=window.location.search+'&':qs='?';
 window.location.replace('//www.mywebsite.com/'+qs+'s_tnt=${campaign.id}:${campaign.recipe.id}:${campaign.recipe.trafficType}&s_tntref='+encodeURIComponent(document.referrer)+'&mboxSession='+mboxFactoryDefault.getSessionId().getId()+''+window.location.hash+'');
</script>

  • Lägg till Adobe Target Experience Templates för användning i anpassad kod. Target Experience Templates är förkodade exempel med konfigurerbara indata som används för att köra vanliga marknadsföringsfall. Dessa Experience Templates är kostnadsfria för utvecklare och marknadsförare som en startpunkt för vanliga användningsfall, antingen via VEC eller den formulärbaserade Experience Composer. Användningsexempel är ljusbord, karuseller, räkningar med mera.

    Mer information finns i Experience Templates.

Bästa praxis för anpassad kod

Radbryt alltid den anpassade koden i ett element.

Exempel:

<div id="custom-code">
// My Code goes here
</div>

Om några ändringar behövs gör du ändringarna i behållaren.

Om du inte behöver den anpassade koden längre lämnar du den här behållaren tom, men tar inte bort den. Detta säkerställer att andra upplevelseändringar inte påverkas.

Använd inte element-ID:t "CDQID" för ändringar av sidan som görs i kodredigeraren.

Målet använder ett nytt element-ID med värdet "CDQID" för alla element på sidan som ändras av Target. Eftersom detta ID används av Target bör det inte användas för ytterligare ändringar eller justeringar i kodredigeraren.

Utför inte document.write-åtgärder i egna kodskript.

Skript körs asynkront. Detta orsakar ofta document.write åtgärder visas på fel plats på sidan. Använda document.write i skript som skapas i anpassad kod rekommenderas inte.

Om du skapar ett element och sedan ändrar det, ska du inte ta bort det ursprungliga elementet.

Varje ändring skapar ett nytt element på panelen Ändringar. Eftersom den andra åtgärden ändrar Element 1 har den åtgärden inte längre något att ändra om du tar bort Element 1, så ändringen fungerar inte längre. Mer information finns i Felsökning nedan.

Var försiktig om du använder den anpassade kodfunktionen för två aktiviteter som har samma URL som mål.

Om du använder den anpassade kodfunktionen för två aktiviteter som har samma URL som mål, kommer JavaScript-koden att matas in på sidan från båda aktiviteterna. Målet bestämmer automatiskt ordningen för levererat innehåll. Kontrollera att koden inte är beroende av placering. Det är upp till dig att se till att det inte finns några konflikter i koden.

Felsökning av anpassad kod

Anpassad kod körs inte när du använder triggerView.

Anpassade koderbjudanden i VEC återges inte om när triggerView() anropas med {page: false} som alternativ.

Jag fick en varning om att en åtgärd inte kan utföras på grund av strukturella ändringar på en sida. Vad betyder det?

Det här meddelandet anger att sidans struktur har ändrats sedan aktiviteten senast sparades.

De saknade väljarna kan nås i bläddringsläge. Vi rekommenderar att du tar bort och sedan återskapar varje upplevelse så att innehållet ser ut som du tänkt dig, vilket visas i varningsmeddelandet.

code_editor_2 image

När jag tar bort ett element visas ett varningsmeddelande som säger"Om du tar bort den här åtgärden kan det påverka efterföljande åtgärder". Vad betyder det?

Om du till exempel har vidtagit två åtgärder:

  • En klass har lagts till i Element 1
  • HTML för element 1 har redigerats

Varje ändring skapar ett nytt element på panelen Ändringar. Eftersom den andra åtgärden ändrar element 1 har den andra åtgärden inte längre något att ändra om du tar bort element 1, så ändringen fungerar inte längre.

Om du lägger till ett element med text och sedan redigerar elementet med annan text i en separat åtgärd, visas båda åtgärderna som separata element på panelen Ändringar. När du redigerade elementet skapade du ett nytt element som ändrar det ursprungliga elementet som du skapade och som innehåller den redigerade texten. Om du sedan tar bort det ursprungliga elementet kommer den redigerade texten inte att kunna hitta det element som redigerades och kommer inte att visas. Det andra elementet finns kvar i listan med element, men det påverkar inte sidan eftersom elementet det ändras inte längre finns.

Ett element som jag skapade med document.write i ett skript inte visas där jag förväntar mig det.

Skript körs asynkront. Detta orsakar ofta document.write åtgärder visas på fel plats på sidan. Adobe rekommenderar inte att du använder document.write i skript som skapas i den anpassade koden.

Mitt JavaScript visar fel i den anpassade koden.

Alla infogade JavaScript som inte är ett giltigt JavaScript-skript visar fel i den anpassade koden.

Jag kan inte ångra en ändring i min egen kod.

Ångra stöds för närvarande inte för redigerings- och borttagningsåtgärder från panelen Ändringar och i anpassad kod. Om du ångrar någon av dessa åtgärder kan det leda till att upplevelsen i VEC inte överensstämmer med de faktiska åtgärder som visas i den anpassade koden. Åtgärderna i den anpassade koden är emellertid i rätt läge och påverkar inte leveransen. Det här är ett gränssnittsproblem. Om du vill uppdatera upplevelsen sparar du den och öppnar den igen, eller går till nästa steg och går tillbaka. Båda dessa åtgärder läser in upplevelsen på nytt, så den ser ut som förväntat och överensstämmer med åtgärderna på panelen Ändringar.

Anpassad kod ger inte det förväntade resultatet i Internet Explorer 8.

Target har inte längre stöd för IE8.

På denna sida