Utilizzare JavaScript personalizzato in una pagina di destinazione lp-custom-js
Puoi definire il contenuto della pagina di destinazione utilizzando un JavaScript personalizzato. Se ad esempio è necessario eseguire uno stile avanzato o si desidera aggiungere comportamenti personalizzati alle pagine di destinazione, è possibile creare controlli personalizzati ed eseguirli in Journey Optimizer.
Inserire il codice JavaScript in una pagina di destinazione
Per inserire un JavaScript personalizzato nel contenuto della pagina di destinazione, puoi effettuare le seguenti operazioni:
-
Importa il contenuto HTML esistente quando inizi a creare il contenuto e 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 il componente di contenuto HTML nell'area di lavoro e mostra il codice sorgente per aggiungere il JavaScript al componente. Scopri come utilizzare il componente HTML in questa sezione.
-
Immetti o incolla il codice JavaScript direttamente in Progettazione contenuti. Scopri come programmare il tuo contenuto in questa sezione.
Per visualizzare correttamente la pagina di destinazione, utilizza la sintassi seguente come descritto nelle sezioni seguenti.
Inizializzazione del codice
Per inizializzare il codice JavaScript, è necessario utilizzare l'evento lpRuntimeReady. Questo evento verrà attivato dopo la corretta inizializzazione della libreria. Il callback verrà eseguito con l'oggetto lpRuntime per esporre il metodo della libreria e gli hook.
LpRuntime sta per "Runtime pagina di destinazione". Questo oggetto è l’identificatore della libreria principale. Verranno esposti hook, metodi di invio dei moduli e altri metodi di utilità che possono essere utilizzati 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.
}
Hook
Gli hook consentono di 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 venga effettivamente inviato.
Di seguito sono riportati gli hook che puoi utilizzare:
Esempio:
//LpRuntime hooks
lpRuntime.hooks.addBeforeSubmitHook(function(){
// Add your validation logic here.
});
Invio di moduli personalizzati
I metodi elencati di seguito vengono utilizzati per eseguire l’invio di moduli personalizzati.
disableDefaultFormSubmission su true.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.
})
Funzione utility
formData sotto forma di 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);
Casi d’uso
Caso d’uso 1: aggiunta della convalida prima dell’invio del modulo
<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>
Caso d’uso 2: invio parziale di moduli
Ad esempio, nella pagina è presente un modulo con più caselle di controllo. Selezionando una casella di controllo, si desidera salvare i dati nel backend senza attendere che l’utente faccia clic sul pulsante Invia.
<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>
Caso d’uso 3: tag di analisi personalizzati
Utilizzando JavaScript puoi aggiungere listener 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>
Caso d’uso 4: forma dinamica
<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>