Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Neil Maycock 5 posts 75 karma points
    May 22, 2018 @ 14:38
    Neil Maycock
    0

    Google Analytics Event Tracking

    Hi Guys,

    I don't like posting when a topic has been mentioned before but I can't find the answer and have spent about an hour trawling forums.

    Okay, I didn't put the site together and I do SEO so my coding skills are pretty basic. I am trying to input Google Events Tracking for a client on a contact us form. I have found the code.

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.ContactUs>
    @using ContentModels = Umbraco.Web.PublishedContentModels;
    @{
        Layout = "Master.cshtml";
    }
    
    <script>
        document.getElementById("ContactUsNavLink").classList.add('active');
    </script>
    
    <body>
        <div class="wrapper">
            <div class="content container">
                <div class="page-wrapper">
                    <header class="page-heading clearfix">
                        <h1 class="heading-title pull-left">Contact</h1>
                        <div class="breadcrumbs pull-right">
                            <ul class="breadcrumbs-list">
                                <li class="breadcrumbs-label">You are here:</li>
                                <li><a href="\home">Home</a><i class="fa fa-angle-right"></i></li>
                                <li class="current">Contact</li>
                            </ul>
                        </div>
                    </header>
                    <div class="page-content">
                        <div class="row">
                            <article class="contact-form col-lg-8 col-md-7  col-12 page-row">
                                <h3 class="title">Get in touch</h3>
                                <p>We’d love to hear from you. Please fill in required details including the date in which you want to book your vehicle for a Dinitrol Underseal (Please note to confirm your booking date a £50 deposit is required)</p>
                                <form action="https://formspree.io/[email protected]" method="POST">
                                    <div class="form-group">
                                        <label for="message">Message Type</label>
                                        <select class="form-control" name="Message Type">
                                            <option selected="selected" value="Contact Us">Contact Us</option>
                                            <option value="Booking">Booking</option>
                                            <option value="Book Inspection">Book Inspection</option>
                                        </select>
                                    </div>
                                    <div class="form-group name">
                                        <label for="name">Name</label>
                                        <input id="name" type="text" class="form-control" placeholder="Enter your name" name="Name">
                                    </div>
                                    <div class="form-group email">
                                        <label for="email">Email<span class="required">*</span></label>
                                        <input id="email" type="email" class="form-control" placeholder="Enter your email" name="Email">
                                    </div>
                                    <div class="form-group phone">
                                        <label for="phone">Phone</label>
                                        <input id="phone" type="tel" class="form-control" placeholder="Enter your contact number" name="Phone">
                                    </div>
                                    <div class="form-group message">
                                        <label for="message">Message<span class="required">*</span></label>
                                        <textarea id="message" class="form-control" rows="6" placeholder="Enter your message here..." name="Message"></textarea>
                                    </div>
                                    <button type="submit" class="btn btn-theme">Send message</button>
                                </form>
                            </article>
    

    I am pretty sure I should be putting the code here

    <form action="https://formspree.io/[email protected]" method="POST" onClick="ga('send', 'event', { eventCategory: 'Book Now', eventAction: 'submit', eventLabel: 'contact', eventValue: 1});>
    

    Is this correct, have I missed something?

    Regards Neil

  • Amir Khan 1284 posts 2741 karma points
    May 22, 2018 @ 15:36
    Amir Khan
    1

    Hi Neil,

    You'll likely want to put that onClick event on the submit button as that's whats going to get triggered when the form submits.

    Hope this helps!

    Amir

  • Neil Maycock 5 posts 75 karma points
    May 23, 2018 @ 08:01
    Neil Maycock
    0

    Hi Amir/Everyone

    Thanks so much for the help. I put the code in here:-

    > <button type="submit" class="btn btn-theme" onClick="ga('send',
    > 'event', { eventCategory: 'form', eventAction: 'submit', eventLabel:
    > 'contact', eventValue: 1});">Send message</button>
    >                             </form>
    

    But can't see it analytics when I fill in a test enquiry in. Did I put it in the wrong place? This is using gtag.js. Am I being dumb here?

    Regards Neil

  • Neil Maycock 5 posts 75 karma points
    May 31, 2018 @ 17:59
    Neil Maycock
    0

    Any help here please.

  • Paul Seal 524 posts 2889 karma points MVP 7x c-trib
    May 31, 2018 @ 21:19
    Paul Seal
    1

    Hi Niel Have a look at this post I wrote about event tracking.

    https://codeshare.co.uk/ga

  • Neil Maycock 5 posts 75 karma points
    Jul 03, 2018 @ 15:46
    Neil Maycock
    0

    Hi Paul,

    Thank you so much for your help.

    Here is what I put in

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-96283580-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-96283580-1');
    </script>
    <script type="text/javascript">
        //GA Event Tracker Script. Licensed under MIT. Free for any use by all. Written by Paul Seal from codeshare.co.uk
    
        // Get the category, action and label from the element and send it to GA. The action is optional, because mostly it will be a click event.
        var trackClickEvent = function () {
            var eventCategory = this.getAttribute("data-event-category");
            var eventAction = this.getAttribute("data-event-action");
            var eventLabel = this.getAttribute("data-event-label");
            var eventValue = this.getAttribute("data-event-value");
            ga('send', 'event', eventCategory, (eventAction != undefined && eventAction != '' ? eventAction : 'click'), eventLabel, eventValue);
        };
    
        // Find all of the elements on the page which have the class 'ga-event'
        var elementsToTrack = document.getElementsByClassName("ga-event");
    
        // Add an event listener to each of the elements you found
        var elementsToTrackLength = elementsToTrack.length;
        for (var i = 0; i < elementsToTrackLength; i++) {
            elementsToTrack[i].addEventListener('click', trackClickEvent, false);
        }
    </script>
    

    and here is what I put in on the button

    <button type="submit" class="btn btn-theme" class="ga-event" data-event-category="Form completion">Send message</button>
    

    And here is what Google analytics debugger said

    Initializing Google Analytics.
    analytics_debug.js:10 Running command: ga("create", "UA-96283580-1", {cookieDomain: "auto", name: "gtag_UA_96283580_1"})
    analytics_debug.js:10 Creating new tracker: gtag_UA_96283580_1
    analytics_debug.js:10 Auto cookieDomain found: "preserveprotect.co.uk"
    analytics_debug.js:10 Running command: ga(Function)
    analytics_debug.js:10 Running command: ga("gtag_UA_96283580_1.send", "pageview", {forceSSL: true, &gtm: "u6c", hitCallback: [function]})
    analytics_debug.js:10 
    Sent beacon:
    v=1&_v=j68d&a=481699980&t=pageview&_s=1&dl=http%3A%2F%2Fwww.preserveprotect.co.uk%2Fcontactus&ul=en-us&de=UTF-8&dt=Contact%20Us&sd=24-bit&sr=1366x768&vp=794x662&je=0&_utma=261080396.2072758366.1524382087.1525767966.1525806822.4&_utmz=261080396.1524557982.2.2.utmcsr%3Dgoogle%7Cutmccn%3D(organic)%7Cutmcmd%3Dorganic%7Cutmctr%3D(not%2520provided)&_utmht=1530632633445&_u=AACCAUAB~&jid=&gjid=&cid=2072758366.1524382087&tid=UA-96283580-1&_gid=1066954442.1530628870&gtm=u6c&z=7117898
    
    
    analytics_debug.js:10 <unknown>        (&gtm)  u6c
    analytics_debug.js:10 _j1              (&jid)  
    analytics_debug.js:10 _j2              (&gjid) 
    analytics_debug.js:10 adSenseId        (&a)    481699980
    analytics_debug.js:10 apiVersion       (&v)    1
    analytics_debug.js:10 clientId         (&cid)  2072758366.1524382087
    analytics_debug.js:10 encoding         (&de)   UTF-8
    analytics_debug.js:10 hitType          (&t)    pageview
    analytics_debug.js:10 javaEnabled      (&je)   0
    analytics_debug.js:10 language         (&ul)   en-us
    analytics_debug.js:10 location         (&dl)   http://www.preserveprotect.co.uk/contactus
    analytics_debug.js:10 screenColors     (&sd)   24-bit
    analytics_debug.js:10 screenResolution (&sr)   1366x768
    analytics_debug.js:10 title            (&dt)   Contact Us
    analytics_debug.js:10 trackingId       (&tid)  UA-96283580-1
    analytics_debug.js:10 viewportSize     (&vp)   794x662
    analytics_debug.js:10 Registered new plugin: ga(provide, "render", Function)
    

    Still not tracking, I know it's something simple, but still not tracking.

    Regards Neil

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jun 01, 2018 @ 03:30
    Jan Skovgaard
    0

    Hi Neil

    I'm wondering if the Google analytics code has been added to your site? And if it has...Has it then been added correctly? I usually use a Chrome extension called GA debug, which you can find here https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna - It makes it possible to see if GA has been added properly to the site and it makes it possible to see if events are being captured when clicking on for instance a button, which is supposed to send some data to Google analytics - It does so by writing lines to the Chrome console log.

    Also it might be a good idea to start out by checking if there is an error in the console log, which might be the reason the event is not visible in GA? - Also...Does GA detect clicks immediately these days? Or is there still a threshold of a certain amount of hours before it's possible to see the registered clicks? It's been a while since I have been testing GA setups. But I recall that once there was a delay in when you could actually see the events tracked in GA.

    Hope this helps!

    /Jan

  • Neil Maycock 5 posts 75 karma points
    Jul 03, 2018 @ 15:47
    Neil Maycock
    0

    Hi Jan,

    I put the Google Analytics debugger info in as above and included full code this time. Can you see anything I am missing

    Regards Neil

Please Sign in or register to post replies

Write your reply to:

Draft