Let’s face it: building a website from the ground up is no walk in the park. Your site can be the determining factor that draws an undecided visitor off of the cyber streets when they need you to make their decision for them. “Are we eating Indian or Thai tonight?” Once they arrive, the decision of what tools you’ll use to create a memorable experience is an important one–you want them to keep coming back. Thankfully, there are website builders a-plenty at our fingertips, as well as resources on how to set the table for your target audience and keep them interested. These simultaneously help you learn more about your audience each time they visit so you can better cater to their specific needs – “John always gets the Chicken Tikka Masala”.
So, you landed on a site builder and you’re off to the races. Now that your web presence has been established, the fun is just beginning. As a marketer for an established organization, small business owner, or even a one-man wolfpack, seeking to determine what about your visitor’s behavior you should take notice of is extremely valuable. With several useful third party platforms offering their take on your site’s activity, it can get overwhelming to keep up with it all. Now you need something to hold it all together.
What is GTM?
Google Tag Manager (or as I’ve once heard it called, the “Swiss Army Knife of Code Deployment”) can be the combining agent. Totally free to use with an active Google account, Tag Manager is a one-stop shop for each snippet of your site’s third-party JavaScript code that you can store, use and implement to track visitor data. It acts like a rolodex for your code snippets and tracking pixels (“tags”), letting you determine where they go on your site, what they do, and when they do it.
There are four key elements that are vital for understanding and getting started with Google Tag Manager: Container, Tags, Triggers & Variables
It all starts with a container. You need a place to store all of the code you’ll eventually be deploying across your site. Immediately after naming your GTM account (with your business name, or perhaps college nickname) you will be prompted to choose a container. Within this step you decide amongst 4 options for your “Target Platform”: Web, iOs, Android & AMP.
Next, we have the tag. Google calls a tag the “segment of code provided by analytics, marketing and support vendors to help you integrate their products into your websites or mobile apps.” Essentially, it is the “what” in the equation. Without having to piecemeal your site together by trudging through lines of unending (and often indecipherable) code, Google Tag Manager allows you to create a space for these individual tags to live. Later, they get sent to your page do the dirty work of site monitoring and statistics gathering.
After you’ve set up a few tags, your next step will be to implement a trigger or call to action to set these tags in motion on your site after a specific event has occurred. Think of a trigger as the “how”. In other words, if the end result of your tag is a bonfire, the trigger is the match that sets it all ablaze. Ultimately, you are deciding how your tag fires.
To take it a step further, you can also employ variables along with your newly triggered tags, which serve as an even more detailed means of drilling down into the specifics of both what your tags do and how and when they are triggered in particular scenarios. A common example of this use case would be if you wanted your tag to fire upon being triggered by the unique scenario (variable) of a visitor clicking a specific link or by landing on a certain page of your site.
How do I install it on my site? [Two Codes]
Now that we’ve taken a peek under the hood of our new set of digital wheels, it’s time to hop in and put it in drive – let’s talk installing Google Tag Manager on your website!
While you won’t need to have graduated top of your class at HTML University, Google Tag Manager does require some intermediate knowledge of website code. That said, there are several resources available that aid in understanding where to input the two necessary pieces of GTM code on your site before beginning your tag-creating journey.
In order to use all of the tags you’ll eventually whip up in Tag Manager, you’ll first need to install two very important pieces of code on your site. Google calls this necessary piece of the puzzle the Container Snippet. It is made up of one part JavaScript and one part non-JavaScript snippet, and they must be placed in specific places in the source code of your site.
The JavaScript should be placed as close as possible to the opening <head> tag on every page of your site. The closer this is pasted to the opening <head> tag, the quicker Tag Manager can start doing it’s thing. This portion of the Container Snippet is crucial in the pending deployment of your tags. There is logic within its framework (which we’ll simply call the magic of Google) that allows your page to load while firing your tags from GTM one at a time when they are ready and in no strict order. This keeps your tags from firing all at once – which as you can imagine, could cause quite a traffic jam of code that would rival a major interstate during rush hour. This would lead to incredibly slow load times on your site, and nobody wants that.
Following this small “developer-lite” task, the non-JavaScript code must be inserted after the opening <body> tag on every page of the site. This portion of the Snippet serves as a just-in-case scenario for visitors to your site who may be browsing without JavaScript. While this is most likely a rare find these days, and some may even deem this step unnecessary, it’s best to go with Google’s recommendations on this one (unless, of course, you are a developer or have something against one other small piece of extra code on your site.)
After this is complete, you’ll be ready to shout “Send in the tags!” Before doing so though, it may be worth your while to watch a few instructional videos on this installation or grab a helpful set up guide [like this one] to model your Coding 101 efforts after. Better safe than sorry! After all, if this isn’t installed properly from the onset, you’ll run into issues with the tags themselves not firing properly on your site – and as you’ll see in the next portion, a misfire (or no-fire) is the last thing you want.
Google Tag Manager & CallRail: [Code Number 3 & The Truth]
“With CallRail’s advanced analytics and reporting, you’ll know with certainty which marketing tactics drive qualified leads for your clients. It’s the single source of truth you need to efficiently grow ROI and prove the value of your work.”
Among the various tags you’ll create in your new Google Tag Manager Workspace, one that you should definitely pay attention to is CallRail’s JavaScript snippet. It powers dynamic number insertion for call tracking data as well as form tracking on your site – yes, all of that in one tag/snippet.
Are you curious as to who is calling your business? Or how they found out that you existed? Maybe you’re eager to develop a plan for when they call back? Or maybe you want to know what specific keywords a visitor searched after landing right on your contact form. All of that (and more!) can be tracked and reported to you with the use of CallRail’s JavaScript snippet.
The code provided by CallRail (that you’ll eventually want to create as a tag in GTM) powers one of the major foundations of CallRail’s attribution services – dynamic number insertion. After installing it on your site and creating numbers to track your marketing efforts, this code snippet uses DNI to detect your business number in your site’s source code. That number gets swapped with your CallRail number, which then displays to the visitor who navigated to your page through one of the sources you’re tracking. When your call is complete, depending on the types of numbers you create, everything from the source of the call, keywords searched, and more will be captured in your CallRail account. Pretty neat, right?
The same code applies to the logic behind CallRail’s Form Tracking. As long as the code is placed on the page where the form you wish to track exists, we’ll also capture the same data here and report it in your account.
This JavaScript Snippet will always be unique to the specific company sub-account you are working with in your CallRail account. So, if you are a marketing agency that manages multiple clients within CallRail, be sure you are viewing the correct JS Snippet for the company you are getting tags set up for in GTM.
Plus, now that you’ve gotten the hang of creating tags in GTM, lining them up with what you have in CallRail will be a piece of cake. And just in case you aren’t already sold on this easy-to-use solution for installing our code on your site, using Google Tag Manager with CallRail offers you the option to bypass bringing on heavy hitters on the developer side (again, you’ll still need to know what HTML is). Getting to the finish line will only take 5-10 minutes and a few clicks to complete. Upon logging into your Google Tag Manager Workspace, it will only take a few easy steps to get integrated with CallRail and thus get this powerful tag created & firing on your site.
Google Tag Manager & CallRail Setup
Step 1
Like a dream come true…
Start by selecting New Tag from your GTM Workspace.
Step 2
Give your newly created tag a name and then select the Tag Configuration box.
Step 3
Select Custom HTML in the Custom section of the Tag Type side bar menu.
Step 4
Traveling back to your CallRail account for a moment, open your JavaScript snippet integration page and copy the unique JS code provided to you. (Pro tip: Click the “Copy to Clipboard” button directly under the code text box to avoid any accidental copy/paste errors later on.) Then take this copied code and immediately paste it into the custom HTML text box provided back at GTM HQ.
Step 5
Choose your trigger by selecting the Trigger Box. While you can do whatever you want here, our recommendation is to set this script to fire on all pages of your site. You can be sure this gets taken care of by selecting the + at the top right of the Choose Trigger page and finally by clicking Page View and subsequently, All Page Views.
Step 6
Looks like we made it…
Click the ever-so-important Save button which will add this tag to your Workspace.
Step 7
Last but not least, click Publish at the top of the GTM Workspace page to deploy our script on your website.
See! What’d I tell ya? Piece of cake.
As a rule of thumb, it’s always a good idea to test out your installation before waving the masses onto your website where calls & form tracking should now be enabled. To do this, we recommend simply opening an incognito window within Google Chrome and navigating to your site through whatever means/sources you are set up to track with CallRail. If your number swaps and your form submits to your CallRail dashboard, you’re all set! If not, it may be time to go back and ensure everything was initially installed correctly on the front end with GTM’s Container Snippet, and then confirming CallRail’s code was properly copied into your newly created tag.
Additionally, here are a few great resources direct from CallRail’s support documentation that walk through the implementation of Tag Manager & CallRail as well as different scenarios for testing and troubleshooting our JavaScript snippet’s dynamic number swapping feature:
GTM & CallRail
Troubleshooting DNI
With CallRail’s JavaScript Snippet now successfully installed to your site via Tag Manager, you have one tiny piece of code providing you a significant amount of data on the overall health and wealth of your site! Now, you can sit back and watch as we provide you with the facts you’ve been waiting to uncover about your clients, as well as what they’re doing in your neck of the cyberspace woods.
No matter the size of your business, this piece of code (that should clearly be easy to implement) can help you determine what’s working and what’s not – or simply put, what the truth is – in your digital marketing efforts.
The post Three Codes & The Truth: Install CallRail JavaScript with Google Tag Manager appeared first on CallRail.