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>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'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-??????**');</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). Fonte
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
//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
<!-- 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