Custom outbound-link qualification

  • Resolved Pawel Slabiak

    (@pawelslabiak)


    1 year, 11 months ago

    I am looking for advice on how to qualify outbound links in web stories with a custom parameter. The UI of the Web Stories plugin allows one to qualify outbound links as “sponsored” or “nofollow” via checkboxes. However, there is no UI option to enter custom parameters.

    What I need is a way to qualify the outbound links with the following parameter: data-vars-click-url="https://example-external-website.com" (the parameter will allow the site analytics to register outbound-link clicks).

    Currently, links on published web stories look like this: 

    <a href="https://example-external-website.com" target="_blank" rel="noopener noreferrer" class="_254c3af" i-amphtml-orig-tabindex="0" tabindex="0"> ... </a>

    I need the links to look like this:

    <a href="https://example-external-website.com" target="_blank" rel="noopener noreferrer" class="_254c3af" i-amphtml-orig-tabindex="0" tabindex="0" data-vars-click-url="https://example-external-website.com"> ... </a>

    The order of parameters inside the <a> tag doesn’t matter.

    Adding the parameter ought to possible with a code snippet or a site-specific plugin. I have a rough idea of what such a plugin would need to do:

    1. For every link on a web story page, fetch the link URL.
    2. Check whether the URL is the home domain.
    3. If no (i.e. if the link is outbound), print the custom parameter with the URL into the <a> tag.

    I would appreciate any direction or advice on what functions, hooks, and actions may be helpful to write such code. Any links to code examples with similar functionality are also appreciated.

    • This topic was modified 1 year, 11 months ago by Pawel Slabiak.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Pascal Birchler

    (@swissspidy)

    You are correct in that there is no UI option for adding custom attributes like this. It’s not something we support. However, you can certainly achieve this with code by writing a custom so-called sanitizer. Basically the same concept as in this guide, but for stories.

    The following example plugin should get you started: https://gist.github.com/swissspidy/7a804f1a65fd0c29df915fc13f7ff1b8

    Thread Starter Pawel Slabiak

    (@pawelslabiak)

    Thank you so much for the direction and the example code, Pascal. I appreciate your taking the time to sketch this out. I’ll post back here if I’m stuck or have the sanitizer working, whichever comes first.

    Plugin Author Pascal Birchler

    (@swissspidy)

    I hope you were able to get it working for your specific setup. In the meantime, I’ll mark this as resolved. Please do not hesitate to open a new topic should you have any more questions for us. And if you have a spare minute, we always appreciate a review ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom outbound-link qualification’ is closed to new replies.