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 pelo CLIENT_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ável EXTERNAL_REFERRER, ex: referer=EXTERNAL_REFERRER
user_agent * Serve para passar as informações de acesso do usuário com a variável USER_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ção CLIENT_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]

Segue exemplo de formulário abaixo com todos os campos.

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>

LIVE DEMO


Formulário envio teste

Sim Não