title: Revealing mailto links after Google Analytics trackable click
body: <p>Via Google Analytics (GA), I would like to track how much interest there is in contact e-mail addresses published in user-submitted listings on a (WordPress) website. Just tracking "mailto:" clicks via GA doesn't work, because most people copy and paste an e-mail address, and don't click on it.</p>
  
  <p>So, to track interest, I would like to have e-mail addresses in these user-submitted (and user editable) listings automatically hidden with a clickable overlay ("Click to show e-mail address"), which is trackable in GA, and reveals the e-mail address.</p>
  
  <p>The e-mail addresses are not in their own <code>&lt;div&gt;</code>, but are in a <code>&lt;div&gt;</code> combined with other user submitted text (about how to contact them), so the selector (if that's the right term) can't be <code>&lt;div&gt;</code>--otherwise, would JavaScript along the lines of this work (this is beyond my coding abilities, but was suggested to me)?</p>
  
  <pre><code>  $(this).addClass("active")
    &lt;&lt; SOME GOOGLE TRACKING CODE HERE &gt;&gt;
  });
  
  .email_container a {display: none;}
  .email_container.active a {display: block;}
  .email_container.active span {display: none;}
  
  &lt;div class="email_container"&gt;
    &lt;span&gt;Click to show e-mail address&lt;/span&gt;
    &lt;a href="mailto:user@emailaddress.com"&gt;user@emailaddress.com&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to make something like this work via JavaScript, using the equivalent of the CSS selector <code>a[href^="mailto:"]</code>? If so, how so?</p>
  
  <p>EDIT: expanded context--the e-mail addresses are within a <code>&lt;div&gt;</code> with other user-submitted and post-submission editable content, like this:</p>
  
  <pre><code>&lt;div id="listing_contact" class="listing-contact-wrap"&gt;
  &lt;h3 id="label-listing_contact" class="custom-label" &gt;How to Contact:&lt;/h3&gt; 
  
  &lt;p&gt;You can contact us at &lt;a href="mailto:user@emailaddress.com" target="_blank" rel="noopener"&gt;user@emailaddress.com&lt;/a&gt; or fax to: 555-555-5555.&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I can manually insert a class into the <code>&lt;a href="mailto:"&gt;</code> in question, if helpful.</p>