Выявление ссылок на почту после отслеживания Google Analytics - PullRequest
Новая
       11

Выявление ссылок на почту после отслеживания Google Analytics

0 голосов
/ 18 января 2020

Через Google Analytics (GA) я хотел бы отследить, насколько интересны контактные адреса электронной почты, опубликованные в списках, представленных пользователями на веб-сайте (WordPress). Просто отслеживание кликов «mailto:» через GA не работает, потому что большинство людей копируют и вставляют адрес электронной почты, а не щелкают по нему.

Итак, чтобы отслеживать интерес, я бы хотел иметь адреса электронной почты в этих представленных пользователем (и редактируемых пользователем) списках, автоматически скрываемых с помощью интерактивного наложения («Нажмите, чтобы показать адрес электронной почты»), который отслеживается в GA и отображает адрес электронной почты.

Адреса электронной почты не являются собственными <div>, но объединяются в <div> в сочетании с текстом, предоставленным другим пользователем (о том, как с ним связаться), поэтому селектор (если это правильный термин) может не было бы <div> - иначе JavaScript было бы по линии этой работы (это выходит за рамки моих способностей кодирования, но было предложено мне)? 

  $(this).addClass("active")
  << SOME GOOGLE TRACKING CODE HERE >>
});

.email_container a {display: none;}
.email_container.active a {display: block;}
.email_container.active span {display: none;}

<div class="email_container">
  <span>Click to show e-mail address</span>
  <a href="mailto:user@emailaddress.com">user@emailaddress.com</a>
</div>

Есть ли способ сделать что-то вроде этой работы через JavaScript, используя эквивалент CSS селектора a[href^="mailto:"]? Если да, то как?

РЕДАКТИРОВАТЬ: расширенный контекст - адреса электронной почты находятся в пределах <div> с другим редактируемым контентом, отправленным пользователем и после отправки, например: 

<div id="listing_contact" class="listing-contact-wrap">
<h3 id="label-listing_contact" class="custom-label" >How to Contact:</h3> 

<p>You can contact us at <a href="mailto:user@emailaddress.com" target="_blank" rel="noopener">user@emailaddress.com</a> or fax to: 555-555-5555.</p>

</div>

Я могу вручную вставить класс в <a href="mailto:">, если это будет полезно.

1 Ответ

0 голосов
/ 18 января 2020

Вы можете добавить прослушиватель событий клика к промежутку, а затем добавить класс к ссылке mailto при нажатии.

Это позволяет отслеживать клики на span в га.

Я использовал те же HTML, что и у вас в вопросе, но я бы порекомендовал добавить уникальные классы, если это возможно. 

const showEmail = document.querySelector('.email_container span')
const mailTo = document.querySelector('.email_container a')

showEmail.addEventListener("click", () => {
  mailTo.classList.add('visible')
});
.email_container a {
  display: none;
}

.email_container a.visible {
  display: inline;
}
<div class="email_container">
  <span>Click to show e-mail address</span>
  <a href="mailto:user@emailaddress.com">user@emailaddress.com</a>
</div>
...