Implementing the latest analytics.js for Big Commerce

I recently updated the tracking code on a website to the new analytics.js and everything seems to be working fine except for the conversion aspect. The site is built on Big Commerce platform which limits my ability to modify server-side scripts, but this is the code they are currently using:

<script type="text/javascript">
$(document).ready(function() {
 if(typeof(pageTracker) != 'undefined') {
 pageTracker._addTrans(
'358',
'Backyard Toy Company ',
'0.01',
'0.00',
'0.00',
'Lakewood',
'New Jersey',
'United States'
);
 pageTracker._addItem(
'358',
'1336',
'test',
'',
'0.01',
'1'
);
  pageTracker._trackTrans();
}
});
</script>

After some modifications, I have updated the client-side code to the following:

   ga('require', 'ecommerce', 'ecommerce.js');   // Load the ecommerce plug-in.

  // START CUSTOM CODE
  function old2new() {
     // define object that can route old methods to new methods
     this._addTrans = addTrans;
     this._addItem = addItem;
     this._trackTrans = trackTrans;
  }

  function addTrans(orderID,store,total,tax,shipping,city,state,country) {
    // remap _addTrans
   ga('ecommerce:addTransaction', {
      'id': orderID,
      'affiliation': store,
      'revenue': total,
      'tax': tax,
      'shipping': shipping,
   });
  }

  function addItem(orderID,sku,product,variation,price,qty) {
    // remap _addItem
  ga('ecommerce:addItem', {
    'id': orderID,
    'sku': sku,
    'name': product,
    'category': variation,
    'price': price,
    'quantity': qty
  });
 }

function trackTrans() {
  ga('send', 'ecommerce'); 
}

// instantiate converter using name of old Google tracking object
// bigcommerce code will use this and be none the wiser
var pageTracker = new old2new();
// END CUSTOM CODE

Apologies for being new to this, but despite my efforts, I haven't been able to identify the reason why it's not functioning properly.

Answer №1

It appears that the send method should look something like this:

ga('ecommerce:send');

If this solution doesn't work, try adding an alert to all three functions to ensure they are being called correctly.

There may also be a bug in the code related to the overridden this. Try rewriting the methods as shown below to see if that resolves the issue:

function addTrans(orderID,store,total,tax,shipping,city,state,country) {
   // alert("in addTrans");
   ga.call(window, 'ecommerce:addTransaction', {
      'id': orderID,
      'affiliation': store,
      'revenue': total,
      'tax': tax,
      'shipping': shipping,
   });
}

function addItem(orderID,sku,product,variation,price,qty) {
  // alert("in addItem");
  ga.call(window, 'ecommerce:addItem', {
    'id': orderID,
    'sku': sku,
    'name': product,
    'category': variation,
    'price': price,
    'quantity': qty
  });
}

function trackTrans() {
  // alert("in trackTrans");
  ga.call(window, 'ecommerce:send'); 
}

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

Poorly formatted mui table representation

I have utilized the Table component from @mui/material and referenced the documentation at https://mui.com/material-ui/react-table/. To reproduce the issue, I have created a static table with fixed values. Here is the code snippet: <TableCo ...

Server Components can only receive plain objects and select built-ins from Client Components. Any classes or null prototypes will not be compatible

I am encountering an error when wrapping the App.ts with queryclientprovider: "Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported." Below is the code snippet from ...

The getSession provided by the getSession function is accessible within getServerSideProps but appears as undefined within the component

Whenever I try to log the session variable inside the Dashboard component, it comes back as undefined. However, when I log it inside the getServerSideProps function, it returns the correct details. Am I missing something here? Objective: My goal is to fet ...

Is there a way to access the value of a variable that is defined in FileReader.onloadend from within the callback function of XMLHttpRequest.onreadystatechange

I'm trying to access the value of the variable ext (defined within the function reader.onloadend) in the function xhr.onreadystatechange. Currently, it is returning undefined. Does anyone have any suggestions on how to resolve this issue? function pr ...

Error thrown by custom draggable directive in AngularJS due to range issue

I am having trouble with a custom draggable directive in AngularJS. I keep getting a RangeError. Can someone please help me diagnose the issue in this code? (function (window, angular, undefined) { var app = angular.module('ngDraggableModule&a ...

Can the lib property in tsconfig.json override the target property?

Just starting out with Typescript, I have a query regarding the lib and target properties. Below is my tsconfig.json file: { "compilerOptions": { "target": "es5", "outDir": "./dist", "rootDir": "./src", "noEmitOnError": true, } } //index.ts consol ...

Launching a Nuxt.js Cloud Function

Is there a possibility to deploy a cloud function that allows for server-side rendering with Nuxt on Firebase? The issue lies in the fact that the Node version used on Firebase is 6.11.1 while the minimum required Node version for Nuxt versions 1 and above ...

Displaying a message when there are no results in Vue.js using transition-group and encountering the error message "children must be keyed

Utilizing vue.js, I crafted a small data filter tool that boasts sleek transitions for added flair. However, I encountered an issue with displaying a message when there are no results matching the current filters. Here's what I attempted: <transit ...

Parsing JSON data from Tiled map editor and rendering it onto a canvas

I am currently following a tutorial on how to load JSON map files created by the Tiled Map Editor in my JavaScript/Canvas game. So far, I have implemented my own version without any errors showing up in Firebug or the console. Upon closer inspection with ...

What is causing the issue with Vue.js :class not functioning properly when it relies on a property of a list

Here is a snippet of my HTML code: <tr v-for="product in products" :class="{'bg-red': product.toWrite }" :key="product.name"> <td @click="setObjectToWrite(product.name)" class="show-hover&qu ...

Store the decoded user information in the database for safekeeping

I have developed an application where users can capture images and send them to the database with ease. Upon logging in, each user receives a token. As long as the token is valid, they do not need to log in again. To implement JWT authentication, I refer ...

Can Javascript be used to identify the number of td elements in a table and specify column widths within the table tags?

Is there a way to automatically add the "col width" tag based on the number of td tags within a Table tag? For example, if there are 2 td's, then it should add 2 "col width", and if there are 3 then, 3 "col width", and so on. <!DOCTYPE html> &l ...

JavaScript Time Counter: Keeping Track of Time Dynamically

Currently, I am attempting to create a dynamic time counter/timer using JavaScript. Why dynamic? Well, my goal is to have the ability to display days/hours/minutes/seconds depending on the size of the timestamp provided. If the timestamp is less than a d ...

Customize.Print - establish default print preferences

In my current project, I am exploring ways to add a print PDF feature. After discovering print.js, it seems like a possible solution for this task. My main concern is setting default print options to ensure the correct scale (i.e., 100%). Does print.js h ...

Using ES6, when utilizing array map in ReactJS, the function does not produce a return value

One challenge I'm facing involves mapping an array to find a specific string value. Unfortunately, despite my efforts, the map function is not returning anything as expected. class Application extends React.Component { constructor(){ super(); ...

Triggering JavaScript Functions with React Button Click Events

I'm struggling to grasp how JavaScript functions interact with React components. I have a "Button" element with an "onClick" event that I want to use to clear an "input" text field. Unfortunately, my attempts haven't been successful so far. Sol ...

Pass data from JavaScript to PHP using AJAX

Using Leaflet to display a map, I have incorporated ajax into my onEachFeature function in order to retrieve variables to pass to PHP. Here is the code snippet: function onEachFeature(feature, layer) { layer.bindPopup(feature.properties.IDLo); layer. ...

Using JavaScript to connect SQL query results to a specific function

Hello everyone, I find myself in a bit of a pickle while working with WebOS enyo. Although the fact that I am using enyo is irrelevant to my question... Here is a method I have: clickPopulate: function(){ // Do some SQL }; I am utilizing a data ...

Operating Node SerialPort on a CentOS 6 Linux environment

Hi everyone, I'm a beginner in node.js and I've recently developed an application using node, express, socket, and serialport. I have a weighing scale connected to serialport (COM2) which works perfectly on my Windows localhost. However, when I t ...

Using the for loop to asynchronously fetch data and access the finished result variable

Exploring the world of asynchronous JavaScript, I find myself pondering a question: how can I ensure that my code only starts working on a created array once all queries are completed? My current approach involves fetching pages in a for loop. Here's ...