English (US) Français Português do Brasil

Script di Dynamic Yield

Segui

Puoi aggiungere gli script Dynamic Yield ai <head>tag del tuo sito, in qualsiasi pagina. Dopo l'implementazione degli script, l'attività dei visitatori verrà monitorata e sarà possibile pubblicare le campagne Dynamic Yield sul tuo sito.

Implementazione

  1. Nella console Dynamic Yield, vai alla sezione Impostazioni › Impostazioni generali.
  2. Copia e incolla il frammento di codice subito dopo il <head>tag di apertura di ogni pagina del tuo sito.

    script_dashboard.png

Esempio di <head>tag intero con lo script, i tag di prefetch e preconnect e il contesto della pagina. Assicurati di mantenere questo ordine:

Codice
<head>

// Prefetch e preconnessione DNS
<link rel="preconnect" href="//cdn.dynamicyield.com">

<link rel="preconnect" href="//st.dynamicyield.com">

<link rel="preconnect" href="//rcom.dynamicyield.com">

<link rel="dns-prefetch" href="//cdn.dynamicyield.com" />

<link rel="dns-prefetch" href="//st.dynamicyield.com" />

<link rel="dns-prefetch" href="//st.dynamicyield.com" />

...

...

...

// Contesto DY

<script type="text/javascript">

 window.DY = window.DY || {};

 DY.recommendationContext = { type: "PRODUCT", data: ["SKU123"] };

</script>

// Script DY

<script src="//cdn.dynamicyield.com/api/[SECTION_ID]/api_dynamic.js" type="text/javascript"></script>

<script src="//cdn.dynamicyield.com/api/[SECTION_ID]/api_static.js" type="text/javascript"></script>

</head>

Best practice

  • Metodo di implementazione: implementazione dello script Dynamic Yield direttamente nel codice del tuo sito, non con un tag manager, per evitare lo sfarfallio.
  • Sincronicità: evita di configurare gli script per l'esecuzione asincrona. Si possono verificare comportamenti imprevisti che influiscono sulle varianti visualizzate, sul tempo di caricamento, sullo sfarfallio e così via. Dynamic Yield offre un elevato tasso di ridondanza del server e tempi di caricamento rapidi, di conseguenza non è necessario ricorrere al caricamento asincrono per rendere tutto più veloce. Tutte le altre operazioni dopo il caricamento degli script verranno eseguite in modo asincrono.

Aggiungere tag di prefetch e preconnect

Dato che gli script Dynamic Yield sono gestiti da un hostname diverso dal tuo sito web, il browser dovrà risolvere il DNS. Inserisci un tag dns-prefetch prima dello script per ridurre i tempi di risoluzione del DNS.

I tag di preconnessione consentono al browser di configurare le prime connessioni prima di inviare effettivamente una richiesta HTTP al server. Con questa soluzione si elimina la latenza in andata e ritorno e si fa risparmiare tempo agli utenti. Alcuni browser (come Explorer, Safari iOS) non supportano i tag di preconnessione e li ignorano.

Queste chiamate sono incluse per impostazione predefinita nello script fornito tramite Impostazioni ›  pagina delle Impostazioni generali che va copiato in ogni pagina del tuo sito.

Data center negli Stati Uniti:

<link rel="preconnect" href="//cdn.dynamicyield.com">
<link rel="preconnect" href="//st.dynamicyield.com">
<link rel="preconnect" href="//rcom.dynamicyield.com">
<link rel="dns-prefetch" href="//cdn.dynamicyield.com">
<link rel="dns-prefetch" href="//st.dynamicyield.com">
<link rel="dns-prefetch" href="//rcom.dynamicyield.com">
<script type="text/javascript" src="//cdn.dynamicyield.com/api/[YOUR SITE ID]/api_dynamic.js"></script>
<script type="text/javascript" src="//cdn.dynamicyield.com/api/[YOUR SITE ID]/api_static.js"></script>

Data center nell'UE:

<link rel="preconnect" href="//cdn-eu.dynamicyield.com">
<link rel="preconnect" href="//st-eu.dynamicyield.com">
<link rel="preconnect" href="//rcom-eu.dynamicyield.com">
<link rel="dns-prefetch" href="//cdn-eu.dynamicyield.com">
<link rel="dns-prefetch" href="//st-eu.dynamicyield.com">
<link rel="dns-prefetch" href="//rcom-eu.dynamicyield.com">
<script type="text/javascript" src="//cdn-eu.dynamicyield.com/api/[YOUR SITE ID]/api_dynamic.js"></script>
<script type="text/javascript" src="//cdn-eu.dynamicyield.com/api/[YOUR SITE ID]/api_static.js"></script>

Architettura degli script e dettagli avanzati

Attualmente eseguiamo più sezioni di codice sul sito web del cliente per poter eseguire i seguenti passaggi:

  • Raccolta dati,
  • Raccolta dei parametri,
  • Processo decisionale,
  • Esecuzione di Experiments (inclusi tag e azioni),
  • Raccomandazioni.

Questa sezione descrive tutti gli script eseguiti sulla tua pagina web, la sequenza in cui vengono lanciati e le dipendenze tra di essi.

Nota: st.dynamicyield.com, async-px.dynamicyield.com, e cdn.dynamicyield.com vengno sostituiti da st-eu.dynamicyield.com, async-px-eu.dynamicyield.com e cdn-eu.dynamicyield.com se volessi usare il data center Dynamic Yield nell'UE.

Flusso di esecuzione

Screen Shot 2023-08-28 at 16.18.07.png

  1. L'implementazione di api_static e api_dynamic sulla pagina renderizzerà le campagne sul tuo sito.
  2. L'azione predefinita per l'iniezione della raccolta dati aggiungerà una chiamata a st.dynamicyield.com/st : restituirà i dati dell'utente e della sezione e aggiungerà una chiamata per caricare il nostro script di raccolta.
  3. Lo script di raccolta verrà caricato - dy-coll-nojq-min.js.
  4. Lo script di raccolta attiverà la chiamata async-px.dynamicyield.com per segnalare gli endpoint di raccolta al server.

Script sulla pagina

Script sperimentali

  • api_static.js
    1. Caricato da CDN con cache di 1 ora.
    2. Visualizza tutte le esperienze disponibili e le propone in base alle varianti al loro targeting.
    3. Attende il caricamento di tutti i dati dinamici sulla pagina prima dell'esecuzione di tutte le esperienze. Una volta caricato, abiliterà tutte le chiamate API per le campagne.
    4. 69,8 KB dopo gzip (ultimo aggiornamento: novembre 2020)
  • api_dynamic.js
    • Caricato da CDN con una cache di 5 minuti.
    • Contiene tutte le impostazioni della campagna Dynamic Yield.
    • La dimensione del file varia a seconda del numero di esperienze attive.

Script di raccolta asincrono
Lo script di implementazione chiamerà il nostro server e configurerà tutti gli utenti e i dati del sito sulla pagina e, quindi, procederà a caricare dy-coll-min.js dal CDN. Lo script eseguirà la raccolta dati nel complesso ed esporrà l'API on-page.

Processo di raccolta dati

Operazioni di raccolta
Quando si esegue il nostro script di raccolta statica, il sistema implementa le seguenti azioni sulla pagina:

  1. Avvia tutti i listener di pagina,
  2. Calcola la definizione del segmento: valutazione javascript personalizzata per sezione per definire il segmento della pagina corrente,
  3. Calcola le variabili del sito: valuta il codice javascript delle variabili del sito e salva i risultati in una variabile locale,
  4. Calcola i valori degli obiettivi,
  5. Avvia il QManager: gestisce le chiamate DY.API,
  6. Registra sul server i risultati avanzati dalle esecuzioni precedenti,
  7. Contrassegna ed esegue gli esperimenti di FrontPage,
  8. Aggiunge ascoltatori per tutte le unità monitorate sulla pagina,
  9. Esegue i rilevatori per identificare la pagina corrente e il set di funzionalità utente,
  10. Registra i dati della pagina sul server,
  11. Registra le impressioni sul server (1 secondo dopo che il dom è pronto),
  12. Registra le impressioni reali sul server (ogni 10 secondi),
  13. Registra i clic sulle unità monitorate (ogni volta che si clicca su un'unità),
  14. Registra eventi dinamici, basati sulle esecuzioni DY.API.

Raccolta dati: chiamate di rete

Lo scopo di queste chiamate è raccogliere dati. Tutte le risposte a queste richieste saranno vuote. Queste richieste non influiscono sull'esecuzione o sul rendering della pagina.

  • async-px.dynamicyield.com/uia: pagina del rapporto e informazioni sull'utente.
  • async-px.dynamicyield.com/imp: riporta tutte le unità monitorate nella pagina e si può eseguire più di una volta nell'applicazione a pagina singola, segnalandone il delta.
  • async-px.dynamicyield.com/dpx: riporta le chiamate e le proprietà degli eventi dinamici.
  • async-px.dynamicyield.com/var: riporta l'impressione della variante.
  • async-px.dynamicyield.com/ac: segnala una variante.
  • async-px.dynamicyield.com/id: identifica l'utente con uid e uid type, obbligatorio per l'omnicanale.
  • async-px.dynamicyield.com/rcomEvent: interazioni di raccomandazione lato client, JSON con dati PRIMP, WRIMP, CLICK.
  • async-px.dynamicyield.com/batch: una richiesta batch contenente impressioni, decisioni e altri report interni Dynamic Yield richiesti.