Change html content using JavaScript and Google Tag Manger

Question

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:

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

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

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: i.gyazo.com/513fba4a4a8615fdc9f45123e1102a09.png — Fadi
– Fadi, Commented May 2, 2018 at 12:17
I guess it is related to jquery. Make sure it is included with the correct version — FindOutIslamNow
– FindOutIslamNow, Commented May 2, 2018 at 12:25
Interesting fact - after several tests, it works 100% in Firefox, and only 5-10% in Chrome — Fadi
– Fadi, Commented May 2, 2018 at 12:54

Max Corbeau · Accepted Answer · 2018-05-03 06:51:11Z

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:

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.

answered May 3, 2018 at 6:51

Max Corbeau

13.4k32 gold badges94 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fadi Over a year ago

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?

Max Corbeau Over a year ago

The most common design pattern is load your core libraries (eg jQuery) synchronously from the source code (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 stackoverflow.com/questions/12820953/…), and use those events as triggers to perform other tasks (load other JS files, use of jQuery etc)

Fadi Over a year ago

I've implemented the jQuery script in the source code and it solved the problem, thanks ;)

Nedo · Accepted Answer · 2018-05-03 18:27:52Z

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.

answered May 3, 2018 at 18:27

Nedo

2091 silver badge4 bronze badges

Collectives™ on Stack Overflow

Change html content using JavaScript and Google Tag Manger

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related