Google tag manager dataLayer not sending data

Question

I am initialiazing google tag manager and gtag like this:

@yield('styles')

@if(config('app.google_analytics_key'))
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ config('app.google_analytics_key') }}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '{{ config('app.google_analytics_key') }}');
    </script>
@endif

<script>
    window['GoogleAnalyticsObject'] = 'ga';
    window['ga'] = window['ga'] || function() {
        (window['ga'].q = window['ga'].q || []).push(arguments)
    };
</script>

@yield('before_google_tag')

@if(config('app.google_tag_manager_key'))
    <!-- 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','{{ config('app.google_tag_manager_key') }}');</script>
    <!-- End Google Tag Manager -->
@endif

@yield('after_google_tag')

I've got some pages in which I push data to the dataLayer right after the tag manager code. Some example is my product detail page:

@section('after_google_tag')
<script>
    ga('require', 'ecommerce');
</script>

<script>
window.dataLayer = window.dataLayer || []
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
window.dataLayer.push({
  'ecommerce': {
    'detail': {
        'products': [{
            'name': '{{ $product->name }}',         // Name or ID is required.
            'price': '{{ $product->finalPrice }}'
        }]
    }
  }
});
</script>
@endsection

Everything works fine, but when I later try to push to the dataLayer on specific event (in my case the adding of the product to the cart) Google tag assistant does not detect it, also I do not see a https://www.google-analytics.com/r/collect?v= in the Network tab, I see them only for the product details push.

Here is the code which pushes on adding to the cart:

window.dataLayer = window.dataLayer || [];  
// Measure the removal of a product from a shopping cart.
window.dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'BGN',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [
        {
           'name': product.name,
           'price': product.finalPrice
        }
      ]
    }
  }
});

I am doing it inside a Vue component. When I console log the dataLayer after this event I see it modified with the correct values, but I do not know why it does not send a request or why google tag assistant does not detect those changes.

Answer 1

You do not need to initialise GA with code, you should be doing this within the GTM GUI.

I expect the product detail push is with the pageview which GA tracks by default when the DOM loads.

Once you set up GA using GTM you'll need to pass the event to GA on the trigger which is the dataLayer.push event name. To do this create a custom event trigger in GTM and then send the data in the payload to GA.

You'll also need to configure the GA tracking in GTM to use the dataLayer for your e-commerce data.

The GTM preview will show you what is and isn't being passed to the dataLayer, you need to create triggers that fire from the dataLayer events.