There are tons of great tools out there to help you improve the website experience you provide, grow your online business, and make better connections with your customers.
Cough..like Crazy Egg..cough.. 🙂
And a lot of these tools are free too!
But you’re not a web developer. How the heck do you install these tools in the first place?
Ironically, for the businesses that provide these tools, one of the biggest stumbling blocks to their own growth is getting their users to install their code.
Well, today, I’m going to try to solve this problem for everyone involved. I’m going to go over a few of the most common ways people put code on their website. In this article, I’m going to go over how to install website code / JavaScript snippets for:
- Websites “powered by” WordPress (the content management system, NOT WordPress.com sites)
- Hand-coded websites (we’ll go over how to install scripts and snippets using old school FTP)
- Squarespace websites
- Shopify websites
For those of you on an Etsy or Tumblr site, these platforms are kinda…well…they aren’t really full-fledged website solutions. Etsy is really a marketplace and Tumblr is a mix between a social media site and a blogging platform.
Finally, I’ll talk a little bit about Wix websites at the very end. For the most part, they don’t allow you to install any old website code or JavaScript snippets, but they do have a few integrations for various website services.
What Is This Website Code or Snippet You Speak Of?
Yeah, let’s talk about the “code” you’re trying to install first.
So, a lot of website marketing tools out there require you to install their code on your website. Crazy Egg works the same way. Let’s take a look at some Crazy Egg code.
Once you log in to your Crazy Egg dashboard, you’ll see a link in the lower left called “My code.”
Click on that link and you’ll be taken to a page where your Crazy Egg tracking code is conveniently presented for you in a nice light blue box.
What you’re going to want to do, regardless of whether it’s Crazy Egg tracking code or any other tracking code, is paste that code into every webpage of your website.
Since this tiny operation might be the first time for you or you’re having trouble doing it, we’re going to get into the nitty-gritty of what it takes to get this done.
How to Put Code on a Website That Is Powered by WordPress
You’re in luck. There is a plugin that makes this task pretty darn easy. It’s called Tracking Code Manager.
Log in to your website. If you are running WordPress, you’ll be taken to your dashboard. Click on “Plugins.”
Once you arrive at your Plugins screen, click on “Add New.”
In the search box on the right, search for “Tracking Code Manager,” and then press “Install Now.”
Once it’s done installing, make sure you activate the plugin. Click on “Settings”.
Click on “Add new Tracking Code”.
…And insert your code! Be sure to click save.
Now, if for some reason you don’t want to use the Tracking Code Manager plugin (or can’t), you can always manually put tracking code in the header.php file of your WordPress theme (we’ll get into that soon).
How to Put Code on a Website That Is Powered by WordPress.com
There has always been A LOT of confusion between a website that is powered by WordPress and a WordPress.com website. That’s because they are two different things!
I kinda blame WordPress (or Auttomatic) for branding these two different services so similarly. But let me explain:
- A website that is Powered by WordPress is a website that has WordPress content management software installed on your own web server. That means you paid for a domain name (myname.com) AND you are paying for webhosting to host your website files. In this case, you or someone else would have installed WordPress software on your webserver (webhost) and perhaps customized it into your current website.
- A WordPress.com website is usually free. You would have gone to WordPress.com and signed up for your website. You don’t pay for webhosting fees and you started off with a URL like: myname.wordpress.com. From there, you might have done the necessary steps to get your own custom domain name, etc. (myname.com).
If you’re running a WordPress.com website, you are somewhat limited by what website code and JavaScript you can install on your website. This is because they have security protocol they need to stick with and they can’t let users start pasting in any old code into their platform. MySpace apparently has been taken down because of this!
However, WordPress.com does have various upgrades for business plans. For example, they have an integration with Google Analytics and they provide ways to customize your website, such as adding social media buttons. From what I can tell, getting a free WordPress.com account to utilize various website services and tools is pretty limited. If anything, it appears you will need to upgrade to a business plan to unlock your abilities to do so.
How to Install Website Codes and JavaScript Snippets on Hand-Coded Websites Using FTP
Back to the old school.
To this day, many websites are “hand-coded”, meaning they were created from scratch and don’t use a content management system. If your website falls into this category, you’re going to need to “FTP” into your site to make changes (or use a version control repository).
FTP stands for “File Transfer Protocol.” You can download free FTP programs like FileZilla to let you FTP “into” your website.
Basically, a FTP program lets you drag and drop website files and images into your webserver where your website is hosted. You can add files, replace files, delete files, and even change the names of files with a FTP program.
I promise you – after 20 minutes messing with a FTP program, you’ll have it licked. The trickiest part for most people is simply connecting with their webserver.
Usually, people get stuck with getting their hostname and username correct. Or they don’t know their FTP password.
The solution: call your web host. It might take an hour, but they will walk you through it. It might be worthwhile recording your screen during that call. Or at least take some good notes.
Once you’re in, one of the first things you’re going to want to do is make a backup of your website. It’s just a smart idea. If you make a boo-boo later, at least you’ll have a backup of all your files.
You can do this by simply dragging (copying) ALL your files FROM your webserver to your computer. I usually make a folder on my desktop called something like “My Website Backup June 2017.” I drag ALL my website files into that folder. Sometimes I even make a backup of that folder or make a .zip file of it. Yep – double backup.
If you use a FTP program like FileZilla, you’ll usually get a two-paned interface. The left side usually displays the files on your computer, and the right pane displays the files on your webserver.
By dragging files back and forth you can replace files from one system to another.
A Word of Caution
Replacing files can be slightly dangerous. If one file is newer or older than the other file on either your webserver or computer, and you replace the exact same file on the other system, you will lose a version of that file.
In most cases, that’s exactly what you want to do. You’re making changes to your website, so obviously you have a newer file version that needs to go live. But, that means there is no going back to a previous version if you have made a mistake. That’s why it’s a great idea to backup all your web files before you make any changes.
If you do make a mistake and you have backup files, you can simply crack open your backup folder and place the original file where you need it to be.
Now…on to Installing Website Codes
From my experience, most people have one of three kinds of websites:
- A website that uses the WordPress content management system
- A website that uses something similar to WordPress
- A hand-coded website
If you’re using WordPress or a content management system, all you need to look for is the header.php file or a file called “header” or “head.” Usually, that’s the file that dictates the <head> section of ALL your webpages. This is where most website codes and snippets should go.
You’re going to paste the website code (or snippet) into your header file and it will usually be active on ALL your webpages. One file to rule them all!
Use a free program like Sublime Text to open this file. Open the file that’s on your computer (not the same file that’s on your webserver).
Usually, I just right click the file and open with Sublime Text. What will appear is a beautiful rainbow of magically color-coded website prose.
Some of you may get scared. But don’t. It won’t hurt you. Let’s decipher it real quick.
All webpages can be broken down into two simple sections. The head and the body. The head is designated by HTML code <head> and </head>. The body is designated by <body> and </body>.
Most of the “stuff” that makes your webpage operate and display text and images goes in between these two sections. You can usually do a Find on the page to locate these HTML tags.
If the website code or JavaScript snippet is required to go into the <head> of your website…well I bet you have a good idea where that code should go.
Once you’ve inserted your code or snippet, save your file and upload it to your webserver to make the new head file live.
Now, if your website was hand coded and there doesn’t seem to be a head or header file, you might have to paste your website code into every webpage. Sometimes this isn’t a big deal. If your website has only 5 pages, then you just have to paste the code 5 times.
Above, is a hypothetical HTML website consisting of four HTML files. In this case, you would open all these files and insert your website code (or snippet) into the <head> of each file. Finally, you would save them and upload them to your webserver, replacing the older files with these newer, updated files.
How Will I Know If It Worked?
Usually, the website code (or snippet) you install will establish a line of communication with the service you’re using. Nearly all services will let you know if you’re code is working or not. For example, if you’re installing Google Analytics tracking code, when you log in to your Google Analytics account, it will tell you if your code has been properly installed or not.
How to Put Code on a Squarespace Site
For those of you who are using Squarespace for your website, they make inserting website codes and JavaScript snippets pretty easy. You can use “code injection” to insert code.
In your Home Menu, click on Settings > Advanced > Code Injection. You can add code to either your <head> or your website footer. Here’s the run-down by screenshots:
Start by clicking on “SETTINGS.”
Scroll down a bit and then click on “Advanced.”
Then click on “Code Injection.”
Usually, you’re going to want to insert your website code in the <head> of your webpages. They also have an option to put code in your footer if you need to do that.
Finally, make sure you click “SAVE.”
How to Put Code on a Shopify Site
From your Shopify admin, click on “Online Store.” Then select “Themes.”
Click on the “Actions” box to get the drop-down menu. Then select “Edit HTML/CSS”.
Select “Snippets.”
Click on “Snippets” to open the “Add a new snippet” dialog box.
Click on “Add a new snippet.” You will be given a form for adding a new snippet.
Name your snippet and click on the “Create snippet” button.
Enter the code for your snippet in the area for “tracking snippet.liquid.” Click “Save” and you’re good to go!
How to Put Code on a Wix Website
Wix is quickly becoming a popular website creator. It’s similar to WordPress.com in that you’re fairly limited by what codes and snippets you can install. It’s basically locked down just like WordPress.com.
However, they do have a Wix App Market where you can get various marketing, social media, and analytics solutions running on your site. You can also vote on much-needed solutions here.
Hopefully This Helped You
If you’re using another system for your website, check to see if they provide plugins, extensions, or add-ons to help you get the code you need on your site. Many times, website providers will have integrations for the services you need. Just do some digging, and don’t be afraid to call or email their support center.
