DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

How to Install JavaScript Snippets and Website Codes Into Your Website

by Sean Work

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.”

where to get crazy egg code snippet

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.

crazy egg web snippet

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.”

click on plugins

Once you arrive at your Plugins screen, click on “Add New.”

add new plugin

In the search box on the right, search for “Tracking Code Manager,” and then press “Install Now.”

search for tracking code manager

Once it’s done installing, make sure you activate the plugin. Click on “Settings”.

WordPress Tracking Code Manager settings

Click on “Add new Tracking Code”.

add new tracking code

…And insert your code! Be sure to click save.

insert code into tracking code plugin

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.

how to FTP files

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:

  1. A website that uses the WordPress content management system
  2. A website that uses something similar to WordPress
  3. 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.

header file

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>.

the head and body of a HTML file

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.

insert code here

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.

example website list of files

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:

squarespace home menu

Start by clicking on “SETTINGS.”

Scroll down a bit and then click on “Advanced.”

click on Squarespace code injection

Then click on “Code Injection.”

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.”

Shopify 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.

No Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Sean Work

Sean Work is the VP of Inbound Marketing here at Crazy Egg. You can follow him on Twitter @seanvwork. You can listen to his podcast "Worketing" on YouTube or SoundCloud.

NO COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

Show Me My Heatmap

To capture data, @blueearth recommends website heatmaps #CrushinItMN

blueearth

@blueearth