• Skip to primary navigation
  • Skip to main content

Rick R. Duncan

There's no adventure without the risk of failure.

  • Work Hours
  • After Hours
  • About
    • Resume
  • Contact

Open External Links in New Tab Using GTM

November 9, 2017 by Rick R. Duncan

Please note: After extensive testing on numerous websites, the code has been updated to account for hyperlinks that contain tel: and mailto:.

On a fairly large website in which I act as the technical owner/ administrator, it was recently mandated that all outbound hyperlinks (both new and existing) open in a new tab.

Since we’re not using WordPress and are unable to acquire IT resources to assist with an automated solution, I asked the team “how long will it take” to go through 700+ pages of content looking for external links and adding the target attribute “_blank” to each and every one of them? Most people said 5 to 10 minutes per page.

If we calculated (7 minutes per page) x (700 pages) = (4,900 minutes). That’s 81 hours, or roughly two weeks of work. Ugh!

Google Tag Manager Saves the Day

I couldn’t help but think that there has to be a way using GTM and JavaScript/jQuery to scan through a webpage and find all occurrences of external hyperlinks and edit them on the fly to include the target attribute of _blank.

From concept to implementation it took me less than 30 minutes to get the job done. Much better than spending 80+ hours! Let me show you what I did.

Create a GTM Tag

Go into GTM and create a new tag named HTML – LinkOpener – All Pages. Set the Tag Type to Custom HTML. Paste the code below into the source code window. Set the Firing Trigger to All Pages.

The script below will add target=”_blank” rel=”noopener noreferrer” to every link that does not point to your own domain.

https://gist.github.com/rickrduncan/0958eaf3bda1d2e4afd1ce0202fdf09e

Please note: When you use the target attribute you should include rel=noopener due to a browser vulnerability. Learn more here.

Full-view of Tag and Firing Trigger

GTM LinkOpener

 

Should External Links Open in a New Tab?

  • Those that say no argue for accessibility and mobile use considerations.
  • Those that say yes argue for SEO, lower bounce rate in their analytics reports, tricking users and more.

Since there doesn’t seem to be a consensus, I think it depends on the type of visitor your website attracts.

Here on my website I decided to open external links in a new tab. I also included a visual cue () to notify users of what’s going to happen. My reasoning is that I’m a technical blog and reference many external sources. Users will likely want to look at said reference material at a later date. By opening the links in a new tab it more easily allows them to do so.

Filed Under: Web Analytics Tagged With: Google Tag Manager

Copyright © 2009–2023 Rick R. Duncan