Conflict with the Click Listener of Google Tag Manager

[pantaluna]

Hi, The Colorbox does not work anymore on 2 Colorbox-enabled websites after Google Tag Manager (V2) was deployed on these websites.

If you click on a Colorbox enabled anchor link then the image-url is opened in the browser tab/window, so only the image is shown. The normal behaviour is that the Colorbox overlay is displayed and the clicked image is shown in the overlay.

Scenario:

1. Open http://www.feestdagen-belgie.be/agenda-toevoegen-outlook-com/
2. Goto the section with the screenshots (the one with a thumbnail and some short links below it).
3. Click on the thumbnail, or an anchor just below the thumbnail. Screenshot: https://dl.dropboxusercontent.com/u/5629939/temp/capture_20150715_213214.jpg
4. The image opens very briefly in the Colorbox overlay but... 0.5 seconds later the image-url is opened "full screen" in the browser. Expected result: open the image in the colorbox overlay, stay there and wait for user interaction. Screenshot: https://dl.dropboxusercontent.com/u/5629939/temp/capture_20150715_213217.jpg
5. Note the warning in DevTools console: Resource interpreted as Document but transferred with MIME type image/jpeg (I'm sure the http headers of the image are correct though).
6. If you do not see the problem then please open the webpage once more, or clear the browser cache and try again.

System: Google Chrome and IE (latest versions) on Windows 7. Firefox works fine consistently.

Colorbox init code:

jQuery(document).ready(function($){
    $("a.mjd-colorbox").colorbox({
        current: "{current} van {total}",
        maxHeight: "95%",
        maxWidth: "95%",
        rel: "mjd-colorbox"
    });
});

Notes:

• FYI: GTM is used for example to configure the Google Analytics tracking script, to track anchor clicks for analysis, some conversion pixels, etc.
• I can see in Chrome DevTools that 2 click listeners exist (one of Colorbox and one of GTM).
• Unfortunately the behavior is not consistent. It works fine 5-10% of the times you open a webpage with some Colorbox logic in it. It is probably a timing related problem which is impossible for me to sort out.
• I have tested it as well with a GTM version where all GTM Click Listener logic was removed (https://support.google.com/tagmanager/answer/3415369?hl=en#LinkClickListener) and that works fine (but this is of course not a final solution as the click data is neede for website analysis). This specific test was done on the dev website which is not publicly available (i might give jackmoore access if needed).

Thanks for your time.

[jackmoore]

Thanks for opening a ticket, but I don't see how this is a bug with Colorbox - it could be anything that's causing an error which would prevent Colorbox from working properly. There isn't a way I can safeguard against other scripts introducing errors, if that's the case.

You got a lot going on here so I don't plan on getting into debugging something that is specific to a single site. My recommendation is to create a minimal demonstration of the problem with only the scripts required to reproduce the issue.

[pantaluna]

Thanks for the follow-up. I did not say it is a bug in Colorbox. Note I already did quite some investigation. But it is somehow a conflict between these 2 components and I'm trying to fix it.

I can try to make a small mini website with a standard GTM tag (with a link click listener inside, no special logic added inside the GTM container) and some Colorbox things in there. Assuming the same things happen, would that be interesting for you (and me) to have look at?

[lperepol]

I am having a similar issue on a drupal site with colorbox and Google Tag Manager. Removing Google Tag Manager resolved the issue. The issue only appeared for me using Chrome. Clicking on the image the for first time, after a F5 cache flush, the image would not load in colorbox. It would just display the image. Pressing the back button (closing the image) and clicking on the image a second time, the image would load in color box. If I had a devel tools window open and clicked on the image after a cache flush the image would load in colorbox. Close the devel tools window and the issue resurfaced. -- weird behavior.

[nikola1970]

Having the same problem with GTM and fancybox as well... It is problem with GoogleTagManager.

[SpikeShape]

I am having the same issue, in my case GoogleTagManager vs. colorbox.

In my case I generate links after requesting a JSON file via AJAX where all information about the links are stored. All other links that are delivered directly with the initial request seem to work fine but as soon as I add content and initialize colorbox for the new links it seems to collide with Google Tag Manager.

Edit: I just found a solution that prevents these weird events from happening: Once you initialize the colorbox just bind the click events and prevent the default behaviour:

$('.zoom').colorbox().on('click', function(event) {
  event.preventDefault();
});

At least that's what fixed it for me.

[pantaluna]

@SpikeShape I'm glad it worked for you but for my system is not.

[SpikeShape]

I just tried it on your page. I entered the following using the Developer Tools in Chrome:

jQuery('.mjd-colorbox').on('click', function(event) {
  event.preventDefault();
});

It seemed to work as expected. At least I could open the image and switch between them without leaving the page.

I found an article on a blog describing how the GoogleTagManager works and how it delivers the events: http://www.simoahava.com/gtm-tips/fix-problems-with-gtm-listeners/

I hope that helps.

[pantaluna]

@SpikeShape okay it works now. thanks!

[jackmoore]

@SpikeShape Thank you!

Google Tag Manager is not something I have experience with. Colorbox does do a preventDefault on click event, but it's delegated to the document body in order to minimize the number of event bindings. I'm guessing by default GTM is intercepting the event before it has a chance to bubble all the way up, leading it to the wrong conclusion about what to do. Either way your solution looks fine to me.

[Chrispnv]

Hi, I am having the same issue with colorBox. I have tried with preventDefault() on .on event without success. I have images array and each photo with .photo tag class My code is the following and i have tried this

    $(document).ready(function () {
            $(".photo").colorbox(
                {
                    rel: 'galerie-photo',
                    width: '800px',
                    height: '600px',
                    onComplete: function(){
                        var img = document.querySelector('[class*="cboxPhoto"]');
                        wheelzoom(img);
                    }
                }
            ).on('click', function(event) {
                console.log('dans click');
                event.preventDefault();
            });
        });

and

  $(document).ready(function () {
            $(".photo").colorbox(
                {
                    rel: 'galerie-photo',
                    width: '800px',
                    height: '600px',
                    onComplete: function(){
                        var img = document.querySelector('[class*="cboxPhoto"]');
                        wheelzoom(img);
                    }
                }
            });
            $('.photo').on('click', function(event) {
                 event.preventDefault();
             });
        });

2 solutions without success. Where to put .preventDefault() on .on event in code.

Thanks for your help.

Christophe

[SpikeShape]

Hey @Chrispnv

The code seems to be correct so I assume there is something different like other events handlers. Would you mind delivering some markup or a dumped down jsfiddle?

[Chrispnv]

Thanks for your prompt reponse. it will be difficult because images are loaded from a database. I'm going to try with simple example on my web space. What is the best solution between the two I tried. First, .on event directly on colorbox() or second on photo tag class. I think my problem is the application loading time. In Chrome debugger network tab when application is loaded, colorbox is ok, if not colorbox is ko. Is it possible ? I have tried $(window).load instead of $(document).ready and the application works better with $(window).load

Thanks

Christophe

[metaesthetic]

I was also experiencing a conflict between Google Tag Manager v2 (GTM) and colorbox when loading an html page with the iframe option. I was using the Google Tag Manager and was also trying something somewhat fancy with GTM which was tracking outbound links. The html form page would load but then kick it to expand the whole browser/url. When i added an exclude with regex for my site URL it no longer fired that particular trigger when the colorbox iframe was opened. This may not be the solution for everyone since GTM can be quite complex and it depends on different triggers and variables - but i hope it helps those who use both the wonderful colorbox (Thank you Mr. Moore) and the very powerful Google Tag Manager.

[hh-com]

Solved my problem

$('a[data-lightbox]').on('click', function(event) {
           event.preventDefault();
});