I’m frustrated

gaAddons conflicts with JQuery Colorbox Lightbox

I've been successfully yusing a JQuery Lightbox add-on called Colorbox for displaying various modal windows on my website. But once I added the gaAddons script file, it conflicts with the Colorbox modal windows in which the windows are "breaking out" of the layered window.

Here's a page w/o the gaAddons script: http://iomstage.invensys.com/EN/WebTe...

And here's the same page but with gaAddons:
http://iomstage.invensys.com/EN/WebTe...

If you click on the "subscribe to our newsletter" link, you can see the modal window working in the page w/o the gaAddons script. But the page w/ gaAddons, the modal window is broken.

(I tried loading gaAddons 2.2.0 beta instead and it's still the same problem.)

I'm trying to figure out what's the conflict and if I can fix this somehow?

Thank you for your help!
1 person has
this question
+1
Reply
  • I have a pretty good idea of the issue, this will be fixed in v2.2
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Can you tell me when v2.2 will be released? I see that you have v2.2.0b posted on your site. Thank you!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Any status update on this issue? I use lightbox and have the same problem.

    Thank you,
    Nelson
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Just checking on a status update on this? I am quite anxious to use gaAddons on our website but cannot until the conflict with Colorbox is fixed. Thank you!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I was able to create a test case to show why this is happening and it's when your modal window is linked to a page that's cross domain and you're using the parameter within google analytics _gaq.push(['_trackOutbound']); with gaAddons

    Should you use gaAddons version 2.2 and colorbox version 1.3.17 and your linked page "example.com/test.htm" opens in an iframe on the same domain as the host domain ie. "example.com", then iframe will NOT collapse.

    Should you use gaAddons version 2.2 and colorbox version 1.3.17 and your linked page "example.com/test.htm" opens in an iframe on different domain ie. "test.example.com/test.htm", the iframe WILL collapse on itself.

    Test Case: http://www.apus.edu/_test/ga-addons/i...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 1
    I reached out to the developer at colorbox and provided my test case I shared above and this was their response in regards to the gaAddons:


    Looks like you are throwing an exception when you are loading that external page into an iframe:

    $('body').append('');

    This is unrelated to colorbox, but will cause colorbox to fail because it is built with JavaScript. The error that is being thrown will prevent it, or other scripts, from functioning properly.

    - Jack Moore


    The idea about escalating this issue is to bring awareness to what perhaps could be the problem. I hope this was at least helpful and that a solution can be provided at the gaAddons level.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I’m silly
    So in the end, the issue isn't really on gaAddons or colorbox side - I'm relieved!
    I sympathize with your troubles...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • So, to resolve the conflict with gaAddons interfering with the Colorbox iframe key, I have to remove the gaAddons _trackOutbound call.

    I've confirmed this with my test page by removing _trackOutbound call, and the cross-domain links using the Colorbox iframe key began to work again.

    I've also confirmed that the _trackOutbound call does not interfere with Colorbox iframe links that point to a page on the same website. The issue is just with gaAddons' _trackOutbound call interfering with Colorbox iframe links that point to cross-domain webpages.

    (BTW, Colorbox's iframe key does support displaying cross-domain webpages -- I know this because this is one of their examples shown at http://colorpowered.com/colorbox/core... in which they display Google.com based on the iframe key.)

    But that means I can't use gaAddon's feature to track outbound links, which is still desired in my GA reports.

    Stephane, can you still keep this issue on your bug list to fix? I think I've demonstrated that there is an issue with the gaAddons _trackOutbound call interfering with the Colobor iframe key for displaying cross-domain webpages.

    I've tried listing the
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • well, that solves the problem, because gaaddons would then no longer track outbound links thus no longer break your colorbox iframe, but it's no solution. I just tried to prove where the issue is...

    for example, a new developer of ours recognized this issue after i demoed it to him and wrote an exception for me to test that ignores "_trackOutbound" when its used with the css class that fires colorbox iframe modal window that way gaAddons doesn't cause the iframe to crash anymore.

    it's a work around so we can continue having external links tracked that don't use the colorbox iframe, but then links that have the exception won't get the outbound link tracking. it's a lesser of two evils, but based on your example you posted, our little "hack" may not help you since you need to track that outbound link regardless.

    this issue is definitely not solved and should a new version of gaaddons be released, i hope this issue is addressed, too.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Evan: Is it possible to share the exception your developer wrote which ignores the _trackOutbound with the Colorbox css class but still allows you to use _trackOutbound for other "regular" links that point to cross-domain pages?

    That would be a better workaround, as it would allow me to contin to use gaAddons to monitor at least some of my outbound traffic.

    Thanks!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • What about using something like _gaq.push(['_trackOutbound', {exclude: /www.apu.apus.edu\/_test\/ga-addons\/p...)

    Remember you can use include & exclude regex to narrow down exactly what you want to track.

    Still, I will keep this as a bug, there seems to be a conflict between _trackOutbount and _setXDomain
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Can I use a wildcard in the exclude statement above?

    The problem is that I have alot of external webpages that include a unique ID in the URL, and it would be impossible to list every single address to exclude.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • @mari.fujii our modification is not fully tested yet as i'm not the analytical expert that can verify the external tracking is coming over properly without support from our GA vendor to confirm. i do believe "outbound" traffic should be captured as an event under the GA 3.0 code and I'm not sure if this hack supports this since I did not provide that requirement when he wrote the exception. So, i'm not sure if our approach is even feature complete.

    Simply place this JS hack (shown below) right after s.parentNode.insertBefore(ga, s); in your GA code.

    JS Hack
    $('a:not(.outsideContent)').click(function () {
    pageTracker._trackPageview('/outgoing/' + $(this).attr('href'));
    });
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Thanks Evan! I added your hack code above to my test page based on the CSS class name that I use for Colorbox iframe links, and it seems to work with my Colorbox link continuing to work. But I'll add this to my staging site to further test before deploying. Again, thanks everyone for your help!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated