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.
injectScript The API is just what the doctor requested to load third party SDKs via Google Tag Manager.
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).
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
And then, in the form, paste This path is in the respective domain.
The form has whitelisted all URLs from
https://www.cdnjs.com/ajax/libs, 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.
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!