Track clicks on injected element

[#1]

Hey all,

I'm wondering whether it is possible to track clicks on newly injected elements.

E.g. in one of our experiments, we injected a few new CTA's (all with their own ID) via jQuery, and in goals we have assigned new goals to clicks on those elements. Now in the results, I did expect to see at least a few clicks, but numbers are zero.

So now I'm wondering whether goal binds can be assigned to elements injected using jQuery, or is it only possible to bind goals to elements that already exist in the 'original' variation? If binding goals to injected elements should work, then why are our numbers zero (while we know some people clicked on them)?

Hope somebody can help clarify this, thanks!

[#2]

What you could do is add in the jQuery changes you make also click tracking on these elements. If you would trigger these elements manually with an onclick then my guess is that it should work. Probably why it's not working is that the elements that you add won't be auto recognized as the JS is already loaded.

[#3 · Accepted solution]

Clickgoals use .live() to bind so they will pick up things that are injected.

Odds are it is an issue with your click's binding.  You need to verify that you set up the bindings correctly.

When you edit the goal, expland the "Advanced" accordion.  In there you will see the selector that is being used for that goal.  It will contain some code like this:

#paypal-cart input[name='submit']

Now open your web browser and navigate to the page that has the link you are trying to track with that click goal.  Open the developers console (typically, [F12] on your keyboard), find the tab named "console" and run a command like this:

$("#paypal-cart input[name='submit']")

If your browser "answers" your command with

[ ]

then it means the binding is not correct and you need to change it.

If your browser answers your command with something like:

[<input type=​"image" src=​"https:​/​/​www.paypal.com/​en_US/​i/​btn/​btn_cart_SM.gif" border=​"0" name=​"submit" alt=​"PayPal - The safer, easier way to pay online!" onclick=​"return false">​]

then it means the binding found something on the page that it will track.

[#4]

 Yes, goal binds can be assigned to elements injected using jQuery. Why not add a class that you will use to track an element with?

Using jQuery, you could do something like this:

//DEFINE WHAT ELEMENT YOU WANT TO TRACK
var elToTrack = $('#yourElementID');

//ADD CLASS
elToTrack.addClass('optimizely-element');

console.log(elToTrack) 
//Check that your element exists in console with the new class

Now all you need to do is create a goal and add this class (.optimizely-element).

[#5]

Ok, good to now regarding .live(). Strange thing is, we already use this ID / class - binding, without any success. However, think this will be the best answer for most other users.

[#6]

@bleeve -

Can you share a screen shot of the click binding and a URL where the element you are trying to track appears?