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_ID
para 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_AGENT
Parametros 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_ID
do 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>