• GTM Courses
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
  • About
    • About
    • Contact
  • GTM Courses
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
  • About
    • About
    • Contact

January 22, 2018

Massive List of 60+ Custom JavaScript Snippets for Google Tag Manager

More than a year ago, when this blog saw the daylight, my vision was (and still is) to make Analytics Mania No.1 place to find Google Tag Manager resources. Yes, I know it’s next to impossible to surpass Simo’s blog, but hey, let me dream big 🙂

As a result, the library of 30+ GTM recipes was born and its popularity exceeded my biggest expectations. Also, let’s not forget The Ultimate list of 120+ GTM Resources, GTM Checklist (60+ items), huge Google Tag Manager Glossary, etc.

Months went by and I noticed another growing demand among members of web analytics communities, an online library/collection where one could find various JavaScript code snippets (ready to be used in GTM).

Turns out such thing still does not exist! Or at least I couldn’t find one online. Hmmm.. Time to shine?

Rubbing hands gif

I present you a massive list of custom JavaScript snippets for Google Tag Manager. But don’t forget to use them wisely. The majority of code pieces should be added as Custom HTML tags, while a tiny fraction should be utilized as Custom JavaScript variables in GTM.

Each link will redirect you to a GTM recipe or a blog post (written by me or other authors) which provide detailed installation instructions. For your convenience, I’ve split all codes into categories.

Obviously, this list is not in its final form and will grow in the future so if you haven’t yet, subscribe to Analytics Mania’s updates in the form below.

Do you notice something missing? Do you have an awesome script hiding in your pocket? Let me know in the comments and I’ll include it on the list.

Regular readers of Analytics Mania will (probably) already know a lot of these scrips but I promise that everyone will find something new. Ready? Let’s go!

 

The appearance of particular elements

#1. Hover Listener pushes events to the data layer about hover interactions that occur over the given CSS selectors in the page.

#2. Custom Element Visibility Listener which tracks when certain elements appear and disappear from the screen (after scrolling up or down).

 

Audio players

#3. Soundcloud player listener tracks interactions with embedded Soundcloud player on your site (Play, Pause, and view 25, 50, 75 and 100% of the audio track).

#4. Mixcloud player listener tracks interactions with embedded Mixcloud player on your site (when visitor listens to 25%, 50%, 75% of the audio track. Other possible events are: ‘buffering’, ‘play’, ‘pause’, ‘ended’, ‘error’).

 

Browsing-related scripts

#5. Track when visitor bounces back to Google’s search engine results (SERP).

#6. Tab visibility tracking enables you to track when the browser tab with your website in it is hidden or visible.

#7. Check if a visitor is using Ad Blocker.

#8. Detect if a visitor is using incognito mode.

#9. Exit-intent listener fires data layer event when visitor tends to leave your website.

#10. Print listener tracks when someone prints a page of your website.

#11. Copy text listener tracks when someone copies a text on your website.

 

Chat/comments

#12. Track Facebook comments (embedded on your site).

#13. Track DISQUS comment submissions.

#14. Track Zendesk (formerly Zopim) chat widget interactions.

#15. Track Tawk.to chat widget interactions.

 

Cookies

#16. Implement Cookie consent when a new visitor lands on your page.

#17. Set cookies in visitor’s browser (then read it via 1st Party Cookie Variable).

#18. Set cookie with page view count. With every page view the counter in the cookie increases by 1. Useful for those who want to fire a particular tag after, say, 3rd page view.

 

 

Device-related

#19. Visitor’s Variable – Screen Width (Custom JavaScript Variable)

#20. Is visitor browsing with mobile device? (Custom JavaScript Variable)

 

Form tracking

#21. Track drop-down selection.

#22. Track form abandonment.

#23. Track form field timing.

#24. Gravity forms listener. In one of my blog posts, how to track form submissions, I’ve explained how to write a custom auto-event listener without coding skills. Gravity forms were chosen as an example.

#25. Contact Form 7 form submission listener.

#26. AJAX form tracking by taking advantage of Lunametrics’ AJAX listener. In fact, you can track any web interaction which is based on this technology.

#27. Pre-fill form fields. This technique is useful when you want to see what was the exact traffic source of each submission (without the need of checking Google Analytics).

 

Pro tip: I recommend bookmarking this list in case you’ll need some custom JavaScript snippets for Google Tag Manager to have within a hand’s reach.

 

Page-Related

#28. Track page load time.

#29. Is the page within an Iframe? (Custom JavaScript Variable)

 

SEO

Remember, it’s always better to add SEO stuff (like schemas, meta tags, etc.) directly via code. Anyway, here are some codes (for science).

#30. How to insert rel=”cannonical” with GTM.

#31. Add schema markup.

#32. Fetch values of page’s meta tags (Custom JavaScript Variable).

Updated: There is a newer guide how to implement SEO changes via GTM.

 

Social networks

#33. Track clicks of Twitter buttons (embedded on your site).

#34. Track clicks of Facebook Like, Send buttons (embedded on your site). Update: Facebook has deprecated Send buttons at all and has also deprecated the ability to track Like buttons. So this list item is obsolete.

#35. Track social shares made via AddThis plugin.

 

Time/weather

#36. Fetch the visitor’s local time and split the traffic into content groups.

#37. Catch visitor’s weather data and send it to Google Analytics.

#38. Custom timer trigger which starts when another interaction occurs (e.g. a click).

 

Traffic-source-related

#39. Transfer UTM parameters from one page to another. This is useful when cross-domain tracking isn’t possible, you have an intermediate landing page, and you want to transfer its UTM parameters to the next page.

#40. Is visitor organic? (came from a search engine), Custom JavaScript Variable.

 

Video players

#41. Track Vimeo player interactions.

#42. Track Wistia player interactions.

#43. Track JW player interactions.

#44. Track generic HTML5 video player interactions.

#45. Track Vidyard player interactions.

 

Other

#46. Name of the downloaded file (Custom JavaScript Variable)

#47-50. Konami codes. Simo Ahava published a listener which captures the famous combination used as a cheat code in video games. I added some minor modifications (found online) and as a result you can now use 4 different Konami codes:

##47. Doge Konami Code.
##48. Harlem Shake Konami Code.
##49. Rick Roll Konami Code.
##50. Shooting Start Konami Code.

#51. Change Android Chrome’s address bar color.

#52. Add a copyright notice to the text copied from your website.

#53. Komito Analytics. A quick-to-install library which automatically tracks various interactions and sends that data to Google Analytics.

#54. Random number (within a defined range), Custom JavaScript Variable.

#55. Remove personal identifiable information (PII) from URLs.

#56. Track website’s autocomplete search.

#57-63. 7 Custom JavaScript Variables for GTM.

 

 

Final words

I am 100% positive that this list is far from complete. There is still a bunch of useful script wandering somewhere out there. Help me make this library/list/collection/whatever even bigger, therefore make it more useful to readers like you.

Gotta catch em all

Do you miss something in the list of Custom JavaScript snippets for Google Tag Manager? If so, let me know in the comments, Twitter, Linkedin or julius [at] analyticsmania.com.

Julius Fedorovicius
In Google Tag Manager Tips Resources
21 COMMENTS
Ronnie
  • Jan 23 2018
  • Reply

Love this list so helpful. I want to use number #37. Catch visitor’s weather data and send it to Google Analytics, but the link seems to be to the wrong recipe. Great list!

    Julius Fed
    • Jan 23 2018
    • Reply

    My bad. Fixed. Thanks for noticing!

Idan
  • Jan 23 2018
  • Reply

There is a wrong link on the visitor's weather data bullet, it links to the track post comments article...

    Julius Fed
    • Jan 23 2018
    • Reply

    Thanks for the heads up! The link is fixed now.

Brian
  • Jan 23 2018
  • Reply

Thanks for creating this, Julius. For beginners it can be difficult to know what is possible with GTM and where to begin designing tags. Many of us truly appreciate your effort with this. Keep up the good work.

n
  • Jan 26 2018
  • Reply

#3 for https://www.analyticsmania.com/google-tag-manager-recipes/soundcloud/
didn't work

    Julius Fed
    • Jan 28 2018
    • Reply

    Hey, I've just tried it here https://soundcloud.com/pages/embed and it worked fine. When I clicked Play or Pause in the embedded player, "scEvent" appeared in GTM's Preview and Debug mode.

    Maybe your Soundcloud player is loaded dynamically (in a popup)?

John Wedderburn
  • Feb 16 2018
  • Reply

I could not see Simos code for client ID, among others - super useful for troubleshooting and awesome analysis.

    Julius Fed
    • Feb 16 2018
    • Reply

    Hey, could you give me a link to that post?

Peter
  • Feb 23 2018
  • Reply

Hey Julius,

Is it possible to track the "save as" event when users save the entire webpage as an html file on their local disc ?

Thanks,
Peter

Steven Godlewski
  • Apr 28 2018
  • Reply

This is great. I was just going to do a basic quick setup for a client was google searching to double check a variable setup and found you. That was 6 hours ago and I am still playing. Thanks for the rabbit hole I fell into. Great stuff. Been using Tag Manager for a while. This is the best easy resource I have found in years. THANK YOU!!!

Alex
  • Jul 4 2018
  • Reply

Hello! I did everything as described here #31. Add schema markup., but the structured data check tool does not show anything. What could be the reason?

    Julius
    • Jul 4 2018
    • Reply

    Hey, it's a known bug of the markup checker tool. All we can do is to wait for Google to fix the issue. Even if the code is added properly, markup validator will not show anything.

      Alex
      • Jul 4 2018
      • Reply

      Thank you, but one more question. After which time the extension will appear in the search. Ie, that I visually see in the issue what it works?

        Julius
        • Jul 4 2018
        • Reply

        That's more of an SEO question and I'm not the right person to ask such questions.

Althend
  • Sep 25 2018
  • Reply

Your list is amazing.

Thank you very much !

Laura Scott
  • Nov 21 2018
  • Reply

Could you include Facebook pixel installation?

    Julius Fedorovicius
    • Nov 21 2018
    • Reply

    Hey, you can learn more about the FB Pixel installation here https://www.analyticsmania.com/post/facebook-pixel-with-google-tag-manager/. I did not include that in this guide because this article is dedicated to custom scripts that are not a part of a 3rd party tool, like FB Pixel, LinkedIn Insight tag, etc.

Stephen
  • Jul 9 2019
  • Reply

Is it possible to track page share via email like the other social shares?

    Julius Fedorovicius
    • Jul 11 2019
    • Reply

    Depends on the social share plugin you're using:
    - Either that plugin offers an API that GTM can use (Siteimprove social share plugin, as far as I know/see, does not have that option)
    - You can try using click tracking. When someone clicks on a "share via email" icon/link, then you can send it as an event. But this tracking does not guarantee that share was actually completed. But on the other hand, you have no other choice.
    - If click tracking is not working, most likely that email share widget is in the iframe (meaning that tracking will most likely be impossible)

Aditya Venkatesh
  • Nov 21 2019
  • Reply

Hey Julius,
Could you show how to return the x , y coordinates on click events over the page and must be done using a Custom Javascript Variable.
I've been trying out but only comes up showing 'undefined'.

Leave a comment Cancel reply

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

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and GA (but mostly GTM). Join other 100 000+ monthly visits and 14000+ newsletter subscribers in this exciting journey. Read more
Essential resources


Popular articles
  • 🔥 GTM Form Tracking: 7 Effective Methods
  • 🔥 dataLayer.push: The Guide
  • 🔥 GTM vs Google Analytics
  • 🔥 99 Things You Can Do with GTM
  • 🔥 Common GTM Mistakes
  • 🔥 Data Layer: Ultimate Guide
  • 🔥 60+ Custom JavaScripts for GTM

Early-bird discount expires:

Days
Hrs
Min
Sec
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
  • RSS feed
Recent Posts
  • Track Contact Form 7 with Google Tag Manager
  • Missing DOM Ready and Window Loaded events in GTM?
  • The most up-to-date GTM course is here
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings