SOLVED

Email anchor tag

Go to solution
Maci91
Level 2

Email anchor tag

Hi there,

Is it possible in Marketo to add link in email that when clicked would drive to a specific section on a landing page, to be precise at the bottom?

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
Dave_Roberts
Level 10

Re: Email anchor tag

This is usually accomplished by adding a hash and the id="" value of the section you'd like to link to into the URL.

 

For example, if you wanted to drive to https://www.example.com and there was a section on the page with an id value of "mySection" you wanted to jump to, you'd append "#mySection" to the URL above: https://www.example.com#mySection

 

The HTML for the section would need to look something like this:

<div id="mySection">

...

</div>

 

 

View solution in original post

10 REPLIES 10
Dave_Roberts
Level 10

Re: Email anchor tag

This is usually accomplished by adding a hash and the id="" value of the section you'd like to link to into the URL.

 

For example, if you wanted to drive to https://www.example.com and there was a section on the page with an id value of "mySection" you wanted to jump to, you'd append "#mySection" to the URL above: https://www.example.com#mySection

 

The HTML for the section would need to look something like this:

<div id="mySection">

...

</div>

 

 

MelinaCardin
Level 1

Re: Email anchor tag

Actually, the anchor would be used in a bilingual email. I want to make the text "English version below' clickable with an anchor link that will bring to the English section of the email that is under the FR section, so I do not have an URL. 

Dave_Roberts
Level 10

Re: Email anchor tag

In the case of an email (as well for LPs), you can just the id="" value as the target, sorry to make that more complicated than it needed to be for you.

 

For a link further up the page, you'd link it to the section below by pointing the href="" to the id="" value of the destination.

 

Link HTML

<a href="#jumpToThisSpot"> English </a>

 

Destination HTML

<div id="jumpToThisSpot">
  Text futher down the pages
</div>
MelinaCardin
Level 1

Re: Email anchor tag

I added to code to the HTML. It works when I am in preview mode, but when I send myself a sample test, the anchor does not work. 

 

Here is the HTML code that I use for the text ‘’English Version Below’’:

<div style="text-align: center;"><a href="#jumpToThisSpot"> English Version Below </a></div>

 

Here is the HTML code that I have added at the beginning of the HTML of the EN section:

<div id="jumpToThisSpot"><br /></div>
<div><hr />

 

Note that I have approved my draft before sending myself a sample test and I am testing with Outlook. Do you see any issue with the HTML code that I used? 

 

 

Dave_Roberts
Level 10

Re: Email anchor tag

... it's always Outlook causing problems isn't it, lol?

 

Maybe try using the "name" attribute instead of the "id" attribute here? So instead of...

<div id="jumpToThisSpot"><br /></div>
<div><hr />

try this...

<div name="jumpToThisSpot"><!-- comment to hold this space --></div>
<div><hr />

 

You'll also notice I removed the <br> at the top and replaced it with a comment. Adding this line break in there may add height to the target div and we really just want that to be a "spot" on the page rather than have any height or width like it'd get with a line break in there -- adding a comment in there should help if the <br> is being automatically injected by the Marketo editor b/c it's an empty element. 

Remy_Frank1
Level 1

Re: Email anchor tag

Thanks Dave! Great guidance. :-]

 

One more question, this is working for me in outlook/desktop email but not in outlook mobile or other email platforms. I'm testing on:

- a 2019 macbook pro using office 365 desktop app for mac - this works as expected :-]

- iPhone X with outlook app installed - this does not work

- iPhone X with macmail linked to gmail account - this does not work

- gmail.com on desktop - this does not work

SanfordWhiteman
Level 10 - Community Moderator

Re: Email anchor tag

I think you're mistaking what's doing the navigation to the fragment (hash). That's entirely the browser. The mail client opens the URL in the browser, the browser decides how to jump to the element. And every modern browser uses the id (not the name).
jturner
Level 1

Re: Email anchor tag

Did you ever get this to work? I'm trying to use the code in an email, the preview works but when I send a test to myself in my work gmail it doesn't work. 

Thanks

Jo_Pitts1
Level 10 - Community Advisor

Re: Email anchor tag

@jturner,

What does the link look like in gmail?  What is the page and anchor tag you're trying to reach?

 

Cheers

Jo