Como configurar o Google Analytics em aplicações React usando o HtmlWebpackPlugin

Olá pessoal recentemente passei por uma situação aqui no trabalho, que até faz parte do dia-a-dia de muitos, que é simplesmente configurar o snippet do Google Analytics na sua aplicação.

Bom, até aí nada demais, uma aplicação usando React poderíamos fazer do jeito tradicional, que é copiar e colar o snippet fornecido pelo Google Analytics dentro do index.html ou quem sabe até usar um node package como o React-GA. O problema era que eu precisava usar duas propriedades diferentes para cada ambiente, uma propriedade para o ambiente de homologação e outra para o ambiente de produção.

Os ambientes eram setados via node scripts conforme o exemplo abaixo:

package.json

E recuperados pelo webpack.config.js, também conforme o exemplo abaixo:

webpack.config.js apenas mostrando o que importa para este artigo

Como podem ver acima, estou usando o HtmlWebpackPlugin que usa um template HTML pra gerar o index.html final, logo não teria como eu usar o snippet do Google Analytics no template hardcoded.

Foi ai que procurei um jeito de gerar um variável no HtmlWebpackPlugin e passar para o template de alguma forma. Com isso eu criei um objeto com os IDs das tags onde cada propriedade representa o ambiente, assim:

objeto javascript com as tags de homolog e produção

Depois é só setar uma variável no HtmlWebpackPlugin assim:

HtmlWebpackPlugin com a variável gtmId configurada

Com isso o seu template html pode ficar dessa forma:

template index.html

Reparem no <%= htmlWebpackPlugin.options.gtmId %>

Bem simples certo? Isso abre um leque de opções para inserir qualquer tipo de informações e dá muito mais flexibilidade para o seu template.

Abraços!