Para instalar UTMS em sua página, você precisará seguir o tutorial abaixo:
1. Acesse o editor de páginas;
2. Em seguida, clique em “Javascript & CSS”;
3. Clique para “Adicionar” um novo código;
4. Escolha um nome para seu código, selecione a opção “Funcionamento” e adicione no campo de texto todo o código abaixo;
<script>
function URLToArray(url) {
var request = {};
if (url.indexOf('?') !== -1) {
var pairs = url.substring(url.indexOf('?') + 1).split('&');
for (var i = 0; i < pairs.length; i++) {
if (!pairs[i]) continue;
var pair = pairs[i].split('=');
request[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
}
}
return request;
}
/* Campos para integração */
function CamposUTM(modal) {
if (modal == undefined) { modal = false; }
/* Formulários */
let formularios = Array.from(document.querySelectorAll((modal ? '.gpc_modal ' : '') + 'form'));
utm = URLToArray(window.location.href);
let link_usar = '';
if (Object.entries(utm).length) {
for (var [key, value] of Object.entries(utm)) { link_usar += key + '=' + value + '&'; }
if (link_usar.length) { link_usar = link_usar.substr(0, (link_usar.length - 1)); }
}
formularios.map(formulario => {
/* Controle de get utm_source */
$(formulario).find('.gpc_campo').each(function (i, campo) {
let valor = $(campo).val();
if (valor.indexOf('{') != -1 && valor.indexOf('}') != -1) {
let valor_limpo = valor.replace('{', '').replace('}', '');
utm.hasOwnProperty(valor_limpo) ? $(campo).val(utm[valor_limpo]) : $(campo).val('');
}
});
let botao = $(formulario).find('.gpc_botao');
if (
botao.attr('gpc-link') !== undefined &&
botao.attr('gpc-link') !== ''
) {
let concatenar = '?';
if (botao.attr('gpc-link').indexOf('?') !== -1) { concatenar = '&'; }
botao.attr('gpc-link', botao.attr('gpc-link') + concatenar + link_usar);
}
});
/* Botões */
if (link_usar != '') {
/* Habilitar para boões expecificos */
let botoes = Array.from(document.querySelectorAll((modal ? '.gpc_modal ' : '') + '.link_externo'));
botoes.map(link => {
/* Controle de get utm_source */
$(link).each(function (i, href) {
let concatenar = '?';
if ($(href).attr('href').indexOf('?') !== -1) { concatenar = '&'; }
$(href).attr('href', $(href).attr('href') + concatenar + link_usar);
});
});
}
}
CamposUTM();
$('body').on('click', '.link_popup', function () {
setTimeout(() => {
CamposUTM(true);
}, 200);
});
</script>CSS
Agora, é necessário criar os campos no formulário para que pegue as informações da conversão.
5. Dê um clique no formulário e em seguida clique em “Configurar”;
6. Na aba de Configurações (no lado direito da tela), clique em “Adicionar campo”;
7. Selecione como Tipo de campo a opção “Campo oculto”, e adicione o campo UTM que deseja receber;
8. Informe o “Título do campo”;
9. E entre “{}” (chaves) informe o valor da UTM. (Por exemplo, se deseja que o campo receba o valor que irá vir do “utm source”, o valor do campo oculto deve ser “{utm_source}”;
Por fim, salve os campos adicionados!
Você não pode conectar o formulário no activecampaign até ter colocado o código da UTM e ter criado os campos ocultos no formulário.
