DocumentazioneTargetGuida di Target

Modifiche

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Informazioni sulla pagina Modifications in Adobe Target che consente di visualizzare le modifiche apportate alla pagina e di aggiungere ulteriori modifiche (selettore CSS, Mbox e codice personalizzato).

La pagina Modifications mostra tutte le modifiche apportate alla pagina nel Compositore esperienza visivo e consente di apportare ulteriori modifiche facendo clic su ogni elemento della pagina e selezionando un'azione. Ogni modifica apportata viene visualizzata come un'azione o un elemento separato nell'elenco Modifications. Puoi anche aggiungere modifiche, compresi i seguenti tipi di modifica: Selettore CSS, Mbox. e Codice personalizzato.

Panoramica sulle modifiche section_EE27E7572AA74397BBDED563B2B3D509

La pagina Modifications mostra tutte le modifiche apportate alla pagina nel Compositore esperienza visivo. Ogni modifica apportata viene visualizzata come un'azione o un elemento separato nell'elenco Modifications.

immagine codeeditor_page_mods

Utilizza la pagina Modifiche per apportare piccole modifiche al selettore scelto da Target quando utilizzi il Compositore esperienza visivo per configurare il modo in cui viene distribuito il contenuto. È possibile modificare sia il contenuto che un attributo HTML. È inoltre possibile modificare il codice per creare l'equivalente di un'offerta HTML all'interno di una mbox.

Utilizza la pagina Modifiche per:

  • Visualizzare un'azione intrapresa nel compositore visivo.

    immagine codeeditor_viewchange

  • Modificare un'azione esistente. Passa il puntatore del mouse sulla modifica desiderata, quindi fai clic sull'icona Edit.

    immagine codeeditor_edit

    Apporta le modifiche.

    immagine codeeditor_changechange1

  • Elimina un'azione esistente. Passa il puntatore del mouse sulla modifica desiderata, quindi fai clic sull'icona Delete.

    immagine codeditor_delete

  • Aggiungi una nuova modifica. Fai clic su Add Modification o sull'icona +, quindi specifica le modifiche come descritto di seguito.

    codeeditor_nuova immagine

    Dopo la creazione di una modifica, Target visualizza un'icona + nella parte superiore del pannello Modifiche, invece che nel pulsante Aggiungi modifica nella parte inferiore del pannello.

  • Ancora il pannello Modifiche in verticale lungo il lato dell’interfaccia di Target oppure in orizzontale lungo il bordo inferiore. Fai clic sull'icona Dock per passare da una impostazione all'altra.

    immagine codeditor_dock

    Nella figura seguente viene illustrato il pannello Modifiche ancorato nella parte inferiore dello schermo:

    immagine codeeditor_dock_bottom

Aggiungere modifiche section_C7ABCD5731A048CB8F90EDC31A32EDF9

  1. Per visualizzare la pagina Modifications per un'esperienza selezionata, nel Compositore esperienza visivo fai clic sull'icona Modifications </>.

    immagine codeeditor_icon_big

    note note
    NOTE
    Per aprire il pannello Modifiche nel Compositore esperienza basato su modulo, crea o modifica un’offerta HTML. Per ulteriori informazioni, consulta Compositore esperienza basato su moduli.

    Viene visualizzata la pagina Modifications, che suddivide lo schermo tra la modalità visiva a sinistra e il pannello Modifiche a destra. Fai clic sull'icona Dock per ancorare il pannello Modifiche in verticale lungo il lato dell'interfaccia utente di Target o in orizzontale nella parte inferiore. Nota che l'esperienza A nella figura seguente non ha modifiche precedenti.

    immagine codeeditor_page

    L'esperienza B mostra le modifiche precedenti nel pannello Modifications a destra.

    immagine codeeditor_page_mods

  2. Per aggiungere una modifica:

    • Se non è stata apportata alcuna modifica precedente, fare clic sul pulsante Add Modification nella parte inferiore del pannello Modifications sul lato destro.
    • Se sono presenti modifiche precedenti per l'esperienza, fai clic sull'icona + nella parte superiore del pannello Modifications a destra.

    Il pannello Modifiche visualizza:

    codeeditor_page_mods_add immagine

  3. Dall'elenco a discesa Modifications Type, scegliere il tipo desiderato:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Tipo di modifica Dettagli
    Selettore CSS Nella casella Selettore elemento CSS, specifica l'elemento CSS che desideri modificare, seleziona un tipo di azione (Imposta contenuto o Imposta attributo), quindi compila le informazioni richieste e il contenuto desiderato.
    Mbox

    Specifica il nome mbox e il contenuto desiderato.

    Nota: le mbox non sono più supportate nel Compositore esperienza visivo nelle pagine che utilizzano at.js 2.x.

    Come soluzioni alternative:

    • Se utilizzi at.js 2.x, aggiungi una modifica al selettore CSS invece di una modifica Mbox e aggiungi il contenuto al selettore che la mbox stava utilizzando.
    • Utilizzare attività basate su moduli (funziona con mbox e at.js 1.x che in at.js 2.x).
    • Utilizzare at.js 1.x nel Compositore esperienza visivo.
    Codice personalizzato

    Specificare un nome facoltativo, selezionare o deselezionare la casella di controllo Add Code in the <HEAD> sezione, quindi aggiungere il codice personalizzato.

    Se si seleziona Add Code in the <HEAD> sezione, il codice personalizzato viene aggiunto alla sezione <head> e l'esecuzione non attende il corpo o eventi di caricamento della pagina. Aggiungi solo gli elementi <script> e <style>. L’aggiunta di tag <div> e di altri elementi potrebbe causare la comparsa di elementi <head> rimanenti nel <body>. Se utilizzi at.js, tutte le offerte verranno consegnate in modo asincrono.

    Se si deseleziona la sezione Add Code in the <HEAD>, il codice personalizzato viene eseguito subito dopo il tag <body>. Racchiudi tutto il codice in un unico <div> per conservare la struttura DOM. Se utilizzi at.js, tutte le offerte verranno consegnate in modo asincrono.

    Se HTML per <BODY> contiene <SCRIPT> e <DIV>, <DIV> viene aggiunto a <BODY> e <SCRIPT> viene eseguito in <HEAD>. Inoltre, <SCRIPT> che carica un file esterno viene aggiunto a <HEAD>.

    Nota: gli script vengono eseguiti in modo asincrono. Ciò significa che non è possibile, ad esempio, utilizzare document.write o metodi di scripting simili.

    Il codice personalizzato fornisce un'interfaccia non visiva per visualizzare, modificare e aggiungere nuove azioni nel Compositore esperienza visivo, nel Compositore esperienza basato su moduli e nell'editor di offerte HTML. Il pannello fornisce una visualizzazione del codice di un'esperienza e facilita la creazione di esperienze più complesse, l'ottimizzazione di quelle esistenti e la risoluzione di problemi.

    Il codice personalizzato è destinato agli utenti avanzati che hanno dimestichezza con HTML, JavaScript e CSS. La visualizzazione codice consente di modificare o perfezionare le modifiche o correggere i problemi del selettore. Può inoltre essere utilizzato per aggiungere nuove azioni e un codice personalizzato. È possibile aggiungere più di un codice personalizzato e facoltativamente assegnare un nome a ciascuno di essi.

    Nota: il codice personalizzato è attualmente disponibile solo per attività A/B e per l'esperienza di targeting (XT). Il codice personalizzato è disabilitato in caso di sovrapposizione e se viene applicata un'offerta di reindirizzamento.

    Il codice personalizzato supporta i seguenti casi di utilizzo:

    • Aggiunta di JavaScript, HTML o CSS personalizzati da eseguire nella parte superiore della pagina
    • Visualizzazione o modifica del codice generato dal Compositore esperienza visivo dopo aver apportato modifiche
    • Impostazione del contenuto HTML per un selettore (solo selettore CSS)
    • Impostazione di un attributo su un elemento HTML
    • Aggiunta di contenuto dell'offerta da consegnare in una mbox regionale
    • Scambio su DOM-ready, utilizzando jQuery
    • Scambio su DOM-ready, non jQuery (non supporta Internet Explorer 8)
    • Scambio con meccanismo DOM tramite plug-in “elementOnLoad”
    • Reindirizzamento personalizzato

    Il codice personalizzato fornisce:

    • Numeri di linea per un migliore uso.
    • Colorazione della sintassi che consente di evitare errori di sintassi nelle offerte HTML.
    • La possibilità di creare più codici personalizzati e fornire un nome facoltativo per ciascuno di essi. La creazione di più codici personalizzati semplifica il debug futuro. Invece di creare un codice personalizzato per eseguire diverse modifiche, puoi creare un codice personalizzato distinto per ogni modifica con un nome descrittivo. L'uso di codici personalizzati separati rende le modifiche più modulari e gestibili. Tieni presente che l'esecuzione di più codici personalizzati in un'attività non è garantita nella sequenza in cui sono stati creati.

    Il pannello Modifiche suddivide lo schermo tra la modalità visiva e la modalità codice. Entrambe le modalità rimangono sincronizzate. Ogni modifica apportata visivamente ha una riga corrispondente nella vista Codice. Allo stesso modo, ogni modifica inserita nella vista Codice viene visualizzata nell'esperienza visiva. Facendo clic su una qualsiasi riga della vista Codice, viene selezionato l'elemento corrispondente nella pagina visiva.

    Il codice personalizzato supporta HTML, script e stili. Qualsiasi codice HTML o script valido può essere aggiunto o modificato.

  4. Aggiungi ulteriori modifiche in base alle esigenze.

Casi di utilizzo del codice personalizzato section_26CB3360097D400FB02E20AE5FDBA352

Il pannello Custom Code contiene codice eseguito all'inizio del caricamento della pagina.

Puoi eseguire il codice JavaScript nel tag <head>. L’esecuzione del codice non attende che il tag <body> sia presente nel DOM.

I selettori per le azioni visive successive dipendono dagli elementi HTML aggiunti in questa scheda.

Il pannello Codice personalizzato viene comunemente utilizzato per aggiungere JavaScript o CSS all'inizio della pagina.

immagine codeeditor_custom

Utilizzare la scheda Custom Code per:

  • Utilizzare JavaScript in linea o per un collegamento a un file JavaScript esterno

    Ad esempio, per modificare il colore di un elemento:

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

  • Configurare uno stile in linea o un collegamento a un foglio di stile esterno

    Ad esempio, per definire una classe per un elemento sovrapposto:

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

  • Aggiungere frammenti HTML per definire nuovi elementi

    Ad esempio, utilizza il seguente frammento HTML per creare una sovrapposizione <div> utilizzando la classe CSS definita sopra:

    code language-html 
    <div class="overlay"></div>

  • Scambio su DOM-ready, utilizzando jQuery

    L'esempio seguente, che utilizza JQuery, presuppone che il sito Web del cliente abbia jQuery disponibile sulla pagina quando Target esegue le offerte.

    code language-javascript 
    <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>

  • Scambio su DOM-ready, non jQuery (non supporta Internet Explorer 8)

    code language-javascript 
    <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>

  • Reindirizzamento personalizzato passando parametri esistenti, parametro s_tnt (per l'integrazione legacy di Analytics), parametri di riferimento e sessione mbox

    code language-javascript 
    <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>

  • Aggiungi i modelli Adobe Target Experience per il codice personalizzato. I modelli di esperienza di Target sono esempi precodificati con input configurabili da utilizzare per casi di utilizzo ricorrenti per gli addetti al marketing. Questi modelli di esperienza sono disponibili gratuitamente per gli sviluppatori e i rivenditori come punto di partenza per eseguire alcuni casi comuni di utilizzo esterno in Adobe Target (tramite il Compositore esperienza visivo o il Compositore esperienza basato su modulo). I casi di utilizzo includono lightbox, giostre, countdown e altro ancora.

    Per ulteriori informazioni, vedere Modelli di esperienza.

Tecniche consigliate per il codice personalizzato section_10DFFD9FB92A43C1BB444A45E0272B28

Racchiudi sempre il codice personalizzato in un elemento.

Ad esempio:

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

Nel caso in cui siano necessarie modifiche, apporta modifiche all'interno di questo contenitore.

Se non è più necessario il codice personalizzato, è sufficiente lasciare vuoto questo contenitore, ma non rimuoverlo. Ciò assicura che altre modifiche di esperienza non siano influenzate.

Non utilizzare l'ID elemento “CDQID” per apportare modifiche alla pagina eseguita nell'editor di codice.

Target applica un nuovo ID elemento con il valore “CDQID” a qualsiasi elemento della pagina modificato da Target. Poiché questo ID viene applicato da Target, non deve essere utilizzato per ulteriori modifiche o regolazioni nell'editor di codice.

Non eseguire azioni document.write negli script di codice personalizzati.

Gli script vengono eseguiti in modo asincrono. Questo causa spesso la comparsa delle azioni document.write nel punto sbagliato della pagina. L'utilizzo di document.write negli script creati nel codice personalizzato non è consigliato.

Se crei un elemento e quindi lo modifichi, non eliminare l'elemento originale.

Ogni modifica crea un nuovo elemento nel pannello Modifiche. La seconda azione modifica l'elemento 1: se lo elimini, questa azione non avrà più niente da modificare, risultando nella mancata applicazione della modifica. Per ulteriori informazioni, consulta “Risoluzione dei problemi”.

Presta attenzione se utilizzi la funzionalità di codice personalizzato per due attività con targeting allo stesso URL.

Se utilizzi la funzione codice personalizzato per due attività con targeting allo stesso URL, JavaScript viene integrato nella pagina da entrambe le attività. Target determina automaticamente l'ordine del contenuto recapitato. Assicurati che il codice non dipenda dal posizionamento. Spetta a te verificare che non vi siano conflitti nel codice.

Risoluzione dei problemi del codice personalizzato section_6C965CBC31C348D7AA5B57B63DAB9E7F

Il codice personalizzato non viene eseguito quando si utilizza triggerView.

Le offerte di codice personalizzato nel Compositore esperienza visivo non vengono sottoposte nuovamente a rendering quando triggerView() viene chiamato con {page: false} come opzione.

Ho ricevuto un avviso rispetto al fatto che un'azione non può essere applicata a causa di modifiche strutturali a una pagina. Cosa significa?

Questo messaggio indica che la struttura della pagina è cambiata dall'ultimo salvataggio dell'attività.

I selettori mancanti potrebbero essere raggiunti utilizzando la modalità Sfoglia. È consigliabile eliminare e quindi ricreare ogni esperienza per assicurarsi che il contenuto venga visualizzato come previsto, come indicato nel messaggio di avviso.

immagine code_editor_2

Quando elimino un elemento, viene visualizzato un avviso che indica che "L'eliminazione di questa azione può influire sulle azioni successive." Cosa significa?

Ad esempio, supponiamo che tu abbia eseguito due azioni:

  • Aggiunta di una classe all'elemento 1
  • Modifica del codice HTML dell'elemento 1

Ogni modifica crea un nuovo elemento nel pannello Modifiche. La seconda azione modifica l'elemento 1: se lo elimini, la seconda azione non avrà più niente da modificare, risultando nella mancata applicazione della modifica.

In altre parole, se aggiungi un elemento con testo e modifichi tale elemento con un testo diverso in un'azione separata, il pannello Modifiche mostrerà entrambe le azioni come elementi distinti. Durante la modifica dell'elemento è stato creato un nuovo elemento, contenente il testo modificato, che modifica l'elemento originale creato. Se elimini l'elemento originale, il testo modificato non sarà in grado di trovare l'elemento modificato e non verrà visualizzato. Il secondo elemento rimarrà nell'elenco senza tuttavia influire sulla pagina, poiché l'elemento da modificare non esiste più.

Un elemento creato utilizzando document.write in uno script non viene visualizzato dove previsto.

Gli script vengono eseguiti in modo asincrono. Questo causa spesso la comparsa delle azioni document.write nel punto sbagliato della pagina. Adobe consiglia di non utilizzare document.write negli script creati nel codice personalizzato.

Il mio JavaScript visualizza gli errori nel codice personalizzato.

Qualsiasi JavaScript in linea che non è un JavaScript valido mostra gli errori nel codice personalizzato.

Impossibile annullare una modifica nel codice personalizzato.

Attualmente, l'annullamento non è supportato per le azioni di modifica ed eliminazione dal pannello Modifiche e nel codice personalizzato. L'annullamento di una di queste operazioni potrebbe comportare l'incoerenza dell'esperienza con le azioni effettive visibili nel codice personalizzato all'interno del Compositore esperienza visivo. Tuttavia, le azioni nel codice personalizzato sono nello stato corretto e non vi è alcuna conseguenza sulla consegna. Questo è un problema di interfaccia utente. Per aggiornare l'esperienza, salvarla e riaprirla, oppure andare al passaggio successivo e tornare indietro. Una di queste azioni ricarica l'esperienza e quindi viene visualizzata come previsto ed è coerente con le azioni nel pannello Modifiche.

Il codice personalizzato non produce i risultati previsti in Internet Explorer 8.

Target non supporta più IE8.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654