Data Layer ou Camada de Dados é um conjunto de informações relevantes, como dados da página, informações de transações, detalhes de produtos, entre tantas outras possibilidades, que poderão ser utilizadas por diversas ferramentas de Marketing Digital.

O GTM possui alguns formatos específicos para a implementação desse data layer. Abaixo seguem algumas orientações que visam auxiliar no desenvolvimento da integração via plataforma.

Vitrine de produtos

<script>
window.dataLayer = [{
    "ecommerce": {
        "currencyCode": "BRL",
        "impressions": [
            @foreach($dataProvider->collection as $position => $item)
            {
                'id': '{{ $item->id }}',
                'name': '{{ $item->identification->first()->name }}',
                'price': {{ $item->prices->first()->price }},
                'brand': '{{ $item->extraFields->get('brand_extra_field_slug')->values->first()->value }}',
                'category': '{{ $item->categories->first()->name }}',
                'variant': '{{ $item->extraFields->get('variant_extra_field_slug')->values->first()->value }}',
                'list': '...', // Aqui deverá entrar um breadcrumb com os detalhes da lista, podendo ser "Home", "Categoria1 > Categoria2", "Promoções" ou algo do tipo.
                'position': {{ ($position + 1) }}
            }
            @endforeach
        ]
    }
}]
</script>

Clicks em Produtos

@foreach($dataProvider->collection as $position => $item)
<div class="item-details">
  ...
  <a onclick="product{{ $item->id }}Redirect()">Ver detalhes</a>
</div>
<script>
var product{{ $item->id }}Redirect = function() {
    dataLayer.push({
        'event': 'productClick',
        'ecommerce': {
            'click': {
                'actionField': {
                    'list': '...' // Aqui deverá entrar um breadcrumb com os detalhes da lista, podendo ser "Home", "Categoria1 > Categoria2", "Promoções" ou algo do tipo.
                },
                'products': [{
                    'name': '{{ $item->identification->first()->name }}',
                    'id': '{{ $item->id }}',
                    'price': {{ $item->prices->first()->price }},
                    'brand': '{{ $item->extraFields->get('brand_extra_field_slug')->values->first()->value }}',
                    'category': '{{ $item->categories->first()->name }}',
                    'variant': '{{ $item->extraFields->get('variant_extra_field_slug')->values->first()->value }}',
                    'position': {{ ($position + 1) }}
                }]
            }
        },
        'eventCallback': function() {
            document.location = '{{ $item->urls->first()->url }}'
        }
    });
};
</script>
@endforeach

Página de produto

<script>
window.dataLayer.push({
    "event": 'productDetails',
    "ecommerce": {
        "detail": {
            'actionField': {'list': 'Página de produto'},
            'products': [{
                'name': '{{ $dataProvider->identification->name }}',
                'id': '{{ $dataProvider->model->id }}',
                'price': {{ $dataProvider->prices->first()->price }},
                'brand': '{{ $dataProvider->extraFields->get('brand_extra_field_slug')->values->first()->value }}',
                'variant': '{{ $dataProvider->extraFields->get('variant_extra_field_slug')->values->first()->value }}',
                'category': '{{ $dataProvider->categories->first()->name }}'
            }]
        }
    }
});
</script>

Adição ao carrinho

Na vitrine

@foreach($dataProvider->collection as $position => $item)
<script>
window.notifyDataLayerAddToCartItem{{ $item->id }} = function(id, quantity) {
    window.dataLayer.push({
        'event': 'addToCart',
        'ecommerce': {
            'currencyCode': 'BRL',
            'add': {
                'products': [{
                    'name': '{{ $item->identification->first()->name }}',
                    'id': id,
                    'price': {{ $item->prices->first()->price }},
                    'brand': '{{ $item->extraFields->get('brand_extra_field_slug')->values->first()->value }}',
                    'variant': '{{ $item->extraFields->get('variant_extra_field_slug')->values->first()->value }}',
                    'category': '{{ $item->categories->first()->name }}',
                    'quantity': quantity
                }]
            }
        }
    });
}
CanopusEventCenter.addListener('Checkout.Added', function(id, action, type, quantity) {
    window["notifyDataLayerAddToCartItem{{ $item->id }}"](id, quantity);
});
</script>
@endforeach

Na página de produto

<script>
window.notifyDataLayerAddToCart = function(id, quantity) {
    window.dataLayer.push({
        'event': 'addToCart',
        'ecommerce': {
            'currencyCode': 'BRL',
            'add': {
                'products': [{
                    'name': '{{ $dataProvider->identification->name }}',
                    'id': id,
                    'price': {{ $dataProvider->prices->first()->price }},
                    'brand': '{{ $dataProvider->extraFields->get('brand_extra_field_slug')->values->first()->value }}',
                    'variant': '{{ $dataProvider->extraFields->get('variant_extra_field_slug')->values->first()->value }}',
                    'category': '{{ $dataProvider->categories->first()->name }}'
                    'quantity': quantity,
                }]
            }
        }
    });
CanopusEventCenter.addEventListener('Checkout.Added', function(id, action, type, quantity) {
    window["notifyDataLayerAddToCart"](id, quantity);
});
CanopusEventCenter.addEventListener('Checkout.AddedAvailableQuantity', function(id, action, type, quantity) {
    window["notifyDataLayerAddToCart"](id, quantity);
});
CanopusEventCenter.addEventListener('Checkout.Updated', function(id, action, type, quantity) {
    window["notifyDataLayerAddToCart"](id, quantity);
});
</script>

Os passos "Remoção do Carrinho", "Checkout" e "Finalização de Compra" serão manipulados pelo próprio checkout da Betalabs, bastando apenas habilitar e configurar o seu funcionamento antes da chamada dos arquivos do checkout no template. Exemplo:

<html>
    <head>
        ...
        <script>
            window['gtmDataLayer'] = true;
            window['gtmDataLayerName'] = 'dataLayer'; // Pode ser omitido e a plataforma assumirá o valor padrão 'dataLayer'. Se informado o valor deverá ser um objeto JavaScript válido.
            window['gtmDataLayerBrandExtraField'] = 'my-brand-extra-field-slug' // Informar o slug do campo extra de marca do produto.
            window['gtmDataLayerVariationExtraFields'] = 'my-variation1-extra-field-slug,my-variation2-extra-field-slug,my-variation3-extra-field-slug'; // Informar o(s) slug(s) do(s) campo(s) extra(s) de variação(ões).
        </script>
        ...
        @checkoutHeader()
    </head>
    <body>
        ...
        @checkoutBody()
        ...
    </body>
</html>