Como Personalizar Landing Pages

A utilização de Landing Pages é bastante comum quando falamos em Marketing Digital, é nelas que direcionamos nossas campanhas. Diferente do propósito do website aqui o objetivo é conversão pura. Não existe essa de navegação e experiência do usuário, uma Landing Page precisa ter performance, ou seja, carregar rapidamente e converter.

Recente eu desenvolvi uma Landing Page e queria que ela pudesse se adaptar de acordo com a campanha que eu criasse, a mesma URL mas com cores, fontes, headlines e textos diferentes. E não estou falando de Teste A/B, pois não adianta testar uma página que possui várias campanhas diferentes direcionando tráfego para ela.

Para fazer tal coisa eu optei usar parâmetros na URL e Seletores CSS. E nesse artigo vou ensinar, em um breve tutorial, como personalizar a mesma Landing Page para várias campanhas.

Exemplo de campanha normal (clique no banner):

Exemplo de campanha personaliza:

Para cada banner eu posso personalizar a mesma URL adicionando outros parâmetros ao final da URL. Reparem que a mesma URL, a única diferenção são os parâmetros:

https://www.devmedia.com.br/trial/?origem=devacademy

https://www.devmedia.com.br/trial/

Usando parâmetros + seletores CSS

O código é muito simples se você dominar um pouco os seletores da jQuery. A página precisa fazer requisição a biblioteca da jQuery.

var url_string = window.location.href; // requisição da URL e atribui em url_string
var url = new URL(url_string); // retorna um objeto do tipo URL e atribui em url
var param_name = url.searchParams.get("origem"); //pega o parametro e atribui em param_name
  if(param_name == "devacademy") {  // verificar se o valor (param_name) é igual a devacademy
 // as alterações vem aqui
  }

Para fazer as alterações basta definir parâmetros que você queira usar, por exemplo, eu optei por origem=devacademy. Agora vamos fazer algumas alterações, por exemplo, mudar a fonte da headline.

$('#title').style.fontFamily = "Bangers, cursive"; // seleciona o elemento por id e mudar seu estilo de fonte

Ficaria assim:

var url_string = window.location.href;
var url = new URL(url_string); 
var param_name = url.searchParams.get("origem");
  if(param_name == "devacademy") { 
    
    $('#title').style.fontFamily = "Bangers, cursive";

  }

Podemos mudar a cor do título, descrição e alterar a imagem de fundo.

var url_string = window.location.href;
var url = new URL(url_string); 
var param_name = url.searchParams.get("origem");
  if(param_name == "devacademy") {

    $('#title').style.fontFamily = "Bangers, cursive";
    $('#fundo').style.backgroundImage = "url('images/fundo-academy.png')";
    $('#description, #title').css("color", "black");
    
  }

jQuery:

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

Precisa estar localizado acima do script.

Agora você pode direcionar a mesma URL para públicos diferentes e a mesma poderá estar personalizada para cada público, por exemplo, a Landing Page pode ter aspectos diferentes de acordo com o sexo do usuário que clicou no seu anúncio.

É possível carregar esses script via Google Tag Manager, adeus dependência do setor de TI. Eu também descobri que você pode fazer tudo isso sem código, basta acessar uma ferramenta chamada Google Optimize, e escolher a opção Personalização.

Se gostou do artigo, deixe seu comentário aí.

Referências:

• Seletores da jQuery
• Seletores CSS no Google Tag Manager