Count advert-contacts (contact form submits & phone-number clicks)

  • Resolved dumboxp

    (@dumboxp)


    6 years, 4 months ago

    Dear Greg,

    Do you have an idea how to track (count) the following user-actions on the adverts page:

    * number of contact approaches via the form (submits)
    * number of clicks on the button with an abbreviated phone number (clicks)

    Having a little statistic overview with this data on WordPress-Dashboard would be great, but needs some more efforts.

    Tracking this using Google Analytics should be easier? Do you or any other have any idea how this could be realized or do you have a solution for it already?

    thanks for your help.
    br, Roland

    ps: to abbreviate the phone number and show it after a click, the following css-only-solution works (js would be better):

    .adverts-button a {
  display: inline-block;
  line-height: 12px;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adverts-button a:hover, .adverts-button a:active {
  width: auto;
  overflow: initial;
  text-overflow: initial;
}
    • This topic was modified 6 years, 4 months ago by dumboxp. Reason: typo

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Greg Winiarski

    (@gwin)

    Hi,
    the easiest way to do that would be to use Google Analytics Event Tracking https://developers.google.com/analytics/devguides/collection/analyticsjs/events

    To make this work you would need a JavaScript file which will wait for the events to be triggered, the file can have following code

    
jQuery(function($) {
  $( ".adverts-button a[href*='tel:']" ).click( function() {
    ga('send', 'event', 'Phone Number', 'click' );
  });
  $( "input[name='adverts_contact_form']" ).click( function() {
    ga('send', 'event', 'Send Message', 'click' );
  });
});
    Thread Starter dumboxp

    (@dumboxp)

    Hi Greg,

    thanks for your tip!
    Here the complete css/js-code i am now using to track advert-interactions:

    WordPress > Design > Custom CSS

    /* Hide part of phone number on adverts page */
.adverts-button a[href*='tel:'] {
  display: inline-block;
  line-height: 12px;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

    /themes/templatename-child/functions.php

    /**
* Show phone number & tracking of phone clicks and message submits with Google Analytics
**/
add_action( 'wp_head', 'my_custom_js' );
function my_custom_js() {
  echo <<<EOF
  <script type='text/javascript'>
  jQuery(function($) {
    
    $(".adverts-button a[href*='tel:']").parent().click( function() {
      // Show full phone number (hide/show needed for Google Chrome Bug)
      $(".adverts-button a[href*='tel:']").css("width", "auto")
        .css("overflow", "initial")
        .css("text-overflow", "initial")
        .hide()
        .show();

      // ga('send', 'event', 'phone', 'click' ); // alternative tracking
      gtag('event', 'phone-click', 
        { 'event_category': 'adverts', event_label: '' });
      return false;
    });

    $("input[name='adverts_contact_form']").click( function() {
      // ga('send', 'event', 'message', 'click'); // alternative tracking
      gtag('event', 'message-submit', 
        { 'event_category': 'adverts', event_label: '' });
    });

  });
  </script>
EOF;
}
    • This reply was modified 6 years, 4 months ago by dumboxp.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Count advert-contacts (contact form submits & phone-number clicks)’ is closed to new replies.