Today I’d like to show how you can create images in your emails (or other content) that contain multiple links in a single image. This is referred to as an image map. This technique was popular in the early days of digital marketing, but it’s still viable and widely supported today!
Why use an image map?
If you have multiple links to include in a single section of an email, showing them in an image can be more engaging than presenting them in a text only format. For example, you can include a single image with several products and have each one be clickable to a separate product web page. This is a popular technique for sending catalogs or product flyers via email.
How do I make one?
There are several computer programs that can make image maps, Adobe Dreamweaver being the most popular. If you don’t have one of these programs, you can also search the web for “image map generator” to find a quick online tool to create one (if going this route, add your image to the Act-On Image Library and then use the public URL in this tool). In short, the process consists of identifying the areas on the image where you want to include the separate links.
Important: Make sure you get the image into the desired resolution BEFORE mapping it. Large images will be shrunk down to fit in your email, which may cause the link areas to behave in strange ways.
How does it work in Act-On?
Once you’ve created your image map, the output is some HTML code that you can include in either the Rich Text Block’s source code view or the Custom Content Block. The image map will now appear! Act-On will also display each clickthrough in the Sent Message Report so you can track each link separately.
And that’s all there is to it! It’s always a good idea to check your work with a test message, but generally image maps are supported in a wide variety of email clients so they typically have very consistent rendering across devices. If you’ve tried this technique, I’d love to hear any tips you may have.