Bookmark/anchor in email newsletters

Options

In an email newsletter, I'm creating a Table of Contents where the user can click a link that takes them to the related story further down in the page.

What is the best way to make that happen?

If I enter the code like this:

<FONT style="FONT-SIZE: 90%" size=2><A href="#annual"> JCUA Annual Meeting / Courageous Voices Awards / July 16</A></FONT>

Convio seems to rewrite it to this:

<FONT style="FONT-SIZE: 90%" size=2><A href="https://secure2.convio.net/jcua/admin/CommCenter#annual"> JCUA Annual Meeting / Courageous Voices Awards / July 16</A></FONT>

In the email client, the link properly goes to the intended article on the same page without leaving the email client (e.g., gmail).

However, if you click the "having trouble viewing this page" link, which opens a browser window and displays my email message inside the default Web page wrapper, the bookmark links return a "page not found."

Is there a way to fix this?

Tagged:

Comments

  • You might want to submit a ticket about this and get Convio to look at it. There might be something you could wrap the anchor in to avoid it getting rewritten on the HTML page.

    The only other thing I could think of is a little JS hack, it should not affect it working in an email client (if it isn't ignored anyway):


    <a href="https://secure2.convio.net/jcua/admin/CommCenter#annual" onclick="this.href=this.href.replace('https://secure2.convio.net/jcua/admin/CommCenter','')">check if works</a>

    It does assume that the URL it is inserting is consistently "https://secure2.convio.net/jcua/admin/CommCenter"

    Adrian

  • Adrian Cotter:

    You might want to submit a ticket about this and get Convio to look at it. There might be something you could wrap the anchor in to avoid it getting rewritten on the HTML page.

    The only other thing I could think of is a little JS hack, it should not affect it working in an email client (if it isn't ignored anyway):


    <a href="https://secure2.convio.net/jcua/admin/CommCenter#annual" onclick="this.href=this.href.replace('https://secure2.convio.net/jcua/admin/CommCenter','')">check if works</a>

    It does assume that the URL it is inserting is consistently "https://secure2.convio.net/jcua/admin/CommCenter"

    Adrian

    Hello,

    I'm confused... are you trying to link within the email? or a link going to a storybuilder page with anchors inside of the story?

  • Matthew Andrade:

    Hello,

    I'm confused... are you trying to link within the email? or a link going to a storybuilder page with anchors inside of the story?

    Here's what I'm trying to do.

    I created an email newsletter that has a Table of Contents at the top. Each link is supposed to link to a section below, so if the reader is interested, he can skip over the article about hot dogs and just read the section on hamburgers. All on one page, all in the same email.

    It works perfectly fine when the email is viewed in the email client.

    HOWEVER, this email has a link at the top to "view this as a Web page." Not sure if this link will work for you, but this is what the user sees when clicking the view as web page link:

    http://www.jcua.org/site/MessageViewer?em_id=3881.0&dlv_id=7761

    If you click a link in the Table of Contents, you get a page-not-found error. Ideally, the links should behave the same whether viewed in an email client or as a Web page.

    - Jonathan Lehrer

  • Jonathan Lehrer:

    Here's what I'm trying to do.

    I created an email newsletter that has a Table of Contents at the top. Each link is supposed to link to a section below, so if the reader is interested, he can skip over the article about hot dogs and just read the section on hamburgers. All on one page, all in the same email.

    It works perfectly fine when the email is viewed in the email client.

    HOWEVER, this email has a link at the top to "view this as a Web page." Not sure if this link will work for you, but this is what the user sees when clicking the view as web page link:

    http://www.jcua.org/site/MessageViewer?em_id=3881.0&dlv_id=7761

    If you click a link in the Table of Contents, you get a page-not-found error. Ideally, the links should behave the same whether viewed in an email client or as a Web page.

    - Jonathan Lehrer

    I'm surprised that it works in the email client. If I may ask what client's have you tested this on?

    Outlook? Hotmail? Gmail? I would be interested to see this work in Outlook 2007

    Thanks,

    Matt

  • Matthew Andrade:

    I'm surprised that it works in the email client. If I may ask what client's have you tested this on?

    Outlook? Hotmail? Gmail? I would be interested to see this work in Outlook 2007

    Thanks,

    Matt

    Are you going to give my hack a shot, Jonathan?

  • Adrian Cotter:

    Are you going to give my hack a shot, Jonathan?

    Yeah I would like to know if that works also.

  • Adrian Cotter:

    Are you going to give my hack a shot, Jonathan?

    Adrian, I'll try your hack, but not for a few days, as I'm buried in other stuff for a little while. (I'm also the PR director for my organization.)

  • Matthew Andrade:

    I'm surprised that it works in the email client. If I may ask what client's have you tested this on?

    Outlook? Hotmail? Gmail? I would be interested to see this work in Outlook 2007

    Thanks,

    Matt

    The bookmark link works on Gmail when used in Google Chrome, and also Gmail in IE 7 and 8. It works in Yahoo on IE 7. Works on Outlook 2003/Win XP SP2. Other than the environments mentioned, I haven't tested it in other email clients or browsers. Maybe I'll give it a whirl in Firefox.

    Note, however, that the code you can see isn't the code I wrote.

    The code was created in MS FrontPage (please don't laugh at me for using FrontPage), and this is what it looked like there:

       <li><a href="#annual"><font style="FONT-SIZE: 90%" size="2">JCUA Annual

       Meeting / Courageous Voices Awards / July 16</font></a></li>

    Convio doesn't seem to like and I believe it got appended with a more complete URL.

    FYI, I don't normally use a lot of inline CSS on a Web page, but that's what seems to work well for emails, as many email clients (notably Gmail) strip out a lot of the stylesheet stuff.

  • Jonathan Lehrer:

    The bookmark link works on Gmail when used in Google Chrome, and also Gmail in IE 7 and 8. It works in Yahoo on IE 7. Works on Outlook 2003/Win XP SP2. Other than the environments mentioned, I haven't tested it in other email clients or browsers. Maybe I'll give it a whirl in Firefox.

    Note, however, that the code you can see isn't the code I wrote.

    The code was created in MS FrontPage (please don't laugh at me for using FrontPage), and this is what it looked like there:

       <li><a href="#annual"><font style="FONT-SIZE: 90%" size="2">JCUA Annual

       Meeting / Courageous Voices Awards / July 16</font></a></li>

    Convio doesn't seem to like and I believe it got appended with a more complete URL.

    FYI, I don't normally use a lot of inline CSS on a Web page, but that's what seems to work well for emails, as many email clients (notably Gmail) strip out a lot of the stylesheet stuff.

    Similar to Adrian's hack, you could add a line of Javascript in a conditional so that it is only rendered in the MessageViewer application:

    ]x::

    <script type="text/javascript">

    addOnLoadHandler(function(){

        var i,allLinks;

        allLinks=document.getElementsByTagName('a');

        for(i in allLinks){

            if(allLinks.href.indexOf('https://secure2.convio.net/jcua/admin/CommCenter')!=-1){

                allLinks
    .href=allLinks.href.replace('https://secure2.convio.net/jcua/admin/CommCenter','');

            }

        }

    });

    </script>

    ::]]

  • I know this is an old thread, but I have a real easy solution for this problem.  Just add the S8 tag before your anchor links.  That way, when the email is being rendered for the client, it'll be a normal anchor, but when they view it online, it renders a fully qualified url.

    Example:

    <a href="]#anchor1">Anchor Link</a>

    No js hacks required.

  • Jonathan Lehrer:

    The bookmark link works on Gmail when used in Google Chrome, and also Gmail in IE 7 and 8. It works in Yahoo on IE 7. Works on Outlook 2003/Win XP SP2. Other than the environments mentioned, I haven't tested it in other email clients or browsers. Maybe I'll give it a whirl in Firefox.

    Note, however, that the code you can see isn't the code I wrote.

    The code was created in MS FrontPage (please don't laugh at me for using FrontPage), and this is what it looked like there:

       <li><a href="#annual"><font style="FONT-SIZE: 90%" size="2">JCUA Annual

       Meeting / Courageous Voices Awards / July 16</font></a></li>

    Convio doesn't seem to like and I believe it got appended with a more complete URL.

    FYI, I don't normally use a lot of inline CSS on a Web page, but that's what seems to work well for emails, as many email clients (notably Gmail) strip out a lot of the stylesheet stuff.

    You can also put a set of empty <span> tags inside the anchor tags. That will get anchors to function in GMail.

    Johannes

  • Noah Cooper:

    Similar to Adrian's hack, you could add a line of Javascript in a conditional so that it is only rendered in the MessageViewer application:

    ]x::

    <script type="text/javascript">

    addOnLoadHandler(function(){

        var i,allLinks;

        allLinks=document.getElementsByTagName('a');

        for(i in allLinks){

            if(allLinks.href.indexOf('https://secure2.convio.net/jcua/admin/CommCenter')!=-1){

                allLinks
    .href=allLinks.href.replace('https://secure2.convio.net/jcua/admin/CommCenter','');

            }

        }

    });

    </script>

    ::]]

    Noah,

    I get a javascript error when I put this in the stationary:

    Error: allLinks.href is undefined

    Source File: http://nypl.convio.net/site/MessageViewer?em_id=12001.0&dlv_id=0

    Line: 651

    Any advice?

    Thanks,

    Johannes

  • Johannes Neuer:

    Noah,

    I get a javascript error when I put this in the stationary:

    Error: allLinks.href is undefined

    Source File: http://nypl.convio.net/site/MessageViewer?em_id=12001.0&dlv_id=0

    Line: 651

    Any advice?

    Thanks,

    Johannes

    My mistake. Try changing the JavaScript on your page to this:



    ]x::
    <script type="text/javascript">
    addOnLoadHandler(function(){
    var i,allLinks;
    allLinks=document.getElementsByTagName('a');
    for(i in allLinks){
    if(allLinks.href&&allLinks.href.indexOf('http://]/site/#')!=-1)
    allLinks.href=allLinks.href.replace('http://]/site/',window.location.href.split('#'));
    }
    });
    </script>
    ::]]
  • Colin McClure:

    I know this is an old thread, but I have a real easy solution for this problem.  Just add the S8 tag before your anchor links.  That way, when the email is being rendered for the client, it'll be a normal anchor, but when they view it online, it renders a fully qualified url.

    Example:

    <a href="]#anchor1">Anchor Link</a>

    No js hacks required.

    Like

Categories