[DICA] Efeito Manada

Faaala meu polvo. Mais uma dica pra vc implementar na sua LP. dessa vez, um scriptzinho maroto que eu gosto de usar em algumas paginas para impor uma falsa impressão de prova social. Nos tests que fiz isso costuma aumentar minhas taxas de conversão em aproximadamente 3% ~ 7% (So lembrando que Minhas LP´s costumeiramente convertem 45%).

Basicamente, o que faço aqui é explorar o efeito manada, fazendo aparecer um pop-up a cada "X" segundos falando "fulano acabou de se inscrever" ou "fulano compartilhou essa pagina com X pessoas". E tudo isso acontece de forma aleatória, o que gera mais sensação de veracidade.

 

Chega de papo e vamos ao tutorial de hoje :P

 

crie uma linha na sua LP e coloque um elemento HTML. Dentro deste elemento cole o seguinte codigo:

 

==================

     <div class="modal-popup-social-guilherme-yohan-generator">

    <button class="close-button-social-guilherme-yohan-generator">&times;</button>

    <div class="content-social-guilherme-yohan-generator">

      <div id="nome-sobrenome" class="nome-destaque"></div>

      <div id="mensagem" class="mensagem"></div>

    </div>

  </div>

==================

 

agora, em edição avançada, vai em JS em Body e cole esse aqui que é o "coração" da nossa marmotagem. Note que ha um banco de nomes e sobrenomes. Esse script combina aleatoriamente essas informações para gerar o resultado final.

 

==================

<script>

 

// TU É CURIOSO HEYN KKKKK

// ME SEGUE LA NO LINKEDIN

// https://www.linkedin.com/in/guilherme-yohan-2ab33761/

 

  document.addEventListener('DOMContentLoaded', function() {

    const popup = document.querySelector('.modal-popup-social-guilherme-yohan-generator');

    const closeButton = document.querySelector('.close-button-social-guilherme-yohan-generator');

     

    const nomes = ['Mariana', 'Ana', 'Camila', 'Juliana', 'Larissa', 'Beatriz', 'Isabela', 'Fernanda', 'Aline', 'Tatiane',

    'Patrícia', 'Vanessa', 'Letícia', 'Raquel', 'Amanda', 'Carolina', 'Bruna', 'Natália', 'Renata', 'Elaine',

    'Thaís', 'Daniela', 'Sabrina', 'Tatiana', 'Luciana', 'Jéssica', 'Priscila', 'Gabriela', 'Cristiane', 'Cíntia',

    'Simone', 'Débora', 'Juliane', 'Alessandra', 'Michele', 'Kelly', 'Nicole', 'Fabiana', 'Eliane', 'Adriana',

    'Luana', 'Paula', 'Rebeca', 'Flávia', 'Bianca', 'Tainá', 'Carla', 'Helena', 'Roberta', 'Mirela',

    'Silvia', 'Lorena', 'Andressa', 'Cláudia', 'Jaqueline', 'Giselle', 'Esther', 'Yasmin', 'Talita', 'Clarissa',

    'Melissa', 'Evelyn', 'Ingrid', 'Noemi', 'Brenda', 'Emanuelle', 'Valéria', 'Lívia', 'Vera', 'Joana',

    'Lucas', 'Thiago', 'Rafael', 'Gustavo', 'Bruno', 'Daniel', 'Felipe', 'André', 'Caio', 'Henrique',

    'Vinícius', 'Fábio', 'Rodrigo', 'Leandro', 'Marcelo', 'Fernando', 'Pedro', 'Eduardo', 'Mateus', 'Igor',

    'Diego', 'Murilo', 'Ricardo', 'Júlio', 'Alexandre', 'Luiz', 'Vitor', 'Samuel', 'Hugo', 'Jorge'];

     

    const sobrenomes = ['Silva', 'Santos', 'Oliveira', 'Souza', 'Pereira', 'Lima', 'Costa', 'Ferreira', 'Rodrigues', 'Almeida',

    'Nascimento', 'Araujo', 'Melo', 'Barbosa', 'Ribeiro', 'Carvalho', 'Castro', 'Martins', 'Rocha', 'Dias',

    'Teixeira', 'Fernandes', 'Gonçalves', 'Vieira', 'Moreira', 'Cardoso', 'Correia', 'Monteiro', 'Pinto', 'Cavalcante',

    'Moura', 'Sales', 'Freitas', 'Machado', 'Campos', 'Batista', 'Ramos', 'Farias', 'Borges', 'Viana',

    'Andrade', 'Coelho', 'Marques', 'Antunes', 'Neves', 'Bezerra', 'Reis', 'Xavier', 'Tavares', 'Miranda',

    'Mendes', 'Barros', 'Cunha', 'Chaves', 'Aguiar', 'Nogueira', 'Pacheco', 'Guimarães', 'Amaral', 'Queiroz',

    'Soares', 'Peixoto', 'Bittencourt', 'Camargo', 'Simões', 'Lopes', 'Beltrão', 'Assis', 'Moraes', 'Passos',

    'Rangel', 'Siqueira', 'Leite', 'Seixas', 'Serra', 'Rezende', 'Rezende', 'Quevedo', 'Braga', 'Garcia',

    'Martinez', 'Fonseca', 'Teles', 'Torres', 'Henriques', 'Castilho', 'Meireles', 'Abreu', 'Barreto', 'Gomes',

    'Figueiredo', 'Domingues', 'Esteves', 'Bueno', 'Araújo', 'Veiga', 'Parente', 'Lacerda', 'Porto', 'Carmo'];

     

    function getRandomName() {

      const randomNome = nomes[Math.floor(Math.random() * nomes.length)];

      const randomSobrenome = sobrenomes[Math.floor(Math.random() * sobrenomes.length)];

      return {

        nomeCompleto: `${randomNome} ${randomSobrenome}`,

        nome: randomNome,

        sobrenome: randomSobrenome

      };

    }

     

    function getRandomMessage() {

      // Escolhe aleatoriamente entre as duas mensagens

      if (Math.random() < 0.5) {

        // Mensagem de inscrição

        if (Math.random() < 0.3) {

          return "acabou de se inscrever";

        } else {

          const minutos = Math.floor(Math.random() * 14) + 2;

          return `se inscreveu a <span class="tempo-destaque">${minutos} minutos</span>`;

        }

      } else {

        // Mensagem de compartilhamento

        const pessoas = Math.floor(Math.random() * 15) + 2;

        return `compartilhou este evento com <span class="tempo-destaque">${pessoas} pessoas</span>`;

      }

    }

 

    function showModal() {

      const pessoa = getRandomName();

      const mensagem = getRandomMessage();

       

      document.getElementById('nome-sobrenome').textContent = pessoa.nomeCompleto;

      document.getElementById('mensagem').innerHTML = mensagem;

       

      popup.style.display = 'flex';

       

      setTimeout(() => {

        popup.classList.add('slide-in-social-guilherme-yohan-generator');

      }, 10);

       

      setTimeout(closeModal, 6000);

    }

     

    function closeModal() {

      popup.classList.remove('slide-in-social-guilherme-yohan-generator');

      popup.classList.add('fade-out-social-guilherme-yohan-generator');

       

      setTimeout(() => {

        popup.style.display = 'none';

        popup.classList.remove('fade-out-social-guilherme-yohan-generator');

         

        setTimeout(showModal, Math.floor(Math.random() * 8000) + 2000);

      }, 500);

    }

     

    closeButton.addEventListener('click', function(e) {

      e.stopPropagation();

      closeModal();

    });

 

    // Inicia o ciclo automaticamente

    setTimeout(showModal, Math.floor(Math.random() * 7000) + 3000);

  });

</script>

 

 

==================

 

Por fim, cole isso aqui no CSS da pagina (continua nos comentarios)

 


  • Continuação (por causa do limite de caracteres)

     

    ==================

     

     .modal-popup-social-guilherme-yohan-generator {

          position: fixed;

          left: 10px;

          bottom: -150px;

          width: 200px;

          height: 100px;

          background-color: #ffffff;

          border-radius: 8px;

          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

          padding: 10px;

          z-index: 1000;

          display: none; /* Inicia oculto */

          flex-direction: column;

          opacity: 1;

          transition: bottom 0.5s ease-out, opacity 0.5s ease-in;

          pointer-events: auto;

        }

         

        .modal-popup-social-guilherme-yohan-generator.slide-in-social-guilherme-yohan-generator {

          bottom: 10px;

        }

         

        .modal-popup-social-guilherme-yohan-generator.fade-out-social-guilherme-yohan-generator {

          opacity: 0;

        }

         

        .close-button-social-guilherme-yohan-generator {

          position: absolute;

          top: 5px;

          right: 5px;

          background: none;

          border: none;

          font-size: 16px;

          cursor: pointer;

          color: #999;

          padding: 5px;

          z-index: 1001;

        }

         

        .close-button-social-guilherme-yohan-generator:hover {

          color: #333;

        }

         

        .content-social-guilherme-yohan-generator {

          flex-grow: 1;

          display: flex;

          flex-direction: column;

          justify-content: center;

          text-align: center;

          padding-top: 10px;

        }

         

        .nome-destaque {

          font-weight: bold;

          font-size: 16px;

          margin-bottom: 5px;

        }

         

        .mensagem {

          font-size: 14px;

        }

         

        .tempo-destaque {

          font-weight: bold;

        }

     

        @media (max-width: 480px) {

          .modal-popup-social-guilherme-yohan-generator {

            width: 180px;

            left: 10px;

          }

        }

     

    ==================

     

    depois de colar isso aqui, clique em "aplicar"

    Enquanto vc estiver no modo editor, vai aparecer um X e mais nada. Ignore.

    Publique a pagina e esta pronto seu Danoninho :)

     

    Esse script vai ficar gerando aquelas mensagens como se tivessem milhões de pessoas se inscrevendo e compartilhando sua pagina.

     

     

    Se gostou dessa dica, me segue la no Linkedinho

    https://www.linkedin.com/in/guilherme-yohan/

    Expandir publicação
    • Consegue sim. Nessa parte: (marquei com // AQUI)

       

        function getRandomMessage() {

            // Escolhe aleatoriamente entre as duas mensagens

            if (Math.random() < 0.5) {

              // Mensagem de inscrição

              if (Math.random() < 0.3) {

                return "acabou de se inscrever"; // AQUI

              } else {

                const minutos = Math.floor(Math.random() * 14) + 2;

                return `se inscreveu a <span class="tempo-destaque">${minutos} minutos</span>`; // AQUI

              }

            } else {

              // Mensagem de compartilhamento

              const pessoas = Math.floor(Math.random() * 15) + 2;

              return `compartilhou este evento com <span class="tempo-destaque">${pessoas} pessoas</span>`; // E AQUI

            }

          }

      Expandir publicação