Existem duas maneiras de carregar essas informações dentro do código fonte. A primeira seria atrelando as informações antes da implementação do Google Tag Manager no HEAD, e a segunda seria passando as informações através de eventos personalizados, criados diretamente na camada de dados.
<script> let dataLayer = [{ 'propriedade_1': 'valor_1', 'propriedade_2': 'valor_2' }]; </script> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5WVFHVC');</script> <!-- End Google Tag Manager -->
É importante ressaltar que, os dados passados sem evento personalizado serão recebidos dentro do GTM como o evento
message
. Você irá usar os dados através dos eventos padrões do Google Tag Manager (por exemplo, "Click", "Link click" e etc).
Antes de passar o exemplo, primeiro é importante definir para que serve um evento personalizado. Segue a definição do próprio Google:
Os eventos personalizados são usados para acompanhar as interações que ocorrem no seu site (ou app para dispositivos móveis) que não são tratadas pelos métodos padrão. O caso de uso mais comum é quando você quer monitorar envios de formulários, mas o comportamento padrão do formulário foi alterado (por exemplo: o evento de navegador submit foi modificado).
Visto isso, vamos ao exemplo de como implementar um evento personalizado:
//Esses valores podem ser passados desde um retorno de função ou execução de um bloco de código javascript var dataLayer = window.dataLayer || []; dataLayer.push({ 'event': 'personalizado' }); <!-- Ou disparando direto do elemento --> <a href="#" name="button1" onclick="dataLayer.push({'event': 'personalizado'});">Button 1</a> <!-- Inclusive passando informações atreladas ao evento seja direto do elemento --> <a href="#" name="button2" onclick="dataLayer.push({'event': 'personalizado','propriedade_1': 'valor_1'});">Button 2</a>` // Ou passando as informações atreladas no evento direto do javascript var dataLayer = window.dataLayer || []; dataLayer.push({ 'event': 'personalizado', 'propriedade_1': 'valor_1' });
Não existe receita de bolo porém, é importante entender que:
Espero que tenha ajudado até a próxima :D