Adding Google Conversion code to WordPress Contact Form 7

Question

I found a tutorial for adding Google Conversion code to WordPress Contact Form 7 plugin which can be found here.

Currently I've added

<script type="text/javascript">
    $(".wpcf7-form").submit(function(){
        var google_conversion_id = "12345678910";
        var google_conversion_label = "xxxxxxxxxxx";
        var image = new Image(1,1); 
        image.src = "http://www.googleadservices.com/pagead/conversion/"+google_conversion_id+"/?label="+google_conversion_label+"&script=0";
    });
</script>

to my footer, but it doesn't send correct results. Could someone help me out with what I should add to my Contact Form Plugin, through the control panel of WordPress, to make my Analytics show correct results. I would not prefer redirecting to another page.

Answer 1

You are on right track. As this script runs you get your results recorded at server.

1. The easiest and most common way to achieve this is to place the script on a separate page(generally a thank-you.php) and redirect user to that page so after completion of his activity we can run this script and record this activity. OR
2. The other way(a tricky one though) is to make this script run on the same page using ajax/javascript after user's activity.

If you want to set it without any redirection you may find this helpful.

Google Conversion Tracking Without Redirection

Answer 2

The analytic code should be like this format:

ga('send', 'event', 'category', 'action', 'label', value);  // value is a number.

(where the last 2 parameters are optional)

So, we just need to make the Contact Form 7's Additional settings code like this:

on_sent_ok: "ga('send', 'event', 'Landing Page', 'Submit');"
//here 'Landing Page' or 'Submit' are just for sample;

If you want to learn more: Event tracking in WordPress Contact Form 7 (Universal Analytics) and Google Event Tracking - Web Tracking (analytics.js)

Answer 3

I did this in three simple steps:

1. In the CF7 Plugin (additional settings):

on_sent_ok: "run_conversion_code();"

2. In header.php (or in a js file):

       function run_conversion_code()
   
               {
                   $ = jQuery;
                   var a = "/wp-admin/admin-ajax.php";
                   $.post(a, {action: 'run_conversion_code'}).done(function(data){
   
                       $('body').append(data);
   
                   });
   
                   console.log('conversion code running'); 
   
               }
   
       </script>
   

3. functions.php

   function run_conversion_code()

   {
   
       ?>
   
   
           <script type="text/javascript">
   
   
   
   
           /* <![CDATA[ */
   
           var google_conversion_id = 962XXX263;
   
           var google_conversion_language = "en";
   
           var google_conversion_format = "3";
   
           var google_conversion_color = "ffffff";
   
           var google_conversion_label = "TsaNCM6dq1wQ99HzygM";
   
           var google_remarketing_only = false;
   
           /* ]]> */
   
           </script>
   
           <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
   
           </script>
   
           <noscript>
   
           <div style="display:inline;">
   
           <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/962390263/?label=TsaNCM6dq1wQ99HzygM&amp;guid=ON&amp;script=0"/>
   
           </div>
   
           </noscript>
       <?php   die();
   
   
   }
   

   add_action( 'wp_ajax_run_conversion_code', 'run_conversion_code' );

   add_action( 'wp_ajax_nopriv_run_conversion_code', 'run_conversion_code');