Categories
Geniuslink News

Adding Custom JavaScript to your Website Using Google Tag Manager

Google Tag Manager is an awesome resource for anyone looking to easily make changes or updates to a website without having to alter the code. If you haven’t used GTM before, here’s a summary of what it can do for you straight from the horse’s mouth: “Google Tag Manager allows you to quickly and easily update tags and code snippets on your website or mobile app, and configure and flag values of mobile apps that you have created.” Or in layman’s terms – you can update or add code to your website or app without having to republish the site, or go through the process of updating and pushing your mobile app for approval again.

Pretty cool, right? In this post we’re going to show you how to add your own custom JavaScript code to a GTM tag that is already installed on your site. To demonstrate, we’ll show you how to do it using our Geniuslink JavaScript Snippet, but the same instructions hold true for any other snippet as well.

In case you’re not already familiar, the Geniuslink JavaScript Snippet is a great tool for automatically affiliating and globalizing all Amazon, iTunes, and Microsoft Store Links across multiple pages or an entire website. Using these two tools together is a recipe for an easily managed, conversion driving website.

How to add Custom JavaScript Code to a GTM Tag

Head over to Google Tag Manager and log in to your account. Once you’re in, select “New Tag.”

On the next page, label the new tag if you wish, and select “Custom HTML Tag.

Paste in the code of your choosing – or in this case, the Geniuslink JavaScript Snippet.

NOTE: As of February 23rd, 2017 the following changes must be made to the JS snippet for it to operate properly with GTM.

You will need to remove the “document.addEventListener(“DOMContentLoaded”, function() {“ line from the JavaScript Snippet, so your new JS Snippet should look like this:

<script type=”text/javascript” src=”//cdn.geni.us/snippet.js”></script> <script type=”text/javascript”> var tsid =23360; Genius.amazon.convertLinks(tsid, false, “http://buy.geni.us“); </script>

Then select any advanced settings, like the tag firing options.

  • Once per event means every time the GTM code is fired, this will also fire.
  • Once per page will only fire once, even if GTM is fired multiple times.

Click on “Triggering” and select “DOM Ready” as the Trigger.

For our snippet, we recommend having it fire every time GTM is fired, so that you ensure your links are always globalized and affiliated.

Select which events you’d like the tag to fire with — all DOM Ready Events or only some DOM Ready events, then click “Create Tag.”

Now, any time the GTM is loaded, it will call that JavaScript that you’ve added once you click “Publish.”  GTM also allows you to preview the changes before pushing live, so you can test to make sure everything is working.

Pretty easy, huh? It’s a great way to save you (and your engineering team) time and money when pushing new changes to your web and mobile properties.

Having issues, or want to learn more? As always, feel free to contact us if you ever have any questions, comments, or concerns regarding any of our tools.

Happy linking!

Team Geniuslink