0

I'm trying to change some of the page html content according to specific query string using javascript fired by Google Tag Manager.

The issue - that it not stable, it works sometimes and shows the pic and sometimes it doesn't for no reason.

HTML

<style>#dc {display:none;}</style>
<img id="dc" class="alignleft wp-image-2685" src="/someImage.png" width="269" height="400" />

JavaScript

<script type="text/javascript">
     $(document).ready(function() {
            $('#dc').show();
        } 
       );
</script>

Here is the Tag in GTM: enter image description here

I've tested if the Tag is firing and all, and it fires correctly (when querystring dc=1), here is the trigger:

enter image description here

Anyone has any idea why it's not working stably? how can I fix it?

Fadi
  • 45
  • 8
  • Have you checked out for errors? in console for example – FindOutIslamNow May 02 '18 at 10:31
  • No. Is this helpful: gtm.js?id=GTM-NMC9HDC:90 Uncaught {Hd: "Uncaught TypeError: $ is not a function - :1"} Hd : "Uncaught TypeError: $ is not a function - :1" __proto__ : Object | image: https://i.gyazo.com/513fba4a4a8615fdc9f45123e1102a09.png – Fadi May 02 '18 at 12:17
  • I guess it is related to jquery. Make sure it is included with the correct version – FindOutIslamNow May 02 '18 at 12:25
  • Interesting fact - after several tests, it works 100% in Firefox, and only 5-10% in Chrome – Fadi May 02 '18 at 12:54

2 Answers2

1

It seems you have a race condition: the GTM tag seems to be firing in some cases before jQuery is loaded (hence the $ is not a function error, because $ doesn't exist at the time the tag is executed, the reason why only with Chrome and not Firefox is because not all browser behave the same :)).

What you can do is insert the following script in your code after jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  dataLayer = window.dataLayer || [];
  dataLayer.push({event: "jquery_loaded"});
</script>

Then create a GTM trigger using that custom event:

enter image description here

And replace the DOM Ready trigger with that one.

If you have a race on 2 conditions (jQuery loaded and some content being loaded dynamically), then you can write a small loop with setInterval which fires a GTM event (to be used as trigger) when both conditions are met.

Max
  • 12,794
  • 30
  • 90
  • 142
  • Thanks @Max , I'm firing the JQuery script using GTM. Could that be the reason? If yes - what is the best practice to fire it, or should I implement it in the page directly? – Fadi May 20 '18 at 12:40
  • The most common design pattern is load your core libraries (eg jQuery) synchronously from the source code (https://learn.jquery.com/about-jquery/how-jquery-works/), precisely to avoid race conditions like you have. If you still want to load them via GTM (which will be async due to the nature of GTM), the solution is to push dataLayer events when scripts are loaded (I gave 1 solution, here is another https://stackoverflow.com/questions/12820953/asynchronous-script-loading-callback#answer-12821561), and use those events as triggers to perform other tasks (load other JS files, use of jQuery etc) – Max May 20 '18 at 13:42
  • I've implemented the jQuery script in the source code and it solved the problem, thanks ;) – Fadi May 21 '18 at 12:17
0

The reason why it works in Firefox and not Chrome might be a result of the tailing feature that Firefox has implemented since version 57. It delays the loading of tracking scripts (up to 6 seconds) until your other scripts are loaded. Thats why jquery is loaded before your tag as mentioned by Max.

Nedo
  • 199
  • 1
  • 4