Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #736812

    Hi!
    I learned from this tutorial how to add google tracking to the contact form, but more important for me is to track “tel:” links.
    1. Can you please help me understand how to implement OnClick function on my buttons? (they’re “a href” links that created using Avia Layout Builder > Content Elements > Button).
    2. Please let me know what is the best (easiest, safest, and will stay when I upgrade to new versions) to implement the Google Conversion Tag to my page? (It’s a <script type=”text/javascript”> code that needs to be implemented inside the <body> code).

    Google documentation for this action: https://support.google.com/adwords/answer/6331304?hl=en&authuser=0

    Many thanks!

    • This topic was modified 7 years, 9 months ago by 0_o.
    #736826

    Hey 0_o,

    Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

    #736850

    I guess you’re referring to #1
    How about #2 ? Where should I place this code? maybe Appearance > Editor > Theme Footer (footer.php) ?
    Also, is there a way I can edit the HTML/PHP of a page that I built (and continue editing) with Avia Layout Builder, or is it going to mess things up? (I used to have in the past a WYSIWYG editor that couldn’t load and edit a page I edited the HTML/PHP manually, it mess the whole page just to load the editor…).

    Thanks!

    • This reply was modified 7 years, 9 months ago by 0_o.
    #738496

    Hi,

    1- Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your button and give it a custom CSS class and then add following code to Functions.php file in Appearance > Editor

    function av_button_onclick(){
    ?>
     <script>
    jQuery(window).load(function(){
    jQuery('.your-custom-class a').attr('onclick','_gaq.push(['_trackPageview', '/VP/XXX/XXX']);');
    });
     </script>
    <?php
    }
    add_action('wp_footer', 'av_button_onclick');

    2- Please add following code to Functions.php file in Appearance > Editor

    function av_custom_code(){
    ?>
    // Your code goes here 
    <?php
    }
    add_action('wp_footer', 'av_custom_code');

    Best regards,
    Yigit

    #738580

    Thanks Yigit!!!
    Just to make sure I understand, I already enabled the custom css field, now in the Functions.php file in Appearance > Editor, do I need to add both of the codes you mentioned before, and just change the “Your code goes here”, so the additional lines in this file will look like that?

    function av_button_onclick(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(‘.CUSTOMCLASS123 a’).attr(‘onclick’,’_gaq.push([‘_trackPageview’, ‘/VP/XXX/XXX’]);’);
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘av_button_onclick’);

    function av_custom_code(){
    ?>
    CUSTOMCODEBLAHBLAH123
    <?php
    }
    add_action(‘wp_footer’, ‘av_custom_code’);

    #738584

    Hey!

    Exactly :)

    Best regards,
    Yigit

    #759223

    Hi, I tried that but I dont think it works as expected. Google tag manager (chrome extension) doesnt recognize the click.
    How can I start troubleshooting this issue? none of the code that I put in functions.php shows under “page source”.

    Many thanks!

    • This reply was modified 7 years, 8 months ago by 0_o.
    #759441

    I’m not sure why we used “gaq.push” before,

    The code that I need to implement in the a tag is:

    <a onclick="goog_report_conversion ('Description')" href="Link">Click Here</a>

    The code that I need to implement inside the body tag is:

    <script type="text/javascript">
      /* <![CDATA[ */
      goog_snippet_vars = function() {
        var w = window;
        w.google_conversion_id = 123123123;
        w.google_conversion_label = "123123123";
        w.google_remarketing_only = false;
      }
      goog_report_conversion = function(url) {
        goog_snippet_vars();
        window.google_conversion_format = "3";
        var opt = new Object();
        opt.onload_callback = function() {
        if (typeof(url) != 'undefined') {
          window.location = url;
        }
      }
      var conv_handler = window['google_trackConversion'];
      if (typeof(conv_handler) == 'function') {
        conv_handler(opt);
      }
    }
    /* ]]> */
    </script>
    <script type="text/javascript"
      src="//www.googleadservices.com/pagead/conversion_async.js">
    </script>
    • This reply was modified 7 years, 8 months ago by 0_o.
    #762029

    Hi!

    The code that I need to implement inside the body tag is:

    Please add this code in the functions.php file:

    function ava_custom_script() {
    ?>
    	<script type="text/javascript">
    	/* <![CDATA[ */
    	goog_snippet_vars = function() {
    		var w = window;
    		w.google_conversion_id = 123123123;
    		w.google_conversion_label = "123123123";
    		w.google_remarketing_only = false;
    	}
    	
    	goog_report_conversion = function(url) {
    		goog_snippet_vars();
    		window.google_conversion_format = "3";
    		var opt = new Object();
    		opt.onload_callback = function() {
    			if (typeof(url) != 'undefined') {
    			  window.location = url;
    			}
    		}
    		var conv_handler = window['google_trackConversion'];
    		if (typeof(conv_handler) == 'function') {
    			conv_handler(opt);
    		}
    	}
    	/* ]]> */
    	</script>
    	<script type="text/javascript"
    	src="//www.googleadservices.com/pagead/conversion_async.js">
    	</script>
    <?php
    }
    add_action('ava_after_main_container', 'ava_custom_script');

    Cheers!
    Ismael

    #763100

    Thanks, I guess that code should replace the “av_custom_code” Yigit suggested before.

    And how about the “av_button_onclick” he suggested? should it stay exactly the same? I still can’t understand that part of the code: attr(‘onclick’,’_gaq.push([‘_trackPageview’, ‘/VP/XXX/XXX’]);’);
    Why are we using gaq.push if it’s not part of the code Google asked me to implement?

    Thanks!

    • This reply was modified 7 years, 7 months ago by 0_o.
    #763138

    Hey!

    Just replace the .attr value with your google code.

    goog_report_conversion ('Description')
    

    Ex:

    .attr('onclick','goog_report_conversion ("Description");');
    

    Best regards,
    Ismael

    #763156

    Thank you Ismael!

    Now, for Analytics tracking I’m using the code:


    <script>
    (function($){
    $(window).load(function() {
    $(‘.button-1 a’).on(‘click’, function() {
    ga(‘send’, ‘event’, ‘button’, ‘click’, ‘button-1’);
    });
    $(‘.button-2 a’).on(‘click’, function() {
    ga(‘send’, ‘event’, ‘button’, ‘click’, ‘button-2’);
    });
    $(‘.button-3 a’).on(‘click’, function() {
    ga(‘send’, ‘event’, ‘button’, ‘click’, ‘button-3’);
    });
    });
    })(jQuery);
    </script>

    Inside the Analytics Code field (in Enfold tab).

    Is there a way to implement it in the div <div class=’phone-info> that is in the header, to track onclick on the phone number?

    Thanks again!

    #763497

    Hey!

    Apply the same jQuery click event or .attr function on “.phone-info span” selector.

    Regards,
    Ismael

    #763797

    Actually, it’s my bad, defining it in the div section isn’t an option because I have 2 links in this phone-info field and I need to track each one of them as a different analytics event.
    That’s what I tried to do, but it’s not working:
    I entered this code in the “Phone Number or small info text” field:

    <a href="LINK1" class="TRACKING1">TEXT1</a> <a href="LINK2" class="TRACKING2">TEXT2</a>

    And this code inside the google services field:
    <script>
    (function($){
    $(window).load(function() {
    $(‘.TRACKING1 a’).on(‘click’, function() {
    ga(‘send’, ‘event’, ‘description’, ‘description’, ‘description’);
    });
    $(‘.TRACKING2 a’).on(‘click’, function() {
    ga(‘send’, ‘event’, ‘description’, ‘description’, ‘description’);
    });
    });
    })(jQuery);
    </script>

    • This reply was modified 7 years, 7 months ago by 0_o.
    #763989

    Hi!

    The selectors are invalid. You need to remove the link (a) selector and use the class attribute.

    .TRACKING1
    

    and

    .TRACKING2
    

    Regards,
    Ismael

    #763994

    So to keep the code in “Phone Number or small info text” field as is, and just change the jquery code from:
    $(‘.TRACKING1 a’).on(‘click’, function() {
    to:
    $(‘.TRACKING1’).on(‘click’, function() {
    ?

    Sorry for the noob question, I just have no experience with JQuery, thank you for all your help I know it’s not related directly to your theme and I highly appreciate your help!

    • This reply was modified 7 years, 7 months ago by 0_o.
    #764006

    Hi!

    Yes, remove the link tag on those lines. The link tags are called .TRACKING1 and .TRACKING2 respectively and adding the link tag (a) is invalid or redundant.

    Regards,
    Ismael

Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.