GTM

Sobre

Plugin que contém métodos para impressão de datalayers do GTM.

Dependências

Não há.

Instalação

• Instale o app através do seu terminal

npm install @wapstore/gtm

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/gtm": "^1.0.5"
}

Agora a loja está apta para o uso da aplicação.

Uso

O componente de GTM pode ser inserido em qualquer lugar da pasta "components" ou "pages". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Exemplo

-Este é um exemplo da aplicação no arquivo default.vue para comportamentos de GTM:

<template>
  ...
</template>
<script>
  watch: {
    dadosPageAtual (newVal, oldVal) {
      if (newVal !== oldVal) this.$gtmGetData();
    },
    user (newVal, oldVal) {
      if (newVal.nomeRazao !== oldVal.nomeRazao) {
        this.$gtmEventUserProfile(this.user);
      }
    }
  },
  mounted () {
    // Chama GTM
    if (this.dadosPageAtual) this.$gtmGetData();

    if (this.$store.state.user) {
      this.$gtmEventUserProfile(this.$store.state.user);
    }
  }
</script>
<style>
  ...
</style>

Métodos

Geral

Métodos gerais que imprimem dataLayers de itens como vitrines e banners. A recomendação é utilizar esses métodos no mounted do componente.

| Método | Descrição | Exemplo de uso | |---|---|---| | $gtmBannerEvent 1.0.5 | Método responsável por adicionar os dataLayers de banners. | this.$gtmBannerEvent(nomeBanner, dataDeInicio, linkDeDestino); | | $gtmBannerPromoView 1.0.5 | Método responsável por adicionar os dataLayers de visualização de banners. | this.$gtmBannerPromoView(banners); | | $gtmDataLayerGetAtributoUnicoProduto 1.0.5 | Método responsável por adicionar os dataLayers de atributo único. | this.$gtmDataLayerGetAtributoUnicoProduto(produto); | | $gtmVitrineDataLayer 1.0.5 | Método responsável por adicionar os dataLayers das vitrines. | this.$gtmVitrineDataLayer(tituloDaVitrine, produtoDaVitrine); | | $gtmProductClick 1.0.5 | Método responsável por adicionar os dataLayers de cliques em produtos. | this.$gtmProductClick(produtoClicado); | | $gtmEventAddToCart 1.0.5 | Método responsável por adicionar os dataLayers de adição de produtos no carrinho. | this.$gtmEventAddToCart(produtoAdicionado); | | $gtmEventRemoveFromCart 1.0.5 | Método responsável por adicionar os dataLayers de remoção de produtos do carrinho. | this.$gtmEventRemoveFromCart(produtoRemovido); | | $gtmEvent 1.0.5 | Método responsável por adicionar os dataLayers personalizados. | this.$gtmEvent(dados); | | $gtmEventUserProfile 1.0.5 | Método responsável por adicionar informações do usuário no site no dataLayers. | this.$gtmEventUserProfile(user); |

Página

Métodos de página são aqueles que geram os dataLayers da página atual. Um detalhe importante é que esses métodos devem ser executados no client pois adicionam os dataLayers no Window, então evite seu uso dentro de hooks como o created, asyncData ou fetch.

| Método | Descrição | Exemplo de uso | Dependências | |---|---|---|---| | $gtmGetData 1.0.5 | Método responsável por coletar os dados para gerar o dataLayer da página. em um uso padrão, é o único método que precisa ser chamado, pois após a coleta de dados existe uma chamada para o método $setPagina que identifica a página atual e define o dataLayer correto. | this.$gtmGetData(); | Esse método é dependente da variável dadosPageAtual encontrada normalmente em $store.state.dadosPageAtual. | | $setPagina 1.0.5 | Método responsável por identificar a página atual e chamar o método correspondente para a página. | this.$setPagina(dadosDaPagina); | - | | $setPaginaHome 1.0.5 | Método responsável por definir os dataLayers da Home. | this.$setPaginaHome(); | - | | $setPaginaListagem 1.0.5 | Método responsável por definir os dataLayers da Listagem. | this.$setPaginaListagem(dadosDaListagem); | - | | $setPaginaBusca 1.0.5 | Método responsável por definir os dataLayers da Busca. | this.$setPaginaBusca(dadosDaBusca); | - | | $setPaginaDetalheProduto 1.0.5 | Método responsável por definir os dataLayers do Detalhe do Produto. | this.$setPaginaDetalheProduto(dadosDoDetalhe); | - | | $setPaginaDefault 1.0.5 | Método responsável por definir os dataLayers de qualquer página além das citadas anteriormente. | this.$setPaginaDefault(dadosDaPagina); | - |