Aangepaste JavaScript gebruiken in een openingspagina lp-custom-js
U kunt de inhoud van de bestemmingspagina definiëren met behulp van aangepaste JavaScript. Als u bijvoorbeeld geavanceerde opmaak moet toepassen of aangepaste gedragingen wilt toevoegen aan uw bestemmingspagina's, kunt u uw eigen besturingselementen maken en deze uitvoeren in Journey Optimizer .
JavaScript-code invoegen in een bestemmingspagina
Als u aangepaste JavaScript wilt invoegen in bestemmingspagina-inhoud, kunt u het volgende doen:
-
Importeer bestaande HTML-inhoud wanneer u begint met het maken van uw inhoud en selecteer het bestand dat uw aangepaste JavaScript-code bevat. Leer hoe te om inhoud in deze sectie in te voeren.
-
Ontwerp de openingspagina helemaal zelf of op basis van een opgeslagen sjabloon. Sleep de inhoudscomponent HTML naar het canvas en toon de broncode om de JavaScript aan de component toe te voegen. Leer hoe te om de component van HTML in te gebruiken deze sectie .
-
Typ of plak de JavaScript-code rechtstreeks in de inhoudsontwerper. Leer hoe te om uw eigen inhoud in deze sectie te coderen.
Gebruik de volgende syntaxis zoals beschreven in de onderstaande secties om de openingspagina correct weer te geven.
Codeinitialisatie
Als u de JavaScript-code wilt initialiseren, moet u de gebeurtenis lpRuntimeReady gebruiken. Deze gebeurtenis wordt geactiveerd nadat de bibliotheek is geïnitialiseerd. De callback wordt uitgevoerd met het lpRuntime -object om de bibliotheekmethode en -haken zichtbaar te maken.
LpRuntime staat voor "Landing page Runtime". Dit object is de belangrijkste bibliotheekid. Het zal haken, de methodes van de vormvoorlegging, en andere nutsmethodes blootstellen die in douane JavaScript kunnen worden gebruikt.
Voorbeeld:
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.
}
Hooks
Met haken kunt u een methode toevoegen tijdens de levenscyclus van het verzenden van het formulier. U kunt bijvoorbeeld haken gebruiken om een formuliervalidatie uit te voeren voordat het formulier daadwerkelijk wordt verzonden.
Hier zijn de haken die u kunt gebruiken:
Voorbeeld:
//LpRuntime hooks
lpRuntime.hooks.addBeforeSubmitHook(function(){
// Add your validation logic here.
});
Aangepaste formulierverzending
De hieronder vermelde methoden worden gebruikt voor het verzenden van aangepaste formulieren.
disableDefaultFormSubmission in te stellen op true .Voorbeelden:
//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.
})
Hulpfunctie
formData op te halen in de vorm van een JSON-object. Dit object kan worden doorgegeven aan submitForm voor het verzenden van formulieren.Voorbeeld:
let formData = lpRuntime.getFormData(); // Method to generate formdata
lpRuntime.submitForm(formData);
Gebruiksscenario’s
Hoofdlettergebruik 1: validatie toevoegen vóór verzending van formulier
<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>
Hoofdlettergebruik 2: gedeeltelijke verzending van formulier
U hebt bijvoorbeeld een formulier met meerdere selectievakjes op de pagina. Als u een selectievakje inschakelt, wilt u dat deze gegevens op de achtergrond worden opgeslagen zonder dat de gebruiker op de verzendknop hoeft te klikken.
<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>
Hoofdlettergebruik 3: aangepaste analysetags
Met JavaScript kunt u listeners van invoervelden toevoegen en een aangepaste trigger voor de analytische aanroep koppelen.
<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>
Hoofdlettergebruik 4: dynamische vorm
<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>