How to add anchor links to email messages

Overview

This article covers how to add anchor links to email content in Ortto, as well as steps on how to hide anchor links on mobile devices, and how to enable click tracking for anchor links to monitor engagement.

Accessing campaigns

Navigate to Marketing > Campaigns > Select your Campaign.

NOTE: Anchor links are not supported by our click tracking system. You will need to deselect the Track link clicks option at the Setup step when creating the email message. This will consequently prevent you from tracking clicks on that email.

Learn more about creating anchor links with click tracking enabled.

NOTE: Although most email clients support anchor links, there are still some that don't, especially mobile clients such as Gmail for iOS.

Learn more about hiding anchor links on mobile.


Wen creating your email content:

  1. Add an HTML block immediately above the section where you want the person to go when they click on the anchor link.
  2. Paste the following code into the HTML block:

html

<a name="anchor"></a>

NOTE: You can replace anchor from the code above with another keyword of your choice.

Example GIF below demonstrating the two steps outlined above.

NOTE: This HTML block will be completely invisible to recipients.

3. Next, at the element (e.g. a section of text or a button) you want to link to the anchor element you placed at steps 1 and 2, add a link.

4. In the URL field, insert the same keyword you used for your anchor element, beginning with a #. In this case: #anchor.

Gif demonstrating step 4 outlined above.

Some mobile email clients still don't support anchor links. In this case, you might want to hide the anchor link on mobile. To do this, simply click on the element where the anchor link is and select mobile in the Hide on section.

GIF demonstrating how to hide the anchor link on mobile devices.

Anchor links are not supported by Ortto's click tracking system. If tracking clicks on that email is not necessary, you can simply deselect click tracking for the entire email at the Setup step.

  • To do this, go to Setup > Show advanced options > Deselect track link clicks.
Screenshot showing how to disable click tracking.

To use an anchor link without having to disable the click tracking for the entire email, you will need to add the anchor link via a HTML block and add the data-notrack="1" parameter in the <a> tag.

EX: <a href="#anchor" data-notrack="1">Jump to call to action</a>

This data-notrack="1" parameter will disable click tracking only for the anchor link, meaning all other clicks on that email will continue to be tracked as normal.

Similarly, you can do the same with a button:

html

<a href="#anchor" class="mybutton" style="display: inline-block; padding: 10px 20px; background-color: #3498db; color: #fff; text-decoration: none;" data-notrack="1">Jump to call to action (anchor link)</a>

Obtaining a template

If you're not comfortable creating an HTML content block from scratch, you can obtain a starting template for the content block HTML by taking the following steps:

  1. Draft a text content block with the hyperlinked text that uses the anchors, as if you were creating a campaign with click-tracking disabled.
    Screenshot showing a draft email using a text content block.
    2. Download the HTML for that email. You can do this on the Review page of the draft.
Screenshot showing the download HTML option for the email draft.

3. Open the HTML in a standard text editing application and add the data-notrack="1" parameter within the <a> tag of those links.

Screenshot showing `data-notrack="1"` added to the downloaded HTML.

4. Copy the HTML for that edited content block and paste it an HTML content block in your campaign.

5. Remove the original text content block that was created to obtain the HTML template.

GIF showing how to add the edited HTML to an HTML content block and remove the original text block.