Issues encountered with rest arguments while setting up gtag

I am currently working on implementing a Google Tag loading script using TypeScript.

  const GTAG_ID = 'ID';

  const script = document.createElement('script');
  script.src = `https://www.googletagmanager.com/gtag/js?id=${GTAG_ID}`;
  script.async = true;

  document.head.appendChild(script);

  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', GTAG_ID, { send_page_view: false });
  gtag('event', 'page_view');

The above code successfully executes and triggers the gtag event. However, if I attempt to add some level of typing to the gtag function, the following code snippet would be the solution.

  function gtag(...args: Array<unknown>) {
    window.dataLayer.push(args);
  }

Strangely, after implementing this typed approach, the gtag event stops firing. There are no console errors, and whether I use spread syntax on the arguments or not, the issue persists. This has left me puzzled and wondering why this modification does not function as expected.

Answer №1

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

There may be a type problem, as Google requires the following format for events:

dataLayer.push({'event': 'event_name'});

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

Tips on updating a child object in the state using a reducer with Redux

I am facing a challenge with modifying elements inside an object within my state. Currently, I am able to modify elements at the first level, such as the step property. However, I am seeking a solution to modify elements within an object nested inside my s ...

A collection of collections

Alright, listen up. I've got a JSON file with an array inside another array. Here's a snippet of the JSON file: { "keys": [ { "game": "Counter-Strike: Global Offensive", "price": "5", "listofkeys" ...

When an answer is provided in Inquirer.js, pressing Enter is causing the process to terminate

Currently, I am working on creating a Command Line Interface (CLI) using the NPM package called Inquirer. It has been a useful tool so far, but I have encountered an issue. The interface functions correctly in terms of posing questions to the user, but onc ...

Applying a consistent script with varying inputs on the same HTML page

Is it possible to create a JavaScript code that can be used across different sections of an HTML document? The goal is for the script to fetch data such as title, runtime, and plot from a specific URL request and insert this information into the appropriat ...

Navigating through an array of objects with Node.js

Recently, I integrated the ChartJS library into my Node web app to visualize data. The following is nested in a script tag on an EJS template page: <script> let playerStatChart = new Chart(myChart, { type: 'bar', data: { la ...

Converting JQuery Object (Ajax-response) to an Array Containing Keys and Values

When I make an $.ajax request, the response I receive looks like this: https://i.sstatic.net/UfnfQ.jpg (please don't worry about the Russian symbols, they are just strings of text:)) I am aware that when PHP sends the request, it is in a simple arr ...

Switching back and forth between fluid text fields

Is there a way to navigate between dynamically generated textfields using an iterator from struts-tags? <s:iterator value="aList"> <td width="50px" align="center"> <s:textfield name="solField" size="2" maxlength="1" style="text-transform ...

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

The production deployment of Heroku using Nuxt is configured with staging environment variables

My deployment process involves using Heroku to deploy my Nuxt.js frontend app, where I have configured a variable for the API URL. However, whenever I move an app from staging to production, the production site ends up using the configuration variables fr ...

What is the best way to display just one record that has the lowest score out of all the records?

I need help with displaying only 1 record from the DL list that has the lowest score, instead of showing all records. In the example on stackblitz, you can see that for the first record, the DL scores are: 54, 20, and updated. Instead of displaying all 3 ...

How can I quickly duplicate the design of a JSON Object?

Perhaps the title is a bit basic. Essentially, I am looking for something similar to mysqldump ... --no-data .... For instance, I have a JSON object structured like this: { "key1" : "value1", "key2" : "value2", "key3" : { "key3a" : 1, "key ...

MUI useStyles/createStyles hook dilemma: Inconsistent styling across components, with styles failing to apply to some elements

I have been trying to style my MUI5 react app using the makeStyles and createStyles hooks. The root className is being styled perfectly, but I am facing an issue with styling the logoIcon. Despite multiple attempts to debug the problem, I have not been suc ...

Angular: Granting an external module access to a provider

One of the modules I imported provides a service with an optional dependency. Although it being optional didn't affect my application, as it just prevented any errors from occurring when not present. Here's an example: import { FooModule } from ...

How can I limit the displayed content of a div to just the initial lines (clamping)?

I have a collection of divs that showcase previews of lengthy documents. These documents utilize various font styles, resulting in inconsistent line heights. An example can be seen here: http://jsfiddle.net/z56vn/ My goal is to display only the initial fe ...

In the process of developing a matchmaking feature

Currently, I am working on a matchmaking system to find suitable opponents based on a user's trophies. Everything seems to be working fine until the if condition is triggered, which results in an infinite loop. const UserProfile = require("../sch ...

Creating a Redirect Form that Directs Users to a Specific Page Depending on Input Data

Apologies if this is a basic issue, but I'm struggling to figure it out. I am trying to create a form field on a webpage that will redirect users to a specific page based on the data they input. For example, if someone types in "dave" and submits the ...

Display the JSON data in a table when the button is clicked

My goal is to display JSON data retrieved from a web service in a table format only after a button click. Although I have successfully fetched the data, I want it to be visible in a table only upon clicking the button. The current code displays table row n ...

JavaScript controller with numerous dependencies in AngularJS

I have created a new controller: .controller('myCtrl', function($scope, $route, $routeParams, $location) Now I am trying to inject something called SharedState. I attempted: .controller('chatCtrl' ['SharedState', function($ ...

In Angular components, data cannot be updated without refreshing the page when using setInterval()

Here's the Angular component I'm working with: export class UserListComponent implements OnInit, OnDestroy { private _subscriptions: Subscription; private _users: User[] = []; private _clickableUser: boolean = true; constructor( priv ...

looking to display the latest status value in a separate component

I am interested in monitoring when a mutation is called and updates a status. I have created a component that displays the count of database table rows when an API call is made. Below is the store I have implemented: const state = { opportunity: "" } ...