CDNJS Hosted Libraries Template for Google Tag Manager – News Couple

CDNJS Hosted Libraries Template for Google Tag Manager

One of the basic things to use Google Tag Manager for Text injection. Loading a third-party JavaScript library is trivial when using a file Custom HTML tagAnd it works like magic.

However, using custom HTML tags for anything is no longer the preferred way to add custom code to a site. Custom HTML tags are expensive DOM injections, and can be incredibly dangerous tools (for user experience, security, and privacy) in the wrong and/or inexperienced hands.

Fortunately, custom templates were introduced a while ago to help get rid of custom JavaScript snippets from floating around in the container. Moreover, the injectScript The API is just what the doctor requested to load third party SDKs via Google Tag Manager.

Please note that the download Which The third party javascript on the website is full of dangers, because injection attacks may invite malicious code to be executed on your site. If you are concerned about this, you should take a look at our Content Security Policies and Sub-Resource Integrity Checks to make sure that the third-party code that has been checked is properly executed on the site.

For this purpose, I created a file CDNJS – Hosted Libraries Custom tag template. Allows you to load libraries from the CDNJS CloudFlare repository.

You can download the template from the template gallery.


Simmer . Newsletter

Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!

Using the included library

The template allows you to either Choose from the list From some of the most popular third-party libraries, or you can also type in the path to the library if it’s not in the list.

The libraries included are:

  • D3.js – Visualization library.
  • Dojo – A framework for designing and building applications.
  • Ext Core – A framework for designing and building applications.
  • Hammer.js – A library of multi-touch gestures.
  • jQuery – A library for DOM operations.
  • jQuery Mobile – A touch framework optimized for mobile devices and tablets.
  • jQuery UI – A library for building user interfaces with jQuery.
  • Knockout – A framework for building responsive user interfaces.
  • MooTools – A lightweight object-oriented framework.
  • Prototype – A framework for designing and building applications.
  • Three.js – a library for creating and displaying 3D graphics.
  • Web Font Loader – A library for downloading web fonts.

When you choose one of those, you need to select a file Issuance the library. To find out the version number to enter, you need to visit CDNJS to find out the latest version (or if there is an older version you need).

jQuery version example

The benefit Using an included library is that there is some internal logic in the template that checks if a file is global way Already added by the library, in this case the library load prevented. This is useful as it reduces the potential overhead of reloading already downloaded libraries.

Manually add a library path

If the library you need is not in the list, or if you want to avoid the general method check described in the previous paragraph, you can also add the library path by selecting Enter the path manually in the form options.

For example, if you want to add clickspark.js To the site because you are just dying due to the little sparkle effect on every mouse click, you first have to look for clickspark.js in CDNJS.

Once you find the Library page, you will see the list of available versions and the SDK URL. Always try to choose a file mini version the library. usually end in .min.js. This reduces the size of the library that is downloaded by the user’s browser.

From this URL, copy everything from /ajax/libs/ onwards. NS clickspark.js, you can copy it /ajax/libs/clickspark.js/1.16.0/clickspark.min.js.

Clickspark URL

And then, in the form, paste This path is in the respective domain.

Track added manually

The form has whitelisted all URLs from, so there should be no issues as long as you paste the path correctly.


This is a simple template that serves a specific purpose. It gives you some control over the third-party libraries that are uploaded to the site via Google Tag Manager.

Gentle reminder:

Try not to upload anything through Google Tag Manager that might serve a more common purpose than just tracking or advertising.

For example, don’t load jQuery through GTM if you need jQuery for site functionality. why? Because users can block GTM, resulting in an inconvenient user experience for those who don’t want to load the Google Tag Manager on the page.

I also want to point out the caveat in the introduction to the chapter of this article. Third-party libraries are vulnerable to malicious attacks, and by loading them through the Google Tag Manager, you open up a potential attack vector.

Other than that, enjoy the template! Let me know if I missed some pretty obvious 3rd party libraries that should definitely be on the list!

Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button