Integração CRM
Registra Acesso
Registra Lead
Sobre o Registra Acesso
O registra acesso é importante para registrar a referência de onde o usuário acessou a aplicação pela primeira vez, EX: se usuário entrar pelo ADWORDS, assim mesmo se o usuário sair da aplicação e depois de uma semana acessar novamente por DIRETO ou ORGANICO o registra acesso mantera como ADWORDS. Para registrar o acesso do cliente na aplicação é necessário inserir o código abaixo depois da tag< body >, assim a aplicação sempre que for carregada vai fazer uma requisição para a API (https://services.reweb-corp.com/register/postAccess) informando o link de referência de onde o usuário acessou a aplicação.
Código para inserir o Registra Acesso
Inserir depois da tag < body >
<div style="position: absolute; height: 1px; width: 1px;">
<amp-list width="auto"
height="1"
layout="fixed-height"
src="https://services.reweb-corp.com/register/postAccess?token=CLIENT_ID(amp_client_id)&token_amp=CLIENT_ID(amp_client_id)&referer=EXTERNAL_REFERRER&user_agent=USER_AGENT">
</amp-list>
</div>
Entendendo o código e seus parâmetros:
token_amp * Serve para passar a hash que o amp gera peloCLIENT_IDpara cada usuário que acessa a aplicação, ex:token_amp=CLIENT_ID(amp_client_id)
referer * Serve para passar a referencia de onde o usuário acessou a aplicação com a variávelEXTERNAL_REFERRER, ex:referer=EXTERNAL_REFERRER
user_agent * Serve para passar as informações de acesso do usuário com a variávelUSER_AGENT, ex:user_agent=USER_AGENTParametros com * são obrigatórios
Foi necessário usar o< amp-list >para poder fazer a requisição para o registra acesso, porém o AMP nos obriga a definir um tamanho no< amp-list >para poder ser feita essa requisição, por esse motivo o código foi feito dentro de uma< div >com posição que não afete outros elementos.
Sobre o Registra Lead
O registra lead serve para enviar as informações preenchidas pelo formulário para o CRM pela API (https://api.amp.reweb.io/api/lead/register), e com a ajuda do registra acesso agora conseguimos captar a primeira origem. Para que isso seja possível precisamos enviar alguns campos inputs obrigatórios no formulário.
token_amp * Serve para capturar o token amp do usuário com a funçãoCLIENT_IDdo amp.
email ou telefone * Serve para capturar a informação de contato do usuário.
captation * Serve para capturar o meio de captação do formulário.
amp_redirect_to * Realiza o redirect após a submissão do formulário.
amp_redirect_condition * Condicional para realizar o redirect, o valor deve estar no formato nome_campo[valor_do_campo_selecionado]. Ex: simular_financiamento[Sim]
HTML do formulário para Registrar Lead
<form method="post" class="mbr-form" action-xhr="https://api.amp.reweb.io/api/lead/register" target="_top">
<input type="hidden" name="token_amp" value="CLIENT_ID(amp_client_id)" data-amp-replace="CLIENT_ID">
<input type="hidden" name="captation" value="SITE_LP_AMP" />
<!--TITULO DO FORM-->
<div class="form-group">
<h3 class="vw-title-form">titulo</h3>
</div>
<!-- NOME -->
<div class="form-group">
<input name="nome" type="text" placeholder="Nome" required="true">
</div>
<!-- NOME COMPLETO -->
<div class="form-group">
<input name="nome" type="text" placeholder="Nome completo" required="true">
</div>
<!-- SEXO -->
<div class="form-group">
<select name="sexo" required>
<option selected>Sexo</option>
<option value="maculino">Maculino</option>
<option value="feminino">Feminino</option>
</select>
</div>
<!-- CPF -->
<div class="form-group">
<input name="cpf" type="text" placeholder="CPF" mask='000-000-000.00' required="true">
</div>
<!-- CNPJ -->
<div class="form-group">
<input name="cnpj" type="text" placeholder="CNPJ" mask='00.000.000/0000-00' required="true">
</div>
<!-- EMAIL -->
<div class="form-group">
<input name="email" type="email" placeholder="Email" required="true">
</div>
<!-- TELEFONE -->
<div class="form-group">
<input type="tel" name="telefone" placeholder="Celular" mask='(00)_0000-00009' required="true">
</div>
<!-- ESTADOS -->
<div class="form-group">
<select id="estado" name="estado">
<option selected>Estado</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
<option value="EX">Estrangeiro</option>
</select>
</div>
<!-- CIDADE -->
<div class="form-group">
<input name="cidade" type="text" placeholder="Cidade" required="true">
</div>
<!-- UNIDADE -->
<div class="form-group">
<select name="select" required>
<option selected>Unidade</option>
<option value="1X">unidade 1</option>
<option value="2X">unidade 2</option>
<option value="3X">unidade 3</option>
</select>
</div>
<!-- DATA -->
<div class="form-group">
<input name="data" type="date" id="" placeholder="data" required="" class="user-invalid valueMissing">
</div>
<!-- HORA -->
<div class="form-group">
<select name="" id="" required>
<option value="">Horario</option>
<option value="">7:00am</option>
<option value="">7:30am</option>
<option value="">8:00am</option>
<option value="">8:30am</option>
<option value="">9:00am</option>
<option value="">9:30am</option>
<option value="">10:00am</option>
<option value="">10:30am</option>
<option value="">11:00am</option>
<option value="">11:30am</option>
<option value="">12:00m</option>
<option value="">12:30pm</option>
<option value="">1:00pm</option>
<option value="">1:30pm</option>
<option value="">2:00pm</option>
<option value="">2:30pm</option>
<option value="">3:00pm</option>
<option value="">3:30pm</option>
<option value="">4:00pm</option>
<option value="">4:30pm</option>
<option value="">5:00pm</option>
<option value="">5:30pm</option>
<option value="">6:00pm</option>
</select>
</div>
<!-- MODELO DO VEICULO -->
<amp-list height="50" src="{{apiBaseURL}}/api/vehicles/dealers/{{apiBaseCars}}" single-item>
<template type="amp-mustache">
<div class="form-group">
<select name="modelo" id="">
{% verbatim %}
{{#results}}
<option value="{{name}}">{{name}}</option>
{{/results}}
{% endverbatim %}
</select>
</div>
</template>
</amp-list>
<!-- MODELO DO VEICULO SELECIONADO -->
<div class="form-group">
<input name="modelo" type="text" placeholder="Modelo:" value="teste{{name}}" readonly required>
</div>
<!-- QUILOMETRAGEM -->
<div class="form-group">
<input name="quilometragem" type="number" placeholder="Quilometragem" required="true">
</div>
<!-- PLACA -->
<div class="form-group">
<input name="placa" type="text" placeholder="Placa" required="true">
</div>
<!-- parcelas -->
<div class="form-group">
<select name="select" required>
<option selected>parcelas</option>
<option value="1X">1X</option>
<option value="2X">2X</option>
<option value="3X">3X</option>
</select>
</div>
<!-- MENSAGEM -->
<div class="form-group">
<textarea name="mensagem" cols="30" rows="5" placeholder="Mensagem" required></textarea>
</div>
<div class="politica">
<label for="checkbox">
<input type="checkbox" name="acepto_politica" checked value="si" id="checkbox">
<a href="#" on="tap:AMP.setState({openModal: false})">
Aceito politicas de privacidade
</a>
</label>
</div>
<div class="alert-info" submitting>
<span class="alert-info-span">
Enviando formulario...
</span>
</div>
<div class="alert-danger" submit-error>
<template type="amp-mustache">
<span class="alert-danger-span">
{{ message}}
</span>
</template>
</div>
<div class="alert-info" submit-success>
<span class="alert-info-span">
formulario enviado...
</span>
</div>
<div class="form-group flex-align-horizontal-center ">
<button class="btn" type="submit">Enviar</button>
</div>
</form>
CSS
.mb-30 {
margin-bottom: 30px;
}
.mt-30 {
margin-top: 30px;
}
* {
outline: none;
transition: 0.3s;
}
article.form_contacto {
margin: 0 auto;
}
.form_contacto form {
background-color: #252525;
}
.form_contacto form {
margin: 0px auto;
padding-top: 10px;
}
form {
background-color: #575758;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
max-width: 320px;
position: relative;
padding: 30px 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
border: 1px solid transparent;
}
.form-group {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.form-group h3 {
width: 100%;
text-align: center;
color: #fff;
margin: 0px;
padding: 5px 0px;
}
.vw-title-form {
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
}
.form-group select, .form-group input {
background-color: #fff;
width: 100%;
padding: 0px;
padding-left: 15px;
height: 40px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid white;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #000;
font-family: open-sans;
}
.form-group textarea {
height: 85px;
}
.form-group textarea {
background-color: #fff;
font-family: open-sans;
padding: 0px;
padding: 15px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid white;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #000;
width: 100%;
}
.politica {
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 10px 0;
}
.politica label {
font-size: 12px;
columns: #fff;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}
.politica label input {
margin-right: 5px;
}
form a {
color: #fff;
}
.form-group button {
padding: 10px 15px;
width: 150px;
margin-top: 5px;
border: none;
color: #fff;
font-weight: 600;
font-size: 16px;
}
.btn {
background: #CE0031;
cursor: pointer;
padding: 15px 20px;
color: #fff;
border: none;
border-radius: 4px;
font-weight: 600;
letter-spacing: 1.2px;
transition: 0.3s ease;
}
form button {
margin: 0 auto;
}
.alert-info {
color: #3d9df7;
}
.alert-info {
color: #000;
text-align: center;
}
.alert-info-span {
width: 100%;
display: block;
background: #dff0d8;
padding: 3px 0;
text-align: center;
border: 1px solid #1785eb;
border-radius: 4px;
}
COMPONENTS
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>