Tracking outbound links with Google Tag Manager without hurting SEO

Question

My website contains a widget with links to social media and I'm using a script to open the links.

Because I'm not adding the links directly into href attribute I think the web crawlers may be missing them and that may be hurting my SEO.

I want each of the outbound link clicks to be tracked besides just navigating to the URL.

How should I set this up with Google Tag Manager?

Widget HTML:

<ul class="social-networks">
    <li>
        <a 
            href="javascript:void(0);" 
            onclick="navigate('pinterest');"
        >Pinterest</a>
    </li>
    <li>
        <a 
            href="javascript:void(0);" 
            onclick="navigate('facebook');"
        >Facebook</a>
    </li>
    <li>
        <a 
            href="javascript:void(0);" 
            onclick="navigate('instagram');"
        >Instagram</a>
    </li>
</ul>

JS (Google Tag Manager):

<script type="text/javascript">

  function trackOutboundLink(name, url) {
     dataLayer.push( {
        'event': 'Navigation Click',
        'navigationClick': {
          'name': name,
          'url': url
        }
      });
  }

  function navigate(name) {

    let url;

    if (name==='facebook') {
        url = 'https://www.facebook.com/MyAccount'; 
    } else if (name==='instagram') {
        url = 'https://www.instagram.com/MyAccount';  
    } else if (name==='pinterest') {
        url = 'https://www.pinterest.com/MyAccount/';  
    } else {
        console.log('Warning: Unknown link'); 
    }

    trackOutboundLink(name, url);
    window.open(url);
  }
</script>

Answer 1

Here is my solution by using onclick to track the click and href to navigate. Even simpler seems to use the Google Tag Manager's outbound link tracking trigger, which seems to eliminate the need for onclick script completely.

Widget HTML:

<ul>
    <li>
        <a 
            href="https://www.pinterest.com/MyAccount/" 
            onclick="return trackOutboundLink('pinterest');"
        >Pinterest</a>
    </li>
    <li>
        <a 
            href="https://www.facebook.com/MyAccount" 
            onclick="return trackOutboundLink('facebook');"
        >Facebook</a>
    </li>
    <li>
        <a 
            href="https://www.instagram.com/MyAccount" 
            onclick="return trackOutboundLink('instagram');"
        >Instagram</a>
    </li>
</ul>

JS (Google Tag Manager):

<script type="text/javascript">

  function trackOutboundLink(name) {
     dataLayer.push( {
        'event': 'Navigation Click',
        'navigationClick': {
          'name': name
        }
      });
      return true;
  }
</script>