Dicas de Edição Avançada de Landing Page

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.

Twitter

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>

Facebook

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>

LinkedIn

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>

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:

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>

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.

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>