Usar o JavaScript personalizado em uma página de aterrissagem lp-custom-js
Você pode definir o conteúdo da página de aterrissagem usando o JavaScript personalizado. Por exemplo, se você precisa executar estilos avançados ou adicionar comportamentos personalizados às páginas de aterrissagem, é possível criar seus próprios controles e executá-los no Journey Optimizer.
Inserir código do JavaScript em uma página de aterrissagem
Para inserir JavaScript personalizado no conteúdo da página de aterrissagem, faça o seguinte:
-
Importe conteúdo existente do HTML ao começar a criar seu conteúdo e selecione o arquivo que inclui seu código JavaScript personalizado. Saiba como importar conteúdo nesta seção.
-
Projete a landing page do zero ou com base em um template salvo. Arraste e solte o componente de conteúdo do HTML na tela e mostre o código-fonte para adicionar seu JavaScript ao componente. Saiba como usar o componente HTML em esta seção.
-
Insira ou cole o código JavaScript diretamente no designer de conteúdo. Saiba como codificar seu próprio conteúdo nesta seção.
Para que a landing page seja exibida corretamente, use a seguinte sintaxe conforme descrito nas seções abaixo.
Inicialização de código
Para inicializar seu código JavaScript, você deve usar o evento lpRuntimeReady. Esse evento será acionado após a inicialização bem-sucedida da biblioteca. O retorno de chamada será executado com o objeto lpRuntime para expor o método e os ganchos da biblioteca.
LpRuntime significa "Tempo de Execução da Página de Aterrissagem". Esse objeto é o identificador principal da biblioteca. Ele expõe ganchos, métodos de envio de formulário e outros métodos de utilitário que podem ser usados no JavaScript personalizado.
Exemplo:
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.
}
Ganchos
Usando ganchos, você pode anexar um método durante o ciclo de vida do envio do formulário. Por exemplo, você pode usar ganchos para executar alguma validação de formulário antes que o formulário seja realmente enviado.
Estes são os ganchos que você pode usar:
Exemplo:
//LpRuntime hooks
lpRuntime.hooks.addBeforeSubmitHook(function(){
// Add your validation logic here.
});
Envio de formulário personalizado
Os métodos listados abaixo são usados para executar envios de formulários personalizados.
disableDefaultFormSubmission como true.Exemplos:
//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.
})
Função de utilitário
formData no formato de um objeto JSON. Este objeto pode ser passado para submitForm para envio de formulário.Exemplo:
let formData = lpRuntime.getFormData(); // Method to generate formdata
lpRuntime.submitForm(formData);
Casos de uso
Caso de uso 1: Adição de validação antes do envio do formulário
<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 de uso 2: envio parcial do formulário
Por exemplo, você tem um formulário com várias caixas de seleção na página. Ao marcar qualquer caixa de seleção, você deseja que esses dados sejam salvos no backend sem esperar que o usuário clique no botão Enviar.
<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 de uso 3: tags personalizadas do Analytics
Usando o JavaScript, você pode adicionar ouvintes de campos de entrada e anexar um acionador de chamada de análise personalizado.
<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 de uso 4: Formulário dinâmico
<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>