search

mhoad / oaf-analytics

Outstanding issues to fix up the analytics implementation on the new OAF website
0 stars 0 forks source link

Add custom data-attributes to social icons in the footer #7

Open mhoad opened 7 years ago

mhoad commented 7 years ago

Right now in the global footer we have a bunch of social icons that link to OAF's various profiles like so: image

Right now the code for that looks like the following (using LinkedIn as an example below) :

<li class="sitemap__item__child footer-social__item">
  <a href="https://www.linkedin.com/company/one-acre-fund" class="footer-social__link footer-social__item__link">
      <span class="footer-social__label">Linkedin</span>
      <svg class="footer-social__icon" height="30px" width="30px">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-linkedin"></use>
      </svg>
  </a>
</li>

I want to be able to track essentially whenever someone clicks on a link with the class .footer-social__item__link that I can pass a clean social network name back into their tracking which in this case would be just LinkedIn

In order to do that all I need is for you to add a custom data-attribute on the link element like so:

<li class="sitemap__item__child footer-social__item">
  <a data-social-network="LinkedIn" href="https://www.linkedin.com/company/one-acre-fund" class="footer-social__link footer-social__item__link" >
      <span class="footer-social__label">Linkedin</span>
      <svg class="footer-social__icon" height="30px" width="30px">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-linkedin"></use>
      </svg>
  </a>
</li>

I can take care of the rest from there.

nimasmi commented 7 years ago

This is now done and deployed to the staging site at oneacrefund-staging.torchboxapps.com.