How to Track Internal Link Clicks in GA4 (With and Without Google Tag Manager)

Category: Code Snippets

It’s important to note that GA4 doesn’t track internal link clicks by default. If you want to gather valuable data on how users are navigating your site, tracking internal link clicks is a must. Understanding which pages users are clicking on, where they go next, and which calls to action are the most effective can… Read more »

Continue Reading

HubSpot Module Code Snippet: Convert Alignment Fields to CSS Flex Properties [HubL Macro]

Category: Code Snippets

Below are macros you can use in your HubSpot CMS development projects to convert a text align field into flexbox justify content values. Sometimes text alignment and it’s icons are easier for content editors to understand. So when building functionality you may need to convert it into flexbox values like I have done here. HubL… Read more »

Continue Reading

How to publish a page in development mode without HubSpot content staging [code snippet]

Category: Code Snippets

HubSpot has a nice feature called content staging which prevents search engines form crawling and indexing the content. But if you are using HubSpot CMS starter you won’t have access to this tool. So a work around is to add the following code to the HEAD of your base layout HTML file. This adds the… Read more »

Continue Reading

HubSpot Custom Module Boilerplate Code Snippet

Category: Code Snippets

Below is a some boilerplate code to use when creating a custom module inside HubSpot CMS. <div class=”module-class” id=”{{name}}”> <div class=”row-fluid”> </div> </div> {% require_css %} <style> {% scope_css %} {% end_scope_css %} </style> {% end_require_css %} {% require_js %} <script> window.addEventListener(“load”, (event) => { }); </script> {% end_require_js %}

Continue Reading

Set Variable Values in a Loop and Use Elsewhere HubL HubSpot

Category: Code Snippets

When customizing a custom HubSpot quote template you may want to know what line items are present in the quote. You can then create conditional logic with a set of known values. The only problem is when you set a variable inside a loop it is not able to be referenced outside of the loop… Read more »

Continue Reading

HubSpot Related Posts Based on Tag Module [Code Snippet]

Category: Code Snippets

The code snippet below lists related posts based on the current post tags used. The HubSpot developer docs has a code example using a Javascript formatter but I was unable to get this to resize the featured image. So I created the code below to use a HubL macro instead. HubSpot Module HTML + HubL… Read more »

Continue Reading

How to Load Script on One Domain and Exclude Previews in HubSpot [HubL Snippet]

Category: Code Snippets

The HubL code below will help you scope heatmap or anlytics tracking on one domain and exclude any previews. {% if request.domain == ‘www.yourdomain.com’ and request.query is not string_containing ‘hs_preview’ %} {% endif %}

Continue Reading

How to Quickly Search for a Code Text String on Entire WordPress Website

Category: Code Snippets

I recently was trying to optimize my WordPress site performance and noticed a javascript error saying jQuery is not defined. Basically, there was a script that was loading before jQuery was loaded. I searched my entire theme but could not find the code. I then thought of searching all of my plugins for the code…. Read more »

Continue Reading

How to Improve LCP Mobile Speed Score

Category: Code Snippets

I was recently trying to improve my LCP on mobile and was running into poor performance for LCP and CLS scores. I narrowed things down to most of my blog posts having a featured image floated in the top right. When you viewed the image on mobile the thumbnail didn’t really make sense and wasn’t… Read more »

Continue Reading

Use is_in_editor to Add Inline Comments and Notes Only in the HubSpot Editor [code snippet]

Category: Code Snippets

As a HubSpot CMS developer, you sometimes need to add some contextual information in templates to make it easier for content editors to know where and how to edit things. Add the code below into a template to display help text only when editing the HubSpot template. {% if is_in_editor %} <style>.hseditor-help {background:#FFFFE0;padding:1rem;text-align:center;}</style> <div class=”hseditor-help”>… Read more »

Continue Reading