Lightgallery module can disrupt analytics on your Drupal site

If you're using the Lightgallery module on your Drupal site in combination with Meta/Facebook Pixel or Google Tag, the module's settings can potentially interfere with tracking the PageView and/or some other events. Let's explore why this happens and how to resolve the issue.

My wife noticed that the PageView event in the Meta Pixel on her Drupal e-commerce site, which I built, wasn't working correctly in all cases. The same issue occurred with Google Analytics. To start troubleshooting, I installed the Meta Pixel Helper extension for Chrome. As I suspected, the extension showed that the pixel was firing multiple times. The error message reads:

The Facebook pixel activated 2 times on this web page, which can cause errors in your event tracking.

If I had opened the image in Lightgallery a few more times, this number wouldn't be two but higher, of course. By using this extension, you can also check if you have a similar issue on your Drupal site.

To save time debugging the issue, I asked Claude AI what might be causing it. Claude was almost certain about the problem: Lightgallery uses the History API to change the URL when an image is opened. Then I looked through the module's settings and found this option:

By disabling this option, Lightgallery will no longer change the URL when an image is opened, preventing the events from being triggered multiple times. Lightgallery modifies the URL by appending something like this:

#lg=1&slide=0

This option is located in the Manage display tab of your product type or variation, depending on where you placed the image field. The setting can be found in the configuration of the Lightgallery formatter.

Keep in mind that this also means your users won't be able to copy the link to the product image in the modal. However, this is likely a less critical feature compared to having Meta/Facebook and Google analytics working properly.

Note for developers: To check if your Pixel is being triggered multiple times due to the use of the History API in the browser, run the following command in the Chrome browser console:

history.pushState({}, "", window.location.pathname + "?image=1")

Now check what the Chrome extension shows—does the number of Pixel activations increase or not? Do you see the same error I mentioned earlier? If you change the parameter to ?image=2 and run the code again, the error will say: The Facebook pixel activated 3 times on this web page, which can cause errors in your event tracking.

With the right approach to problem-solving and combining it with the use of artificial intelligence, issues like these can be resolved quickly. AI didn't completely solve the problem for me, but it gave me a good hint, which significantly reduced the time needed to fix it.