-
Cria uma nova tag escolhendo a opção Custom HTML Tag;
-
Configure a tag com o código abaixo:
<script type="text/javascript">
if({{visitorLoginState}}){
var user = {};
var email = {{visitorContactInfo}}[0];
user.email = email;
user.id = dito.generateID(email);
if({{visitorContactInfo}}[1]){
var name = {{visitorContactInfo}}[1];
if(name.indexOf('*') == -1){
if({{visitorContactInfo}}[2]){
name += ' ' + {{visitorContactInfo}}[2];
}
user.name = name;
}
}
if({{visitorDemographicInfo}}){
var gender = {{visitorDemographicInfo}}.gender;
if(gender == 'M'){
user.gender = 'male';
}else if(gender == 'F'){
user.gender = 'female';
}
}
dito.identify(user);
}
</script>
-
Clique no link Advanced Settings;
-
No campo Tag firing priority, coloque o número 990.
-
No 3º passo, escolha a opção More;
-
Na lista de Triggers, clique em New;
-
Selcione a opção Custom Event;
-
No campo Event name, digite gtm.load
-
Clique em Save Trigger;
-
Dê um nome para seu trigger: VTEX - Page load;
-
Salve sua tag.
Configuração das variáveis
-
Na aba Variables, vá até a seção User-Defined Variables e clique no botão New;
-
Selecione a opção Data Layer Variable;
-
No campo Data Layer Variable Name, digite visitorLoginState;
-
Dê um nome para sua variável: visitorLoginState
-
Salve sua variável.
Repita o mesmo processo para o restantes das variáveis: visitorDemographicInfo, visitorContactInfo.
Enviando dados adicionais dos usuários
Por padrão, a VTEX NÃO coloca alguns dados do usuário no dataLayer para que possa ser consumido pelo Google Tag Manager.
Dessa forma, a única maneira encontrada até o momento para conseguirmos essas informações é lendo diretamente do HTML da página.
ATENÇÃO! As tags descritas abaixo podem não funcionar se a VTEX mudar o HTML de suas páginas.
Enviando informações do usuário no Checkout
-
Cria uma nova tag escolhendo a opção Custom HTML Tag;
-
Configure a tag com o código abaixo:
<script type="text/javascript">
var $email = $('#client-pre-email');
var $firstName = $('#client-first-name');
var $lastName = $('#client-last-name');
var $cpf = $('#client-document');
var $phone = $('#client-phone');
var $newsletter = $('#opt-in-newsletter');
var $neighborhood = $('.neighborhood').text();
var $city = $('.city').text();
var $state = $('.state').text();
var $street = $('.street').text();
var $number = $('.number').text();;
var $info = $('.complement').text();
if($neighborhood.length == 0 && $('.ship-info-text span').length == 3)
$neighborhood = $('.ship-info-text span')[0].innerHTML;
if($city.length == 0 && $('.ship-info-text span').length == 3)
$city = $('.ship-info-text span')[1].innerHTML;
if($state.length == 0 && $('.ship-info-text span').length == 3)
$state = $('.ship-info-text span')[2].innerHTML;
if($street.length == 0 && $('.ship-street-text span').length > 0)
$street = $('.ship-street-text span')[0].innerHTML;
if($number.length == 0)
$number = $('#ship-number').val();
if($info.length == 0)
$info = $('#ship-more-info').val();
var $address = [$street, $number, $info].join(' ');
if($email.val().length){
var user = {
id: dito.generateID($email.val()),
email: $email.val(),
data: {
opt_in_newsletter: ($newsletter.is(':checked') ? 'Sim' : 'Não')
}
};
if($cpf.val().indexOf('*') == -1){
user.name = $firstName.val() + ' ' + $lastName.val();
user.data.cpf = $cpf.val();
user.data.telefone = $phone.val();
if($city.length > 0)
user.location = $city;
if($address.trim().length > 0)
user.data.endereco = $address;
if($neighborhood.length > 0)
user.data.bairro = $neighborhood;
if($state.length > 0)
user.data.uf = $state;
}
dito.identify(user);
}
</script>
-
No 3º passo, escolha a opção More;
-
Na lista de Triggers, clique em New e selecione a opção Custom Event;
-
No campo Event name, digite shipping;
-
Clique em Save Trigger;
-
Dê um nome para seu trigger: VTEX - Checkout - Shipping;
-
Salve sua tag;
-
Repita o processo (passo 2) para para o evento payment;
Enviando informações do usuário na página Minha conta
-
Cria uma nova tag escolhendo a opção Custom HTML Tag;
-
Configure a tag com o código abaixo:
<script type="text/javascript">
window.ditoAsyncInit = function(){
var name = $('.profile-detail-display h5').html();
var email = $('.profile-detail-display-email').html();
var gender = $('.profile-detail-display-gender .data').html();
var birthday = $('.profile-detail-display-date-of-birth .data').html();
var phone = $('.profile-detail-display-telephone .data').html();
var businessPhone = $('.profile-detail-display-cellphone .data').html();
var cpf = $('.profile-detail-display-cpf .data').html();
var genders = {
'Masculino': 'male',
'masculino': 'male',
'Feminino': 'female',
'feminino': 'female'
};
if(birthday != 'n/d'){
var splittedBirthday = birthday.split('/');
var formattedBirthday = splittedBirthday[2] + '/' + splittedBirthday[1] + '/' + splittedBirthday[0];
}
var userCustomData = {}
if(phone != 'n/d') userCustomData.telefone = phone;
if(businessPhone != 'n/d') userCustomData.telefone_comercial = businessPhone;
if(cpf != 'n/d') userCustomData.cpf = cpf;
var user = {
email: email,
data: JSON.stringify(userCustomData)
};
if(name && name != email) user.name = name;
if(gender != 'n/d') user.gender = genders[gender];
if(formattedBirthday) user.birthday = formattedBirthday;
dito.Api.put('login', '/users/' + dito.generateID(email), {
id_type: 'id',
user_data: user
});
}
</script>
-
No 3º passo, escolha a opção Some Pages;
-
Na lista de Páginas, clique em New e selecione a opção Custom Event;
-
Preencha com as seguintes informações: VTEX - Minha Conta - url path - equals - /account
-
Clique em Save;
-
Salve sua tag.