Puoi definire il contenuto della pagina di destinazione utilizzando JavaScript personalizzato. Ad esempio, se devi eseguire uno stile avanzato o se desideri aggiungere comportamenti personalizzati alle pagine di destinazione, puoi creare controlli personalizzati ed eseguirli in Journey Optimizer.
Per inserire JavaScript personalizzato nel contenuto della pagina di destinazione, puoi effettuare una delle seguenti operazioni:
Importa il contenuto esistente di HTML quando inizi a creare il contenuto, quindi seleziona il file che include il codice JavaScript personalizzato. Scopri come importare il contenuto in questa sezione.
Progetta la pagina di destinazione da zero o da un modello salvato. Trascina e rilascia la HTML componente contenuto nell’area di lavoro e mostra il codice sorgente per aggiungere JavaSCript al componente. Scopri come utilizzare il componente HTML in questa sezione.
Immetti o incolla il codice JavaScript direttamente nella finestra di progettazione dei contenuti. Scopri come codificare i contenuti personalizzati in questa sezione.
Attualmente non è possibile visualizzare JavaScript in azione quando visualizzazione dell’anteprima della pagina di destinazione.
Affinché la pagina di destinazione sia visualizzata correttamente, utilizza la sintassi seguente come descritto nelle sezioni seguenti.
Per inizializzare il codice JavaScript, è necessario utilizzare il lpRuntimeReady
evento. Questo evento verrà attivato dopo l'inizializzazione della libreria completata. Il callback viene eseguito con lpRuntime
oggetto per esporre il metodo e gli hook della libreria.
LpRuntime
sta per "Landing page Runtime". Questo oggetto è l'identificatore della libreria principale. Verranno esposti hook, metodi di invio dei moduli e altri metodi di utilità utilizzabili in JavaScript personalizzato.
Esempio:
if(window.lpRuntime){
init(window.lpRuntime);
}else{
window.addEventListener('lpRuntimeReady',function(e){
init(e.detail);
});
}
function init(lpRuntime){
// Enter custom JavaScript here using methods from lpRuntime.
}
Utilizzando gli hook, è possibile allegare un metodo durante il ciclo di vita dell’invio del modulo. Ad esempio, è possibile utilizzare gli hook per eseguire una convalida del modulo prima che il modulo venga effettivamente inviato.
Ecco gli hook che puoi utilizzare:
Nome | Descrizione |
---|---|
addBeforeSubmitHook | Gancio personalizzato da chiamare prima dell’invio del modulo. Restituisce true per continuare l'invio, else restituisce false per bloccare l'invio. |
addOnFailureHook | Gancio personalizzato da chiamare per l'invio del modulo non riuscito. |
addOnSuccessHook | Gancio personalizzato da chiamare in caso di invio corretto del modulo. |
Esempio:
//LpRuntime hooks
lpRuntime.hooks.addBeforeSubmitHook(function(){
// Add your validation logic here.
});
I metodi elencati di seguito vengono utilizzati per eseguire invii di moduli personalizzati.
Poiché l’invio del modulo è gestito da JavaScript personalizzato, l’invio predefinito deve essere disabilitato esplicitamente impostando una variabile globale disableDefaultFormSubmission
a true
.
Nome | Descrizione |
---|---|
submitForm | Questo metodo sottometterà il modulo e gestirà il flusso di invio successivo. |
submitFormPartial | Questo metodo invia anche il modulo, ma ignora il flusso di invio successivo. Ad esempio, se hai configurato il reindirizzamento alla pagina di successo dopo l’invio con esito positivo, tale reindirizzamento non verrà eseguito in caso di invio parziale del modulo. |
Esempi:
//LpRuntime methods
window.disableDefaultFormSubmission = true // Flag to disable the default submission flow.
lpRuntime.submitForm(formSubmissionData); // This will trigger the default form submission handling like redirecting to error or success page.
lpRuntime.submitFormPartial(formSubmissionData,{ // This will not trigger the default submission handling.
beforeSubmit : callback,
onFailure : failureCallback, // Custom onFailureCallback - will be used in partial submission of form.
onSuccess : successCallback // Custom onSuccessCallback - will be used in partial submission of form.
})
Nome | Descrizione |
---|---|
getFormData | Questo metodo può essere utilizzato per ottenere formData sotto forma di un oggetto JSON. Questo oggetto può essere passato a submitForm per l’invio del modulo. |
Esempio:
let formData = lpRuntime.getFormData(); // Method to generate formdata
lpRuntime.submitForm(formData);
<html>
<body>
// Enter HTML body here.
<script>
if(window.lpRuntime){
console.log('got runtime',lpRuntime);
init(window.lpRuntime);
}else{
window.addEventListener('lpRuntimeReady',function(e){
init(window.lpRuntime);
});
}
// Here validate the function is checking if the checkbox is selected. This method should return true if you want form submission.
function validateForm(){
return document.querySelector('.spectrum-Checkbox-input').checked;
}
function init(lpRuntime){
lpRuntime.hooks.addBeforeSubmitHook(function(){
return validateForm(); // This method should return true if you want to proceed with submission.
})
}
</script>
</body>
</html>
Ad esempio, si dispone di un modulo con più caselle di controllo sulla pagina. Selezionando una casella di controllo, si desidera salvare tali dati nel backend senza attendere che l’utente faccia clic sul pulsante di invio.
<html>
<body>
<form>
<input type='checkbox' value="1" name="name1"/>
<input type='checkbox' value="2" name="name2"/>
<input type='checkbox' value="3" name="name3"/>
<input type='checkbox' value="4" name="name4"/>
</form>
<script>
window.disableDefaultFormSubmission=true;
window.addEventListener('lpRuntimeReady',function(e){
init(e.detail)
}
function init(lpRuntime){
window.getElementByTagName('input').addEventListener('change',function(e){
let formData = lpRuntime.getFormData();
lpRuntime.submitFormPartial(formData);
})
}
</script>
</body>
</html>
Utilizzando JavaScript puoi aggiungere ascoltatori di campi di input e allegare un trigger di chiamata di analisi personalizzato.
<html>
<body>
<form>
<input type='checkbox' value="1" name="name1"/>
<input type='checkbox' value="2" name="name2"/>
<input type='checkbox' value="3" name="name3"/>
<input type='checkbox' value="4" name="name4"/>
</form>
<script>
window.disableDefaultFormSubmission=false;
window.addEventListener('lpRuntimeReady',function(e){
init(e.detail)
}
function init(lpRuntime){
window.getElementByTagName('input').addEventListener('change',function(e){
//trigger analytics events
})
}
</script>
</body>
</html>
<html>
<body>
<form>
<input type='checkbox' value="1" name="name1"/>
<div class="hiddenInput hidden">
<input type='text' name="name2"/>
</div>
</form>
<script>
window.disableDefaultFormSubmission=false;
window.addEventListener('lpRuntimeReady',function(e){
init(e.detail)
}
function init(lpRuntime){
window.getElementByTagName('input').addEventListener('change',function(e){
document.querySelector('.hiddenInput').toggleClass('hidden');
})
}
</script>
</body>
</html>