Configurare il supporto per la messaggistica Web in-app in Web SDK
I messaggi in-app sono notifiche che puoi inviare agli utenti all’interno dell’applicazione web, guidandoli verso punti di interesse specifici.
Puoi utilizzare queste notifiche per diversi scopi, ad esempio per promuovere nuove funzioni, presentare offerte speciali o facilitare l’onboarding degli utenti.
Utilizzando i messaggi in-app, puoi interagire in modo efficace con il pubblico e indirizzarli verso aspetti importanti dell’applicazione.
Prerequisiti prerequisites
Versione estensione tag Web SDK extension-version
La funzionalità di messaggistica in-app per web richiede la versione più recente dell’estensione tag SDK per web.
Configurare un CSP per la messaggistica in-app web csp
Quando configuri Messaggistica Web in-app, devi includere la seguente direttiva nel CSP:
default-src blob:;
Per ulteriori informazioni sulla configurazione di un CSP, consulta la documentazione dedicata.
Configurare la messaggistica Web in-app utilizzando l’estensione tag Web SDK tag-extension
Consulta la pagina di configurazione dell'estensione tag Web SDK per capire dove si trovano le impostazioni descritte di seguito.
Dopo aver installato l'estensione tag Web SDK, segui i passaggi seguenti per configurare l'estensione per la messaggistica in-app Web.
Nella sezione Personalization, seleziona l'opzione Abilita archiviazione personalizzazione. Questa opzione consente all’SDK web di tenere traccia delle esperienze viste dall’utente nei vari caricamenti di pagina.
La messaggistica in-app Web supporta due tipi di trigger:
Consulta le sezioni seguenti per configurare l’estensione tag Web SDK in base ai trigger che desideri utilizzare.
Passaggi di configurazione per il trigger Send data to Platform send-data-platform
Seleziona la proprietà tag che contiene l'estensione Web SDK e crea una nuova regola con le seguenti impostazioni:
-
Estensione: Core
-
Tipo evento: Libreria caricata (parte superiore della pagina)
-
Seleziona Mantieni modifiche per salvare la configurazione dell'evento.
Successivamente, devi aggiungere un’azione alla regola creata.
-
Nella sezione Actions, seleziona Aggiungi.
-
Utilizza le impostazioni Azione seguenti:
-
Estensione: Adobe Experience Platform Web SDK
-
Tipo azione: Invia evento
-
-
Nella parte destra dello schermo, nella sezione Personalization, abilita l'opzione Rendering delle decisioni di personalizzazione visiva.
-
Nella parte destra della schermata, nella sezione Contesto della decisione, definisci le coppie Chiave/Valore utilizzate nella configurazione della campagna per qualificarti per il messaggio in-app.
-
Seleziona Mantieni modifiche per salvare la configurazione.
Successivamente, devi aggiungere la regola appena creata alla libreria delle proprietà del tag. A questo scopo, vai a Flusso di pubblicazione e seleziona la regola creata in precedenza.
Dopo aver aggiunto la regola alla libreria, seleziona Salva e genera in sviluppo.
Il processo di configurazione è ora completato e il messaggio è pronto per essere mostrato agli utenti.
Passaggi di configurazione per l'utilizzo di trigger manuali manual-trigger
Seleziona la proprietà tag che contiene l'estensione Web SDK e crea una nuova regola con le seguenti impostazioni:
-
Estensione: Core
-
Tipo evento: Fare clic
-
Imposta il trigger per un elemento specifico sulla pagina, identificabile da un selettore CSS a tua scelta.
Successivamente, devi aggiungere un’azione alla regola creata.
-
Nella sezione Actions, seleziona Aggiungi.
-
Utilizza le impostazioni Azione seguenti:
-
Estensione: Adobe Experience Platform Web SDK
-
Tipo azione: Valuta set di regole
-
-
Sul lato destro della schermata, abilita l'opzione Esegui rendering delle decisioni di personalizzazione visiva.
-
Nella parte destra della schermata, nella sezione Contesto della decisione, definisci le coppie Chiave/Valore utilizzate nella configurazione della campagna per qualificarti per il messaggio in-app.
-
Seleziona Mantieni modifiche per salvare la configurazione.
Successivamente, devi aggiungere la regola appena creata alla libreria delle proprietà del tag. A questo scopo, vai a Flusso di pubblicazione e seleziona la regola creata in precedenza.
Dopo aver aggiunto la regola alla libreria, seleziona Salva e genera in sviluppo.
Il processo di configurazione è ora completato e il messaggio è pronto per essere mostrato agli utenti.
Configurare la messaggistica Web in-app utilizzando la libreria JavaScript dell’SDK per web js-library
In alternativa all’utilizzo dell’estensione tag Web SDK, puoi anche configurare la messaggistica Web in-app direttamente dalla libreria JavaScript dell’SDK web.
I messaggi web in-app provenienti da Adobe Journey Optimizer possono essere visualizzati in due modi.
Metodo 1: recuperare automaticamente il contenuto di personalizzazione automatic
Per fare in modo che Web SDK recuperi automaticamente il contenuto di personalizzazione al caricamento della pagina, utilizza il comando sendEvent
, come illustrato nell'esempio seguente.
alloy("sendEvent", {
renderDecisions: true,
personalization: {
surfaces: ['#welcome']
}
});
Metodo 2: recuperare manualmente il contenuto di personalizzazione in base all’azione dell’utente manual
Per visualizzare il contenuto di personalizzazione solo dopo che l'utente ha eseguito un'azione specifica, utilizzare il comando evaluateRulesets
come illustrato nell'esempio seguente.
In questo esempio, il contenuto di personalizzazione viene visualizzato quando un utente fa clic sul pulsante Acquista ora sul sito Web.
alloy("evaluateRulesets", {
renderDecisions: true,
personalization: {
decisionContext: {
"userAction": "buy_now"
}
}
});
Configurare l’archiviazione per la personalizzazione personalization-storage
È possibile scegliere di mostrare i messaggi in-app agli utenti per un numero di volte impostato o ogni volta che visitano una pagina, tramite l'opzione di configurazione personalizationStorageEnabled
.
Nella configurazione di Web SDK impostare l'opzione personalizationStorageEnabled
in base alle proprie esigenze:
personalizationStorageEnabled: true
attiva il messaggio in-app con la frequenza definita nella campagna Adobe Journey Optimizer.personalizationStorageEnabled: false
attiva il messaggio in-app a ogni caricamento di pagina.