Email anchor tag

[Maci91]

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?

[Dave_Roberts · Accepted solution]

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]

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]

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]

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]

... 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]

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]

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]

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]

@jturner,

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

Cheers

Jo