Can Google Website Optimizer handle two separate onClick events?

While searching for information on 'how to combine two onclick events', I have come across several solutions online. However, none of them seem to work in my specific case. One tutorial from Google Website Optimizer explains how to track an event like a click. The first step is to add the following code to my Analytics:

  function doGoal(that) { 
    try {

Next, I am required to include the following in my event:

onclick="doGoal(this);return false;"

The challenge arises when my event is already a button containing its own onclick event:

<input type="image" src="image.png" onclick="productAddToCartForm.submit(this);return false;">

Attempting to merge the two has not yielded the desired results - either nothing gets recorded by Google or I get redirected to an '/undefined/' page. How can I effectively combine these two onclick events?

javascriptmagentogoogle-analyticsonclickdom-events

Answer №1

To assign the same event to multiple elements, it is recommended to utilize the addEventListener method. Please note that for compatibility with IE8 and earlier versions, you may need to use attachEvent instead (as mentioned in the documentation above).

Another approach:

onclick="productAddToCartForm.submit(this);doGoal(this);return false;"

This method should also be effective.

Answer №2

I'm not sure what specific tracking you're looking for, but I'll provide an example using event and pageview:

function trackGoal() {
    var itemNumber = document.productInfoForm.item.value;
    var itemQuantity = document.productInfoForm.quantity.value;
    //event tracking
    _gaq.push(['_trackEvent', 'Product', 'Add', itemNumber,  itemQuantity]);
    //virtual page tracking for goal
    _gaq.push(['_trackPageview', '/product/add/']);
    setTimeout("document.productInfoForm.submit()", 100);
}

Image button usage:

<input type="image" src="picture.png" onclick="trackGoal();return false;">

Check out this Event Tracking Guide

Feel free to customize the values in the tracking to suit your needs.

The setTimeout function ensures that the trackers are sent before the form is processed.

Here's a simple fiddle example without analytics tracking: http://jsfiddle.net/8yyRm/1/

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

Having trouble altering the error response code in feathers.js

I'm utilizing an authentication service for login validation. In this case, I am looking to change the Unauthorized (401) response code to 200 while keeping the message the same. The authentication service setup is as follows: app.service('auth ...

javascriptnode.jsresponsemiddlewarefeathersjs

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

javascriptjqueryhtmlcssbootstrap-popover

Tips on incorporating validations such as require and pristine into custom Angular directives

I have recently developed an angular directive that allows users to choose multiple contact types from a modal dialog within an ionic app. angular.module('SharedModule') .directive('multiSelect', ['$ionicModal', multiSele ...

javascriptangularjs

Splitting Code in React Components using Webpack within a Ruby on Rails Application

I'm currently integrating ReactJS components into my Rails application using the Webpack gem. However, I am facing an issue where the React components are only being loaded in specific areas within the layout of the Rails application. This results in ...

javascriptruby-on-railsreactjswebpack

SVGs do not display on iPhones

Having some issues with my code - specifically, I have an SVG animation that seems to work on all devices except iPhones. I've been struggling to find a solution. Here is the code snippet for the SVG: <div class="contenuto-svg"> <svg vi ...

javascripthtmlcsssvg

The Challenge of Page Refresh in Express and Node.js

I am new to web development and servers, having only taken one course in university. I am facing a strange issue with a GET request where it stops being sent after multiple refreshes. Here is the output from npm start when it is working: GET / 304 0.350 m ...

javascriptnode.jsexpresswebserver

Is there a way to confirm a pattern in Express?

My model includes the attributes cartaoCidadao and estado. I would like the cartaoCidadao attribute to be an 8-digit string (for example: 12345678) and for the estado attribute to only accept two possible values (infected and suspected). How can I set up ...

javascriptnode.jsexpressmongoosemodel

What is the process for modifying a supabase record?

My goal is to make each "item" unique so that when a user clicks on the same item again, it updates by adding 1 to the "quantity", increases the "price", and inserts a new record if the item is not already unique. I attempted to use upsert/onConflict but ...

javascriptreactjspostgresqlsupabaseupsert

Locate element based on its specific property value

Currently, I am conducting tests on a web application utilizing Nightwatch.js, which relies on Selenium WebDriver for browser interactions. Within my application, there is a list of items that are dynamically created and only differentiated by their names, ...

javascriptseleniumdomselenium-webdrivernightwatch.js

selenium extraction failure

I am attempting to log in to this specific website using selenium. I've imported the web driver and Keys module in order to input my login information into the required fields on the page. from selenium import webdriver from selenium.webdriver.common. ...

javascripthtmlseleniumpython-3.5

Execute a select query based on the chosen date from the CalendarExtender

Is there a way to execute a select query based on the selectedDate value of CalendarExtender in an ASP.NET application? There is a hidden dummy button that triggers a button click event on the Calendar Extendar using OnClientDateSelectionChanged="checkD ...

javascriptsqlasp.netajaxasp.net-ajax

Verifications in the realm of javascript

I created a custom form in Django which is functioning correctly. However, when I try to implement JavaScript validation, the validations do not seem to work as expected. I am looking to validate the form using JavaScript. Although it displays the alert me ...

javascriptjquerypythondjango

How can I turn off shadows for every component?

Is it feasible to deactivate shadows and elevation on all components using a configuration setting? ...

javascriptcssvue.jsquasar-framework

Add hyphens to separate the words in AngularJS if there is a break in the string

Within a div of set width, a string is being bound to it. This string could be short or long. I would like for the string to break with a hyphen inserted on each line except for the last one. For example: If the string is "misconception" and it breaks at ...

javascriptjqueryhtmlcssangularjs

Tips for preventing "Undefined" errors when retrieving data in Vue

I am currently working on a basic page that displays data fetched from the server. Here is the setup: <p>Customer's name for the order: {{ order.customer.name }}</p> Javascript: export default { data () { return { order: {} } }, ...

javascriptvue.jsvue-component

How can I utilize JavaScript to generate a dynamic value in a URL and then submit it through a form?

One of my clients has requested the ability to send out unique URLs to their customers in order to track which links are being utilized. Despite my suggestion to use Google Analytics for this purpose, they have specifically asked to avoid it. Their reques ...

javascript

How to execute a function *after* another function has finished running in Javascript upon page load?

I am currently using scrollsaver.js to maintain scroll positions of elements after postback. However, I have encountered difficulties in resetting the scroll position when needed. Specifically, when paging through a list, I want the scroll position to res ...

javascriptjquery

Leveraging the FileReader API within a Vue.js component function

I'm working on a Vue.js file picker that needs to display previews of selected files. To accomplish this, I am utilizing the FileReader API to read user-selected files as data URLs using the readAsDataURL method of the FileReader object. However, I&a ...

javascripteventsvue.jsfilereader

Experimenting with axios.create() instance using jest

I have attempted multiple solutions for this task. I am trying to test an axios instance API call without using any libraries like jest-axios-mock, moaxios, or msw. I believe it is possible, as I have successfully tested simple axios calls (axios.get / axi ...

javascriptreactjstypescriptaxiosjestjs

What is the best approach for managing multiple HTTP requests in my specific situation?

I have a query about handling multiple HTTP requests in my code to ultimately get the desired result. Here is an outline of my approach: var customer[]; var url = '/api/project/getCustomer'; getProject(url) .then(function(data){ ...

javascriptangularjs