I'm still a little bit blind regarding your issue but I try to give you some direction and maybe we could solve this. There are many ways to add cookiebot to the site, I have never used Google Tag Manager for that.
First about the error:
Uncaught TypeError: $ is not a function at...
When you see the above error in the console then it means that the jQuery shorthand/alias $
variable is unavailable, thus not defined as jQuery
. Then a jQuery script that wants to use that variable as jQuery cannot run.
But it usually does not mean that the jQuery library is not loaded on the page. It usually means that someone wrote a jQuery script without giving enough attention to the above possible issue. And it means that jQuery library is loaded in noConflict() mode as it is the case in Joomla.
So adding only 1 or 2 lines to a jQuery script could solve this problem, however in your case I'm not sure that you can write in the jQuery code which is running on your site.
In your case, if you go to your template folder (of your default site template) in Joomla with any code editor and open the index.php
file and after the line <jdoc:include type="head" />
(but before the closing </head>
tag), place the following:
<script>
var $ = jQuery; // or var $ = jQuery.noConflict(); // both can work
</script>
This one line above defines $
variable again for jQuery and the error from the console should be gone actually.
Now, this is not a nicest solution since this issue should be handled in the jQuery script itself but this is a solution now and most probably will not cause any more issues later (warning: if the template will be updated this edited part will be overridden by the update).
If you can check and edit the problematic jQuery script then you should start/wrap the jQuery function for example like this to be able to use $
inside the function:
jQuery(document).ready(function ($) {
// ... all your jQuery code can use now $ inside the function ...
});
I could also write about all of the methods how you can load the jQuery framework in Joomla <head>
but the jQuery library is already loaded on your pages so that is not the problem (even if it is a bit outdated version). You can read about that here if you would like to: https://docs.joomla.org/Adding_JavaScript , more precisely: https://docs.joomla.org/J3.x:Javascript_Frameworks
(I also do not consider at all the sequence of loading the libraries would be a problem of your issue, since as I see Cookiebot main scripts do not use jQuery).
Other possible cause of JavaScript conflicts in Joomla when jQuery libraries loaded together with mootols JavaScript libraries for example. You can experience quite weird behaviors without getting any errors in the console. You have to carefully check the loaded JavaScript libraries in the head and you have to disable other JavaScript libraries if you meet with these situations to see if that can help to solve the problem. So the problem with JavaScript libraries is that you cannot use some of them together when each of them tries to use $
variable on the same page.
I hope that this simple edit can help you to handle the problem.
More reference about this jQuery subject: https://api.jquery.com/jQuery.noConflict/
For alternative solution, you maybe would give a try for using a free third party Joomla plugin to add Cookiebot, for example: https://www.schrijvers123.nl/joomla/cookiebot/cookiebot-for-joomla (I have not checked this more deeply, but it looks like a simple, useful plugin).
And you can also study a bit more about how to modify the <head>
of the documents in Joomla if needed: Modification of the generated Joomla head (<jdoc:include type="head" />)
UPDATE
Now I had some extra time and I have checked this issue a little more and I have found some interesting things about why the above is not a solution, but more importantly why the original question and problem is misleading in the first place.
I used the plugin I suggested above and I added Cookiebot to one of my test site to see how that works, and it took no more than like 6-8 minutes to get a fully working cookiebot on the website (using that third party Joomla plugin).
But:
Cookiebot worked without using any jQuery library at all. For testing this, I unset all of the jQuery libraries from the test site so there was not a chance for jQuery at all. Cookiebot was working without any problem.
I have not found any point about loading jQuery libraries in the installation guide on Cookiebot official page.
If jQuery were needed for anything please load all of the 3 jQuery libraries on the page: jQuery core, jQuery UI and jQuery migrate. I mean if Google Tag Manager requires jQuery.
Uncaught TypeError: $ is not a function at centerScreen (eval at CookieControl.Dialog.globalEval
Second Error:Uncaught ReferenceError: jQuery is not defined at eval (eval at CookieControl.Dialog.globalEval
I have the jQuery library in the HTML -<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js" type="text/javascript"></script>
The cookie library is loaded higher in the HTML script. I do not know how to firstly add a more up-to-date jQuery library and secondly add it at the very top of the <head> @Zollie