您可以使用自定义JavaScript定义登陆页面内容。 例如,如果您需要执行高级样式设置,或者希望将自定义行为添加到登陆页面,则可以构建自己的控件并在中执行这些控件 Journey Optimizer.
要将自定义JavaScript插入登陆页面内容,您可以执行以下操作:
开始创建内容时导入现有HTML内容,然后选择包含自定义JavaScript代码的文件。 了解如何导入内容 在此部分中.
从头开始或从保存的模板设计登陆页面。 拖放 HTML 将内容组件放入画布并显示源代码以将JavaScript添加到组件中。 了解如何在中使用HTML组件 本节.
将JavaScript代码直接输入或粘贴到内容设计器中。 了解如何为自己的内容编码 在此部分中.
当前,在以下情况下,您无法显示JavaScript正在使用 预览登陆页面.
要正确显示登陆页面,请使用以下语法,如下节所述。
要初始化JavaScript代码,您必须使用 lpRuntimeReady
事件。 成功初始化库后,将触发此事件。 回调将使用 lpRuntime
对象以公开库方法和挂接。
LpRuntime
其中,表示“Landing page Runtime”。 此对象是主库标识符。 它会公开挂接、表单提交方法以及在自定义JavaScript中使用的其他实用工具方法。
示例:
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.
}
通过使用挂接,您可以在表单提交的生命周期中附加方法。 例如,您可以使用挂接在实际提交表单之前执行某些表单验证。
以下是您可以使用的挂钩:
名称 | 描述 |
---|---|
addBeforeSubmitHook | 在提交表单之前调用的自定义挂接。 返回true以继续提交,否则返回false以阻止提交。 |
addOnFailureHook | 在表单提交失败时调用的自定义挂接。 |
Addonsuccessfhook | 在成功提交表单时将调用的自定义挂接。 |
示例:
//LpRuntime hooks
lpRuntime.hooks.addBeforeSubmitHook(function(){
// Add your validation logic here.
});
下面列出的方法用于执行自定义表单提交。
由于表单提交由自定义JavaScript处理,因此需要通过设置全局变量来显式禁用默认提交 disableDefaultFormSubmission
到 true
.
名称 | 描述 |
---|---|
submitform | 此方法将提交表单,并处理后提交流程。 |
submitFormPartial | 此方法还将提交表单,但将跳过后提交流程。 例如,如果您在成功提交后配置了重定向到成功页面,那么在提交部分表单的情况下,将不会发生此重定向。 |
示例:
//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.
})
名称 | 描述 |
---|---|
getFormData | 此方法可用于获取 formData 以JSON对象的形式提供。 此对象可以传递到 submitForm 用于提交表单。 |
示例:
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>
例如,您有一个表单,该页面上有多个复选框。 选中任何复选框时,您希望将此数据保存到后端,而无需等待用户单击提交按钮。
<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>
使用JavaScript,您可以添加输入字段的侦听器并附加自定义分析调用触发器。
<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>