dp6/analytics-helper

A library meant to assist during an Google Analytics implementation

analytics-helper's Issues

Problemas no "analyticsHelper.getDataLayer" quando a chave é "null"

O GTM, por si só, possui um bug onde, se a chave "pai" for null, a função google_tag_manager[ID].dataLayer.get executará com erro:

Precisamos adicionar um try { } catch () {} ao redor dessa função, retornando undefined no catch. Não precisamos realizar maiores tratamentos, pois é esperado que retorne "undefined" nesse caso.

Dependendo de como utilizado, não enviado dataQuality.selector no disparo

Dependendo da sintaxe utilizada o campo do dataLayer que envia o seletor para o data quality pode não ser enviado. Isso acontece quando utilizada a sintaxe abaixo:

helper.wrap('[seletor]').on('[evento]', function(){})

Hit Callback não funcionando corretamente

A função atual é:

function() {
return function(){
analyticsHelper.internal._sentPageview = true;
while(analyticsHelper.options.eventQueue.length){
analyticsHelper.event.apply(analyticsHelper, analyticsHelper.options.eventQueue.shift());
}
};
}

E a função ajustada pelo Paulo é

function() {
return function(){
analyticsHelper.internal._sentPageview = true;
while(analyticsHelper.internal._eventQueue.length){
analyticsHelper.event.apply(analyticsHelper, analyticsHelper.internal._eventQueue.shift());
}
};
}

Extrair o objeto "Options" para uma variável do GTM

Muitas vezes desejamos alterar algumas opções do Helper, como modo debug ou nome do Helper, com o método atual sendo chamar a função analyticsHelper.init() com as novas opções. Aproveitar a variável do tipo "JS" do GTM para as opções evitaria ter que chamar esse método ou modificar o fonte do helper, facilitando o uso.

Retornar um Atributo de um Elemento

Seria interessante se no helper interno do wrap, tivesse uma função para retornar um atributo de um determinado elemento, por exemplo:

helper.wrap(this).attr('name'); e retornaria o valor do nome do elemento.

Helper sobrescrevendo propriedades internas

O problema:

Em alguns casos como quando o template de pageview e a tag de Helper rodam paralelamente, existe a possibilidade do disparo acontecer mais rápido que o carregamento do Helper, causando reset nas propriedades internas. O mesmo ocorre quando alguma tag coloca como dependência o Helper.

A Solução:

A melhor solução é a validação se o helper já foi carregado. Só instanciando quando não houver sido instanciado anteriormente, além de colocar o helper como dependencia do template de pageview. Além disso é necessário configurar a tag do Helper como once per page.

Exemplo do código:

function expose() {
  if (!window[options.helperName]) {
    window[options.helperName] = {
      internal: internal,
      init: init,
      pageview: pageview,
      event: event,
      sanitize: sanitize,
      getDataLayer: getDataLayer,
      cookie: cookie,
      getKey: getKey,
      safeFn: safeFn,
      fn: fn,
    };
  };
}

Explicar como configurar o GTM

Existem algumas configurações que devem ser feitas no GTM para que a implementação funcione.

Por exemplo: é necessário configurar o hitcallback do pageview do GA para que a eventQueue funcione, isto não é mencionado na documentação atual.

O arquivo README-GTM-CONFIG.md está vazio, imagino que o objetivo dele seria explicar estes detalhes.

trocar o getKey pelo Delve

Biblioteca: https://github.com/developit/dlv

Closest retornando Array

Seria mais prático que ele retornasse um wrap dos elementos encontrados.

Exemplos de casos

Atualmente:

  // Necessário inserir o retorno do closest em um novo wrap
  helper.wrap(helper.wrap('a').closest('div')).text()

Ideal:

  // Acessar diretamente a função text do retorno do closest
  helper.wrap('a').closest('div').text()

Seletores baseados na tag body

Na documentação, não há uma especificação de como montar um seletor partindo de body, o que é indicado uma vez que algumas tags podem ser dinâmicas e apenas serem criadas depois da Janela Carregada, por exemplo.

Um exemplo de função se baseando no body seria:
analyticsHelper.safeFn('Nome da Tag', function (helper){
helper.on('change', '.seletor', function () {
//sua função
}, 'body');
});

Documentar a opção "Capitalized" no .text()

https://github.com/DP6/analytics-helper/blob/master/README-GTM-REFERENCE.md#textopt

Erro ao chamar a função sanitize sem o options

analyticsHelper.sanitize('teste'); // isso causa um bug de undefined, pois o segundo argumento 'options' não existe.

Erro no exemplo da função wrap()

No exemplo:

// Múltiplos elementos
analyticsHelper.safeFn('Nome da Tag', function(helper){
  var urls = helper.wrap('a');
  console.log(urls); // Array de nodes a.
});

Este console.log printaria o objeto wrap e não o array. Para printar o array, o exemplo seria o seguinte:

// Múltiplos elementos
analyticsHelper.safeFn('Nome da Tag', function(helper){
  var urls = helper.wrap('a');
  console.log(urls.nodes); // Array de nodes a.
});

helper.log (Inclusão de comando para console.log não quebrar em navegs IE8 ou anterior)

Remover branch 1.0.0

@fpzero faz isso?

Documentação de configuração do GTM

Precisamos criar a documentação de configuração do GTM para uso do Helper,

Necessário flag para analyticsHelper.event()

Em alguns casos, foi necessário enviar o evento mesmo sem pageview, facilitaria se houvesse como enviar uma flag para que este evento específico não precisasse entrar na fila e sim disparar direto, mesmo sem pv.

As funções que utilizam a jQuery como intermediário não retornam objetos wrapper

Funções como a closest não retornam um objeto helper quando a jQuery está disponível, e sim um objeto jQuery. Isto pode causar erros nos casos em que o ambiente mude sem avisos.

Ambiente sem jQuery:
helper.wrap('a').closest('div').nodes // NodeList []

Ambiente com jQuery:
helper.wrap('a').closest('div').nodes // undefined

Adequação para regras de cookies (SameSite)

Acrescentar no helper.cookie a opção do samesite

Referência da MDN

Mensagens de erro relacionadas a cookies:

Cookie “myCookie” rejected because it has the “SameSite=None” attribute but is missing the “secure” attribute.

This Set-Cookie was blocked because it had the "SameSite=None" attribute but did not have the "Secure" attribute, which is required in order to use "SameSite=None".

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://[secure]@github.com/DP6/analytics-helper.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Permitir que SafeFn retorne o valor da função interna

Eu gostaria de ser capaz de aproveitar a segurança do SafeFn para fazer operações perigosas, nas quais eu gostaria de retornar o valor para a função mãe.

Exemplo:

1 - Diretamente
var imgName = analyticsHelper.safeFn('Função', function(helper) {
return helper.wrap('img').nodes[0].src.split('/').pop();
});

2 - Indiretamente
var getImageName = analyticsHelper.safeFn('Função', function(helper) {
return helper.wrap('img').nodes[0].src.split('/').pop();
}, { immediate: false });
var imgName = getImageName();

Adicionar commitizen com dependência para padronização da escrita do commit message

Para usufruir do versionamento automático é necessário adotar uma convenção para escrita do commit message, optamos pela Angular Commit Message Conventions, por possuir uma categorização simples das alterações.

Optamos por utilizar a biblioteca https://github.com/commitizen/cz-cli, por já utilizamos a stack do Node.JS no projeto.

Os commit precisam ser feitos agora utilizando o comando git cz

Erro ao passar um wrapper para um wrapper

Precisamos fazer com que um wrapper que receba um novo wrapper simplesmente retorne ele mesmo.

Avisar quando um evento entra para o eventQueue

dar um log('info') sempre que guardar um evento no eventQueue ao invés de falhar silenciosamente

Replicar a coleta para o GA4

Incluir uma opção de duplicar a coleta do helper.event (e helper.pageview em alguns casos) para o GA4.
Por ex:

• Replicar a coleta de ecommerce, transformando a ação (ecommerce.[action]) no nome do evento do ga4 e mandando o objeto items para a camada de dados (podemos aproveitar o template do Simo ou pelo menos parte do código);
• Replicar a coleta de eventos de interação enviando um evento: "interaction", com os parâmetros category, action e label.

Utilização de variável GA Settings

No container template, as Tags de UA Analytics possuem configurações do Google Analytics distintas. A melhor forma de configurar o GA no entanto, seria através da utilização de uma variável de configuração do GA chamada GA Settings.