https://www.airtrafficcontrol.io/hubfs/approach%201%20v2-2.png

Simple HTML Modules for Personalization: Approach 1

There are several approaches you can take to make the most of your content personalization with Air Traffic Control and HubSpot depending on your use case and your team's technical abilities.

Some customization might be necessary to ensure your brand shines through with common use cases like personalized email and landing page templates.  Should you not have a marketing operations pro on your staff, or have additional content types you’d like to be able to insert into your email, we have a brilliant services team who can build this for you at a nominal cost.

There is a two part guide that will outline options for HubSpot users this guide will outline. The first is a simple and fast option that does not requires robust technical ability: approach 1. 

Approach 1: Custom HTML Blocks

This approach will allow you to create simple modules that will automatically pull in the required blog or podcast images and titles. In this case they have been created separately to give total flexibility depending on whether you need the image and title or just the title.

Here is a quick explanation of the simple modules and what they’ll insert into your emails, website or landing pages. 

Blog/Podcast Title with link: the title of the recommended blog post/podcast for your reader with a link to the content.

Blog/Podcast Image with link: the featured image from the recommended blog for your reader with a link to the content.

Blog/Podcast Title without link: the featured image from the recommended blog for your reader without a link to the content.

Blog/Podcast Title without link: the title of the recommended blog post/podcast for your reader with a link to the content.

Important: the ATC Personalization Property are custom values, the code provided in either approach will only work if your custom properties have the same name. If you have named them something else then you will need to update that part.

Below is a video overview walking through how to create one of these simple HTML modules as well as step-by-step instructions.

 

Step 1: Accessing the Design Manager

  1. Login to HubSpot.
  2. Navigate to Design Tools:
    • Go to your HubSpot dashboard
    • Click on the Content tab in the main menu
    • Select Design Manager

designmanager

Step 2: Create a Custom Module in HubSpot

  1. In the Design Manager, click on Create a new file.
  2. Choose Module as the type.

custom module

3. Select where you want the module to be used. Emails, site pages & landing pages would be a good choice but you could also include blog and blog listing pages if you want to add the module there.

4. Give your module a name and choose the folder where you want to save it.

5. Click Create.

Step 3: Populate and publish the module

  1. Copy the HTML of your required module into the main editor.
    • Adjust the styling to match your own brand (optional)
    • Adjust the Personalization Property to match your naming convention and the purpose of the module.
  2. Click Publish Changes to publish the module and you’re all set!

publish changesRequired code for each module variation

The steps outlined above remain the same for each of these modules, the only difference would be the code that you copy into the main editor. To retain formatting, we've copied the HTML code you'll need into this HubSpot file. As always, let us know any questions. 

 

Advanced HTML Modules for Personalization: Approach 2

This is an walkthrough of Approach 2: how to build advanced HTML modules for personalization using Air Traffic Control custom properties..

star_shape
star_shape

Are you ready to kick off your first truly personalized marketing campaign?