Post Tags

A Hubspot COS Developer’s Guide to JavaScript Implementation

HubSpot JavaScript Guide


Introduction to Scripting

JavaScript is a language that is used to make interactivity with web pages.
Originally developed in 1995 byFile-Adobe-Dreamweaver-JavaScript-icon Brendan Eich, JavaScript was one of the first interactive browser web languages. JavaScript changed the way that developers, designers, and users would interact with web pages. Over the years JavaScript has evolved into lots of different libraries on of the most popular is jQuery. 

JavaScript allows you to feature dynamic “Scripts” that can perform a wide variety of tasks in your browser. Almost all sliders, testimonial rotators, photo galleries, and pretty much any interactive interface you see on the web was probably built with JavaScript or one of its’ libraries. It goes without saying that for there to be interactivity on your HubSpot COS site, you need to be using JavaScript.  


Places to Add Scripts

HubSpot’s Template Builder has many different places where a HubSpot developer can put in their scripts of choice. We can declare our script in the header using traditional syntax or HubSpot’s markup language (HubL.)  The most common recommendation is to add your script calls (how a browser knows where to find your script files) in the header of your site. This would include any libraries hosted on an external network (Google’s CDN, Microsoft’s CDN, or anywhere else your file is being hosted).

You can add scripts to the header or footer. In recent times, many have begun to show a preference for scripts to be loaded in the page footer to save on load speeds. If the script call is on your header, it will be considered a "render-blocking" resource, and your page will likely show a delay until the script has fully loaded.

There’s yet another option, which is not always recommended, but has grown in use due to the ever increasing fight for faster load speeds. This option is to add in a “custom HTML module” to your template and then drop your script in there. I would recommend this option if you were looking at having your script be used as a global module to be used elsewhere in the site, or if you are creating marketplace templates where you have no control over the template settings. 

Scripts in the Header or Footer (Entire Site)

Earlier in the article, I recommended we declare “live” scripts in the header section of your site. This can be done in Settings under "Website" in a link called "Pages."

rev-blog-settings

From here HubSpot will show a modal window for the header and another below it for the footer as seen in the image below.

rev-blog-settings-modal-win

Scripts in the Header or Footer (Single Page Only)

In the edit page view, you can click on the “Settings” tab and then open the "Advanced Options" to show both the header and footer sections called "Additional code snippets." This is useful for those who prefer to load the scripts on a single page document, or if your script requires specificity in its’ JavaScript calls this is the place to do that.

rev-blog-settings-advance-options

Scripts in Additional Markup Blocks

We can use the custom HTML blocks in the template of any page and add our scripts in the "Additional markup before </body>" block, within the template layout view. Here we implement our script by declaring the type before it. Then simply insert our script. This is good if we want to add some functionality and keep the HTML / CSS / JS in one module.

Here is where you can find the this section:

  1. Locate the inspector on the right-hand side of the design tools of your specific template
  2. Scroll down as far as it will go
  3. Click "Expand" to show the entire modal window for your code

rev-blog-settings-additional-markup

How to Code your Scripts

So, now that we know where we can put our calls for any external libraries we need to know how to implement them. This process is a little more complicated and technical. It requires knowledge of both HTML and JavaScript.  Let’s go over the ways to code your script into your HubSpot COS site.  (NOTE: You should always refer to the technical documentation for your library of choice on implementation.)

HubSpot gives you the option of using either jQuery 1.7.x or 1.11.x as your default library. This means any script running anything higher than jQuery 1.7 or 1.11, will require you to make a call to one of the higher libraries. (I’m particularly a fan of Google’s hosted libraries but you should always use a backup).

Template Builder

In the Design Tools under the "Create a new file," we can choose to create new JavaScript type files that we can later add to our site.

screenshot-app.hubspot.com-2019-02-12-11-20-03

Here you can change the name of your file to whatever you like. I’d recommend keeping it the original name as you found if you are running a plugin.  You can also choose where to save the file. You can create your own folders per project, or if you prefer in a generic JS folder. The files will automatically be saved with the appropriate extension of “.js”. 

screenshot-app.hubspot.com-2019-02-12-11-20-34

Once we’ve deployed our code, and saved it in the appropriate folder, it’s important we know the actual location of the file. From here we’ll go to "Actions" > "Copy public URL." Here an alert window will pop up letting you know the URL has been copied to your clipboard. Once you paste from your clipboard you will see that the file path is found using HubL markup language with a reference to the file . (Note: yourpath/yourscript.js is used to illustrate the folder structure of any custom coded file).

javascript-copy-public-url

We can use this markup language in the header under the template view, or in the header and footer in the page edit view. This markup will call our script and load it into the page. We really should be putting our script files in the design center so we can call to them from anywhere on the site as well as ease of maintainability of the script (only one place to update the file versus lots of inline scripting).

Another newer way that was added to the Design Tool V2 is using the inspector right-hand sidebar in any page or blog template. This can be found directly above the "Additional markup before </body>" block.

screenshot-app.hubspot.com-2019-02-12-11-54-55


Trouble Shooting Scripts

So have you implemented a script and had it not work? This can be the most troublesome part of script implementation.

Make sure to use the tools in the web developer toolkit that comes standard in most browsers. Is the page loading your custom hosted script? Are you getting a 403?

Check the console to see where there are errors. Go back and check your code. Missing brackets? Missing Semicolons? Logic Errors? Incorrectly spelled variable names or functions?

Next Steps

Brush up on your knowledge of JavaScript! Learn a new JavaScript library!  Go find some neat plugins. Write your own scripts. There are countless things you can do with JavaScript to help you improve your site.  What errors have you come across that you were unable to solve? Are you up to date on the latest trends with good and bad web design? Stay in front, and stay relevant.

 

This post was originally published on 5/24/2014 and has been updated & re-published for freshness and accuracy.

 

Intro to SEO, Denver Marketing Firm, Revenue River