The dataLayer in Google Tag Manager is failing to trigger the necessary event

Product Purchase Button:

<button id="btnBuy" onclick="SendData();"

JavaScript function to track product details:

<script>
var dataLayer = [];

dataLayer.push( {
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    
      'products': [{
      'name': '@GetString("Ecom:Product.Name")',         
      'id': '@GetValue("Ecom:Product.Number")',
      'price': '@GetValue("Ecom:Product.ActualPriceWithVAT")',
      'brand': '@GetString("Ecom:Manufacturer.Name")',
      'category': 'PRODUCT_CATEGORY'
       }]
     }
   }
});

function SendData()
{
    var purchaseData = 
    dataLayer.push( {
        'event': 'addToCart',
        'ecommerce': {
            'currencyCode': 'SEK',
            'add': {                                
                'products': [{                        
                    'name': '@GetString("Ecom:Product.Name")',
                    'id': '@GetValue("Ecom:Product.Number")',
                    'price': '@GetValue("Ecom:Product.ActualPriceWithVAT")',
                    'brand': '@GetString("Ecom:Manufacturer.Name")',
                    'category': 'Apparel',
                    'variant': $j('input[name=radioDim1]:checked').val(),
                    'quantity': $j( '#QuantitySelector option:selected' ).val(),
                    'size': $j( 'input[name=radioDim2]:checked' ).closest( 'label' ).text()
                }]
            }
        }
    } );

    return purchaseData;

}

</script>

Tag info: Tracking: Event Category: Add to cart Action: {{Event}} Label: {{Page Path}}

Trigger: Event equals addToCart

The Preview mode in Chrome registers the click event but does not show the trigger being fired.

https://i.sstatic.net/DRyan.png

https://i.sstatic.net/QM0VO.png

Answer №1

If the code you provided follows the GTM container snippet, then what you've essentially done in the first line is to reassign the dataLayer variable.

var dataLayer = [];

This action clears the existing dataLayer that GTM recognizes and may disrupt your tags.

A safer approach would be to define the dataLayer like this:

var dataLayer = dataLayer || [];

This way, if the dataLayer already exists, it will not be overwritten.

Answer №2

The event names that have been triggered are displayed on the left side, confirming that "addToCart" has been fired.

To further analyze this, be sure to capture a screenshot of the "Tags" tab and select the specific tag you want to monitor. Here you will find detailed information on whether or not the tag has successfully fired.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

cancel the ongoing ajax request during a specific event

There seems to be an issue with the behavior of clicking on the .personalized class. When clicked, it does not display both #loading_personalized and #divPersonalized elements simultaneously. This results in the execution of an AJAX call even when the pr ...

"Exploring the power of Vue3's composition API in managing the

Trying to implement an accordion component in Vue 3, but encountering a strange comparison issue. I'm attempting to execute a function within the accordionitem - specifically the toggle operation. However, despite numerous attempts, I am unable to mo ...

When utilizing the React API Fetch, there may be instances where not all data is returned. However

Having some trouble with my FetchData class. I am receiving a list of data, but it's in an array format. When I try to access specific values like countries: data.Countries[0], I can get individual values based on the index. However, what I really wan ...

Vue js is throwing an error because it is unable to find the "buscador" property or method that is being referenced in the render function

I am currently diving into the world of laravel combined with Vue js. I am working on integrating a search engine using vue js components, and I would greatly appreciate any help you can provide. Thank you in advance. Below is the Vue js component where t ...

Exploring the DOM with jQuery to effectively select multiple elements

I am currently attempting to locate and select all elements with the "findme" class, and then identify the selects that are located nearby. http://jsfiddle.net/R93md/1/ Specifically, I have experimented with $(".findme").parent().prev().first(); Once ...

Experiencing ERR_TOO_MANY_REDIRECTS while using Next.js with Vercel and a Custom Domain through Cloudflare

I'm having trouble getting my Next.js project set up on Vercel with a custom domain managed through Cloudflare. Despite configuring the DNS and SSL settings correctly, I keep seeing a net::ERR_TOO_MANY_REDIRECTS error when trying to access my site at ...

AngularJS does not allow access to the variable value outside of the resource service's scope,

I have developed an AngularJS factory service to handle REST calls. The service is functioning correctly, but I am facing a challenge where I need to set values into $scope.variable and access them outside of the resource service. However, when attempting ...

Adding complex JSON format to an HTML table involves formatting the data correctly and then using

Utilizing AJAX, I fetched a JSON response and am now looking to map the JSON data into an HTML table structured like this: { "records": [{ "type_id": 000001, "type_desc": "AAAAAA", "type_createby": "Adam" }, { "type ...

What is the process for sharing your website content on Google Blogger?

I am currently developing a dashboard for a small business website and I would like to implement a feature that allows users to post directly to their Blogger blog from the dashboard of their own website. This eliminates the hassle of having to switch betw ...

What are some ways to enhance Redux's performance when handling rapid updates in the user interface?

I have been facing a challenge with integrating a D3 force graph with my redux state. During each 'tick' update, an action is dispatched to update a collection of positions in the redux state. These positions are then combined with node data to u ...

Choosing the perfect item with the help of a material's GridList

I've developed a react-mobx application using Material-UI, and the code structure is similar to this: render() { // defining some constants return ( <div> <img src={selectedPhoto} alt={'image title'} /> < ...

It appears that the validation and onChange event handler in Material-UI's TextField are not functioning as anticipated

Currently, I am working with React and Material-UI's TextField component using type='number'. The default validation provided seems quite simple, allowing any character that could potentially represent part of a number [0-9\.eE-]*. This ...

Issue: Unable to assign headers once they have already been sent to the client

As a newcomer to the world of Node.js, I am facing some challenges. Currently, my setup includes Node.js 4.10 and Express 2.4.3. Whenever I attempt to access , I get redirected to . This redirection triggers the following error: Error: Headers cannot b ...

Is it possible for a function parameter to utilize an array method?

Just starting to grasp ES6 and diving into my inaugural React App via an online course. Wanted to share a snag I hit along the way, along with a link to my git repository for any kind souls willing to lend a hand. This app is designed for book organization ...

Showing nested JSON data in ng-repeat

Currently, I'm struggling to understand how to access nested JSON and show it on a page using Angular. For instance, consider the JSON structure below where I want to display connectivity products under portfolio using ng-repeat... { "addons": [ ...

Plunker fails to run simple AngularJS demo

I'm having trouble figuring out why this basic example isn't functioning as expected on Plunker. http://plnkr.co/edit/EfNxzzQhAb8xAcFZGKm3?p=preview var app = angular.module("App",[]); var Controller = function($scope){ $scope.message ="Hel ...

Passing an array from the PHP View to a JavaScript function and plotting it

Greetings, I am currently facing the following tasks: Retrieving data from a database and saving it to an array (CHECK) Sending the array from Controller to View (CHECK) Passing that array to a JavaScript function using json_encode (CHECK) Plotting the ...

Combining React state value with an HTML tag would be a great way

I am facing an issue while trying to concatenate the previous value with new data fetched from an API using a loop. Instead of getting the desired output, I see something like this: [object Object][object Object],[object Object][object Object] Here is ...

Is it possible to analyze the performance of NodeJS applications using Visual Studio Code?

I have managed to establish a successful connection between the VS Code debugger and my remote NodeJS target through the Chrome protocol. I am aware that this protocol allows for profiling and performance measurements within the Chrome Dev Tools, but I am ...

Govern Your Gateway with Expressive Logs

I'm facing some issues with the logs in my Express Gateway: Although I followed the documentation and enabled Express Gateway logs, I cannot locate any log files under my gateway root directory. Whenever I start the gateway using the command LOG_L ...