Track clicks on injected element
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!
Solved! Go to 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:
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:
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.
Analytics and Testing Guru
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).