Firefox only: Google Analytics - Lightbox2 - jQuery 1.2.3 conflict

Marked #224714, #236777, #229216, #230352 and #230064 as a duplicate of this issue.

This is caused by a conflict between the google analytics module and lightbox2. I'm still investigating.

The problem lies with the new version of jQuery in core (1.2.3). It seems to handle the click(function) event slightly differently. However, I think we need to handle this in our Drupal modules because jQuery won't change this any time soon. The attached patch is for the Google Analytics module to workaround this problem.

Problem
Lightbox2 uses onclick events on anchors (containing the rel="lightbox", etc) to trigger the lightbox like so:

anchor.onclick = function() { Lightbox.start(this); return false; };

Note that it returns false, meaning that the browser shouldn't load the target page as it normally would. Instead the Lightbox.start() function displays the image.

In Google Analytics downloadtracker.js script, there is an click event bound to each link. The onclick function doesn't specify the return value. This worked fine in D5 with the older jQuery version. However, it appears that in jQuery 1.2.3, it defaults to true. So this is what happens:

1. User clicks on an image link and triggers all click events for that link.
2. 1st click event: the lightbox containing the image is loaded and false is returned (user is kept on the page)
3. 2nd click event: the downloadtracker.js file event triggers and the click is tracked. The default value of true is returned.
4. Since true is returned from the final onclick event, the link target is opened in the browser and the page with the lightbox is no longer visible.

However, we can't just modify the Google Analytics' downloadtracker.js file to always return false, because then normal links would break! I think the best solution is to check if the anchor's rel attribute is set and if so, does it contain the "lightbox" string.

Another solution which *might* work would be if we could determine the order of onclick events. Then we could specify that the Google Analytics click event be triggered before the lightbox2 click event. If there was a way of specifying the order, then it would be a better solution I think.

The attached patch does just that; so return true happens by default, except when the image should be loaded in the lightbox. I think the Google Analytics module may run into a similar issue with the Thickbox module, not sure (no D6 version yet).

Re-assigning this to the Google Analytics module, since that's where the patch needs to be applied. Here's hoping that this will be fixed in jQuery soon.

Cheers,
Stella

Have you opened a case at jQuery? So we could jump in and may get a hotfix for D6.1 or so...

I think we cannot build for every affected module a different workaround in GA code... i'm not sure i fully understand what happens here or better - if there could be a workaround or solution that could be build into lightbox2 code or not.

Additional, could you please take a look into http://drupal.org/node/212560#comment-723652, this is where i already reported my testing results. IE works, too.

See http://dev.jquery.com/ticket/2386 for the jQuery bug report.

I've already spent a few hours investigating this issue and if I could have found a solution that could be implemented in lightbox2 I would have. The only one I found to work was changing the return value of the downloadtracker.js onclick function. If you find a solution that involves a patch to just the lightbox2 module, then I'll gladly take a look.

I understand your reluctance to implement the solution, but even if the jQuery developers agree to implement a fix, it will probably be a while before the jquery.js file in D6 core is updated and judging by the version still in D5, it could be a long time.

So in the meantime it comes down to which you think is worse:
(a) implement a workaround for the lightbox2 - google analytics conflict
(b) tell users that if they use lightbox2 and google analytics together their sites will break in Firefox.

If you can find a lightbox2 patch that fixes the problem, let me know!

Attaching the proposed downloadtracker.js patch since I apparently forgot to do that the last time!

Cheers,
Stella

An additional workaround for lightbox2/GA users could be to remove the download tracking extensions in the GA configuration. This causes GA to remove the downloadtracker.js file, but normal GA tracking together with lightbox2 functionality should work. They only loose the download tracking feature in GA. This is not perfect, but it could be a workaround that works today.

Maybe you are able to verify this.

I'm only reluctant about adding a workaround to GA for every module that exists and like to use click() events. You might get the same issues with other modules, too. Next time it is a module XYZ that conflicts with Lightbox... so we would never get the hands around this workarounds :-(.

Core maintainer Gabor already said - if there is a bugfix release for jQuery 1.2.3, he will add this release to core updates. So we will get jquery bugfixes into core if the jquery update does not change api's used by core. If this update is not possible or will never happen in D6 times, but a bugfix exist... you could tell lightbox2 users to overwrite their core jquery.js file them self. But this should be worst case... and i think the jquery_update module will be out soon for D6, too if core maintainers refuse updates.

Aside... you should be somewhat "crazy" and use page preprocess in lightbox to alter the core js array and replace the core jquery with a newer version in your lightbox folder... if a fix becomes available. This is brainstorming and could cause troubles, but is possible :-).

As jQuery runs on Drupal, it may help in jquery bugcase to add the info about affected modules, but not sure :-).

I have emailed john about this, hopefully he is able to take a look soon.

Who's John?

John Resig, jQuery Maintainer

Great! Maybe it will actually get fixed soon then.

now work perfectly! thank's !!!
tested on firefox 2.0.0.12

@Supercus: nothing works perfect. jQuery is broken in Firefox. Test GA with lightbox2 together any you will see.

no, now work truly!
see my site (is under construction) http://lnx.cusenzamarmi.com/chiese with firefox

this are the modules that i have installed:
-Drupal 6.1
-FCKeditor - WYSIWYG HTML editor 6.x-1.1-beta2
-Google Analytics 6.x-1.x-dev (2008-Mar-06)
Lightbox V2 6.x-1.x-dev (2008-Feb-29)
Menu Breadcrumb 6.x-1.1
Pathauto 6.x-1.x-dev (2008-Mar-06)
PNG Fix 6.x-1.x-dev (2008-Feb-07)
Token 6.x-1.10

and for me after i have updated GA now lightbox work perfctly!

No, it's broken.

1. Klick on one of your image
2. background gets gray... image is loading
3. Image is shown in a "new" window, background is lost and you left the original page (this is the bug we are talking about here)

I'm able to repro this on your site.

it's very strange... before of today i had this same problem/bug, today, after update GA, lightbox work on my firefox correctly, strange, very strange ( i don't change anything on firefox... mumble mumble...)

update---

i have tested on another pc and the bug is present, why my firefox work properly??

yes, I did remove the download tracking extensions in the GA configuration and it helps. I don't need this feature at this moment, maybe later it will be interesting but hope this will be solve ;-)

I've also noticed that adding to the "recognized tags" in Lightbox settings will disable the effect as well.

JoshuaB86: can you provide more information? disables what effect? If it's a different lightbox issue, please open it up in a separate issue.

Using latest dev release of google analytics does not help here.

"Removing the download tracking extensions" does work. For other newbies like myself, that means simply unchecking "Track Files" in Administer » Site configuration » Google Analytics.

FYI - GA and Lightbox under D6.1 work fine in Firefox3 beta, just not FF2

You can use

$(anchor).click (function(evt) { Lightbox.start(this); if (evt.preventDefault) {evt.preventDefault();} return false;});

instead of

anchor.onclick = function() {Lightbox.start(this); return false;};

Sorry, I can't do the patch file, but I think you should add if (evt.preventDefault) {evt.preventDefault();} everywhere...

Thanks PanDa777, that worked perfectly! I've made the changes to the lightbox.js and lightbox_lite.js files and they should be available in the next release. They'll also be available in the next dev release later today.

Cheers,
Stella

I'm getting this problem again in the latest version of the Dev release, released on April 28. Did this fix get lost somehow in the new version?

Ooops, yes, those changes did get lost. I've fixed this and checked it in again so it should be available in the next dev release available later today. Thanks chrishathaway!

Cheers,
Stella

Released in Lightbox2 6.x-1.6.

Cheers,
Stella

I don't understand much what this patch really does, but it looks like other things are broken, too. See http://drupal.org/node/256285... any idea? Is this the .click that is broken? Can we workaround in GA, too?

I think it is a jquery / firefox issue. Basically onclick doesn't appear to work but the jquery click() event binding function does.

Only to let you know - there seems a bugfix in the next jQuery. See http://drupal.org/node/256285#comment-848142.

This one seems the bug http://dev.jquery.com/ticket/2613 and now we should try this patch #256285: jquery.js: Fix CVS ID, remove SVN tags.