Använda anpassad JavaScript på en landningssida lp-custom-js
Du kan definiera innehållet på landningssidan med anpassade JavaScript. Om du till exempel behöver utföra avancerad formatering eller om du vill lägga till anpassade beteenden på dina landningssidor, kan du skapa egna kontroller och köra dem i Journey Optimizer.
Infoga JavaScript-kod på en landningssida
Om du vill infoga anpassad JavaScript i startsidans innehåll kan du antingen göra följande:
-
Importera befintligt HTML-innehåll när du börjar skapa ditt innehåll och markera filen som innehåller din egen JavaScript-kod. Lär dig hur du importerar innehåll i det här avsnittet.
-
Utforma landningssidan från grunden eller från en sparad mall. Dra och släpp innehållskomponenten HTML på arbetsytan och visa källkoden för att lägga till JavaScript i komponenten. Lär dig hur du använder HTML-komponenten i det här avsnittet.
-
Ange eller klistra in JavaScript-kod direkt i innehållsdesignern. Lär dig hur du kodar ditt eget innehåll i det här avsnittet.
För att landningssidan ska visas korrekt använder du följande syntax enligt beskrivningen i avsnitten nedan.
Kodinitiering
Om du vill initiera din JavaScript-kod måste du använda händelsen lpRuntimeReady. Den här händelsen utlöses när biblioteket har initierats. Återanropet körs med objektet lpRuntime för att visa biblioteksmetoden och krokarna.
LpRuntime står för"Landing page Runtime". Det här objektet är huvudidentifieraren för biblioteket. Den visar kopplingar, formuläröverföringsmetoder och andra verktygsmetoder som kan användas i anpassade JavaScript.
Exempel:
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.
}
Hookar
Med kopplingar kan du bifoga en metod under formulärskickningens livscykel. Du kan till exempel använda kopplingar för att utföra någon formulärvalidering innan formuläret skickas.
Här är de krokar du kan använda:
Exempel:
//LpRuntime hooks
lpRuntime.hooks.addBeforeSubmitHook(function(){
// Add your validation logic here.
});
Skräddarsy formulärinlämning
De metoder som anges nedan används för att skicka anpassade formulär.
disableDefaultFormSubmission anges till true.Exempel:
//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.
})
Verktygsfunktion
formData i form av ett JSON-objekt. Det här objektet kan skickas till submitForm för att skicka formulär.Exempel:
let formData = lpRuntime.getFormData(); // Method to generate formdata
lpRuntime.submitForm(formData);
Användningsfall
Användningsfall 1: Lägga till validering före inlämning av formulär
<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>
Användningsfall 2: Delvis inskickande av formulär
Du har till exempel ett formulär med flera kryssrutor på sidan. När du markerar en kryssruta vill du att dessa data ska sparas i backend-objektet utan att användaren behöver vänta på att han/hon ska klicka på skicka-knappen.
<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>
Användningsfall 3: Anpassade analystaggar
Med JavaScript kan du lägga till avlyssnare för indatafält och koppla en anpassad anropsutlösare för analys.
<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>
Användningsfall 4: Dynamisk blankett
<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>