Aparência
1. Copie o seletor do elemento que você deseja remover.
2. Em Edição Avançada > CSS da aba Editor da Landing Page, cole o seguinte código (substituindo o valor do seletor pelo correto):
#SELETOR-DO-ELEMENTO-QUE-DESEJA-REMOVER {
display: none !important;
}
3. Para remover mais de um elemento, use o exemplo abaixo:
#SELETOR-DO-PRIMEIRO-ELEMENTO-QUE-DESEJA-REMOVER,
#SELETOR-DO-SEGUNDO-ELEMENTO-QUE-DESEJA-REMOVER {
display: none !important;
}
1. Acesse o Google Fonts e encontre a fonte que deseja utilizar. Adicione-a à sua coleção clicando no botão +;
2. Clique na barra preta na parte inferior da tela, 1 Family Selected. Nela, você vai poder customizar as propriedades da fonte de acordo com sua preferência;
3. Copie todo o código na seção EMBED > STANDARD.
4. Na sua Landing Page, em Edição Avançada > JavaScript em HEAD, cole o código que você copiou:
5. Após definir qual elemento da sua Landing Page terá a fonte definida, cole o código de CSS fornecido pelo Google Fonts na seção de CSS da Edição Avançada da Landing Page. Não se esqueça de substituir o valor do seletor pelo correto:
O código vai ficar da seguinte maneira:
#SELETOR-DO-ELEMENTO-QUE-DESEJO-ALTERAR-A-FONTE {
font-family: 'Lato', sans-serif;
}
6. Clique no botão Salvar.
Favicons são pequenas imagens (geralmente 16x16 px) que identificam a página do navegador. Via de regra, as empresas utilizam seus logotipos. Para definir o favicon da sua Landing Page, basta seguir os passos abaixo:
1. Na aba Editor da sua Landing Page, selecione Edição Avançada > JavaScript em HEAD, insira o código a seguir, substituindo COLE-SUA-URL-AQUI pela URL da sua imagem:
<link rel="shortcut icon" type="image/png" href="COLE-SUA-URL-AQUI">
Se a imagem estiver no seu computador, você deve hospedá-la em algum site (como o PostImage) e obter uma URL.
2. Clique em Salvar.
1. Na Edição Avançada de JavaScript em BODY da Landing Page, adicione o código abaixo:
<script src='https://s3-sa-east-1.amazonaws.com/rdstation-static/js/jquery.countdown.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
data = 'ANO/MÊS/DIA HH:MM:SS';
$('#SELETOR-DA-LANDING-PAGE').prepend('<div id="timer"></div>');
$("#timer").countdown(data, function(event) {
$(this).html('<p>'+ event.strftime('%D dias %H:%M:%S') + '</p>');
});
});
</script>
2. Substitua SELETOR-DA-LANDING-PAGE pelo seletor do elemento onde o contador deve aparecer. Saiba como aqui;
3. Substitua ANO/MÊS/DIA HH:MM:SS pela data a ser usada no contador. Por exemplo, se você quiser que o seu contador vá até o dia 5 de janeiro de 2018 às 18h 36min e 40seg, a linha do código ficará assim:
data = '2018/01/05 18:36:40';
4. Agora, na aba Editor, em Edição Avançada > CSS, adicione o seguinte código:
#timer {
width: 100%;
height: auto;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 0px;
margin-left: 0px;
}
#timer p {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
5. Clique no botão Salvar.
Você pode realizar customizações na aparência do contador editando o código de CSS adicionado. O plugin utilizado nestes códigos é o jQuery Countdown.
No Editor HTML da seção onde os botões devem ser inseridos, adicione o código abaixo para cada uma das redes sociais.
Substitua o trecho http://urldalp.com em cada código pela URL a ser compartilhada.
1. Em Edição Avançada > JavaScript em Body adcione o script abaixo:
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
2. Depois, na seção onde o botão será adicionado, clique em Editor HTML e adicione:
<a class="twitter-share-button" href="https://twitter.com/intent/tweet"> Tweet</a>
1. Em Edição Avançada > JavaScript em Body adcione o script abaixo:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.11";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2. Depois, na seção onde o botão será adicionado, clique em Editor HTML e substitua o trecho http://urldalp.com em cada código pela URL a ser compartilhada:
<div class="fb-share-button" data-href="https://urldalp.com.br" data-layout="button_count"> </div>
1. Em Edição Avançada >JavaScript em Body adicione o script abaixo:
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: pt_BR</script>
2. Depois, na seção onde o botão será adicionado, clique em Editor HTML e substitua o trecho http://urldalp.com em cada código pela URL a ser compartilhada:
<script type="IN/Share" data-url="urldalp.com.br" data-counter="right"></script>
Formulário
Em Edição Avançada > JavaScript em BODY, insira o código abaixo. No exemplo, estamos mudando o enunciado do campo name para Nome Completo:
<script type="text/javascript">
$( document ).ready(function() {
$('#name').parent().children('label').html('Nome completo');
});
</script>
Perceba que o campo Nome é citado como #name no código. Segue abaixo os demais termos a serem usados nos campos padrão:
Nome do campo | Como usar no código |
---|---|
Nome | name |
Empresa | company |
Cargo | job_title |
Telefone | personal_phone |
Celular | mobile_phone |
Website | website |
Estado | uf |
Exemplo:
1. Em Edição Avançada > JavaScript em BODY da sua Landing Page, adicione o seguinte código:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>
<script type="text/javascript">
(function () {
$(document).ready(function () {
$('#ID_DO_SEU_CAMPO').mask('00/00/0000');
});
}());
</script>
2. Substitua o valor ID_DO_SEU_CAMPO pelo identificador do campo que deve ter a máscara. Mantenha o # antes do ID.
Para obter o ID do seu campo, pré-visualize sua Landing Page e clique com o botão direito do mouse no campo desejado. Escolha a opção Inspecionar.
Procure pelo termo id e copie exatamente o que está escrito dentro do parâmetro.
O campo usado deve ser do tipo Campo aberto - Texto.
1. Em Edição Avançada > JavaScript em BODY da sua Landing Page, adicione o seguinte código:
<script type="text/javascript" src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var elements = $('#ID_DO_SEU_CAMPO');
elements.mask('000.000.000.000.000,00', {reverse: true});
});
</script>
2. Substitua o valor ID_DO_SEU_CAMPO pelo correto. Mantenha o # antes do ID.
Para obter o ID do seu campo, pré-visualize sua Landing Page e clique com o botão direito do mouse no campo desejado. Escolha a opção Inspecionar.
Procure pelo termo ID e copie exatamente o que está escrito dentro do parâmetro.
Para alterar a mensagem da caixa de seleção, basta colar o código abaixo em Edição Avançada > JavaScript em BODY da Landing Page. Troque o valor TEXTO-DA-CAIXA-DE-SELECAO para o texto desejado.
<script type="text/javascript">
$("select option").each(function() {
if (!$(this).val()) {
$(this).text("TEXTO-DA-CAIXA-DE-SELECAO");
}
});
</script>
O texto dos botões de Conversão Social (imagem abaixo) podem ser alterados via JavaScript nas Landing Pages.
Copie o código abaixo e cole em Edição Avançada > JavaScript em BODY da sua Landing Page:
<script type="text/javascript">
$( document ).ready(function() {
$('.btn-google span').text("TEXTO-BOTAO-GOOGLE");
$('.btn-facebook span').text("TEXTO-BOTAO-FACEBOOK");
$('.btn-linkedin span').text("TEXTO-BOTAO-LINKEDIN");
});
</script>
Não se esqueça de alterar os valores TEXTO-BOTAO-GOOGLE, TEXTO-BOTAO-FACEBOOK e TEXTO-BOTAO-LINKEDIN para o texto desejado.
<script type="text/javascript">
(function () {
$(document).ready(function () {
$('SELETOR_DO_CAMPO').attr('checked',true);
});
}());
</script>
Análises
2. Crie o Pixel do Facebook no Gerenciador de Anúncios;
3. Insira o Pixel do Facebook na página de agradecimento e ative ele.
Copie o código do Pixel e, na aba Editor da sua págna de agradecimento, cole-o em Edição avançada > JavaScript em HEAD:
Não se esqueça de salvar e republicar a página!
Para ativar o Pixel, acesse o link da sua página de agradecimento e depois verifique na página do Pixel se o seu Status mudou para Ativo:
Pronto! Seu Pixel foi instalado e está pronto para monitorar as conversões.
1. Crie um público personalizado do seu site no Facebook seguindo os passos deste material;
2. Copie o código do pixel fornecido pelo Facebook:
3. Insira este código na seção de Javascript em HEAD da Edição Avançada da sua Landing Page;
4. Depois, determine o nome desse público, qual URL ele visitou (ou o site inteiro) e a quantidade de dias após a visita que deve durar sua campanha de remarketing. No campo URL insira o endereço da sua Landing Page:
Feito! Agora o seu público está criado. Basta voltar ao menu Públicos, selecionar a opção que você acabou de criar e montar seus anúncios focados para essas pessoas.
1. Configure seu Código de Acompanhamento do Ads;
2. Crie uma página de agradecimento para cada Landing Page em que você quer utilizar o código;
3. Insira o código fornecido pelo Ads na área de Edição Avançada > JavaScript em HEAD da sua Página de Agradecimento. Não se esqueça de salvar e republicar a Landing Page.
Outros
Para direcionar uma Landing Page para outras páginas, é preciso adicionar uma meta tag com um refresh (atualização) na página que vai receber o redirecionamento.
1. Na aba Editor da Landing Page, em Edição Avançada > JavaScript em HEAD, cole o seguinte código:
<meta http-equiv="refresh" content="0;URL='URL-DE-REDIRECIONAMENTO'">
2. Troque o valor URL-DE-REDIRECIONAMENTO pelo link da página que você deseja redirecionar o usuário.
Para fazer estas alterações, é preciso utilizar o script abaixo. Basta colocá-lo na área Edição Avançada > JavaScript em BODY da aba Editor:
<script>
$('#conversion-form').submit(function() {
var email = $("#email").val();
$("input[name='redirect_to'").val($("input[name='redirect_to'").val() + "?email=" + email);
});
</script>