Como acrescentar mensagem ao comprador através do Google Tag Manager

Esse material descreve como criar um alerta na tela de checkout quando necessário passar alguma informação ao comprador antes de concluir a compra.

1. Acessar https://tagmanager.google.com/.

2. Criar uma nova conta ou criar um novo contêiner na conta existente:

3. Acessar o contêiner criado (verificar se esse contêiner é da mesma URL que será alterada, ex.: SITEDOCLIENTE.COM.BR)

4. Crie uma Nova Tag conforme o exemplo abaixo:

5. Adicionar um título para a Tag criada e definir em qual página você deseja que a mensagem seja apresentada. Ex. produto, carrinho, checkout, etc ...

6. Acessar configuração da tag: Adicionar o tipo tag > HTML personalizado e inserir o código substituindo a mensagem da linha 116 (destacada no código) pela desejada, lembrando que esse script possui uma aparência padrão que pode ser editada conforme desejado: 

<style> .checkout-alert{  display: flex;  position: fixed;  padding: 0;  background: #fff;  top: 40px;  left: 40px;  right: 40px;  border-radius: 5px;  overflow: hidden;  justify-content: space-between;  align-content: stretch;  box-shadow: 3px 3px 5px 0px rgb(0 0 0 / 10%);  z-index: 2; }
 .checkout-alert::after{  width: 0;  height: 2px;  display: block;  background: #00357A;  border-radius: 2px;  top: 0;  left: 0;  content: '';  position: absolute;  transition: all 5s ease-in-out; }
 .checkout-alert.start-animation::after{  width: 100%; }
 .checkout-alert .checkout-alert-icon{  width: 50px;  display: flex;  justify-content: center;  align-items: center;  background: #D9F5FF; }
.checkout-alert .checkout-alert-icon i{  width: 30px;  height: 30px;  display: flex;  align-items: center;  justify-content: center;  border: solid 2px #00357A;  border-radius: 50%;  color: #00357A; }
 .checkout-alert .checkout-alert-message{  padding: 20px;  flex: 1 1 auto; }
.checkout-alert .checkout-alert-message h4{  margin: 0 0 5px;  text-align: left;  color: #1C1C1C;  font-size: 16px;  font-weight: 700; }
.checkout-alert .checkout-alert-message p{  margin: 0;  font-size: 14px;  color: #9B9B9B;  font-weight: 500;  text-align: left; }
 .checkout-alert .close-checkout-alert{  width: 40px;  height: 40px;  border: none;  font-size: 20px;  background: none;  color: #999; }
 .checkout-alert-background{  width: 100%;  height: 100%;  display: block;  position: fixed;  top: 0;  left: 0;  background: rgba(0,0,0,40%); }
</style> 
<script> /* Modal / Checkout */ setTimeout(function(){  function closeAlert() {    document.querySelector('.checkout-alert').remove()    document.querySelector('.checkout-alert-background').remove()  }   document.querySelector(".checkout-alert").classList.add('start-animation');  document.querySelector(".checkout-alert-background").addEventListener("click", closeAlert);  document.querySelector(".close-checkout-alert").addEventListener("click", closeAlert); }, 500); 
setTimeout(function(){  closeAlert(); }, 5000); /* Modal / Checkout */ </script> 
<div class="checkout-alert">  <div class="checkout-alert-icon"><i class="fa fa-info" aria-hidden="true"></i></div>    <div class="checkout-alert-message">    <h4>Título do alert</h4>    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  </div>   <button class="close-checkout-alert">    <i class="fa fa-times" aria-hidden="true"></i>  </button> </div> <div class="checkout-alert-background"></div>

7. Após incluir o código basta salvar, aplicar um título e publicar sua Tag:

8. Pronto a mensagem após alguns minutos estará disponível em seu site.