Google Analytics Funnel & Goal Setup For Squirrelcart 3+

[ljcaswell]

I've developed a rather novel way of setting up funnel and goal tracking for Google Analytics. Because Squirrelcart uses the same URL (index.php) for all steps of the checkout process, you need to somehow tell Google which step the customer is at in the process.

Here's how I did it.

First, make sure you have the Google Analytics NEW code in your store_main.tpl.php, in the HEAD section.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXX-1");
pageTracker._trackPageview();
</script>

Then, in checkout.tpl.php, you need to find:

<!-- Template: <?php print basename(__FILE__) ?> -->

and under it, add:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

This gives us access to jquery, so we can do the rest of the processing.

At the very end of checkout.tpl.php, add the following:

<script type="text/javascript" language="javascript">
<!--
if($($("[class^=step1]")).hasClass("active"))
        pageTracker._trackPageview("/funnel_G1/step1.html"); 
if($($("[class^=step2]")).hasClass("active"))
        pageTracker._trackPageview("/funnel_G1/step2.html"); 
if($($("[class^=step3]")).hasClass("active"))
        pageTracker._trackPageview("/funnel_G1/step3.html"); 
if($($("[class^=step4]")).hasClass("active"))
        pageTracker._trackPageview("/funnel_G1/step4.html"); 
-->
</script>

What this does is to check which step is currently active, by checking the DIV tags that say:

Step 1 Confirm Items
Step 2 Enter Address
Step 3 Choose Shipping
Step 4 Submit Payment

across the top of the checkout pages. If you notice, when you're checking out, each step you're on is highlighted blue. The jquery script above checks to see which step is highlighted blue and then sends Google a pagetracker for each step. NOTE: If the code for those steps changes in Squirrelcart with a future update, it may break this script.

Finally, in checkout_done.tpl.php, find

<div class="checkout_done">
        <?php print $Extra_HTML ?>

        <?php print $Order_Detail ?>
</div>

and under it, add

<img src="/images/blank.gif" onload="pageTracker._trackPageview("/funnel_G1/step5.html"); " />

You may also need to add a 1x1 white GIF in your /images directory, if there's not already one there.

Then, login to your Google Analytics page, and go into the Goal Setup section.

Make sure it's set to "Head Match"

In the Goal URL field, put https://www.mysite.com/funnel_G1/step5.html

Then, in the funnel fields:

Step 1 = http://www.mysite.com/funnel_G1/step1.html
Step 2 = https://www.mysite.com/funnel_G1/step2.html
Step 3 = https://www.mysite.com/funnel_G1/step3.html
Step 4 = https://www.mysite.com/funnel_G1/step4.html

This works for me, and I'm sure that there may be an easier and more elegant solution, but I thought I would share.

[Jamie]

Nice job figuring this out.

This works for me, and I'm sure that there may be an easier and more elegant solution, but I thought I would share.

Yes. While your solution is clever, it adds the overhead of needing to load jQuery when you don't really need to. I would recommend not using jQuery for this. You can do this all via PHP and a few lines in checkout.tpl.php. Very similar to what you are doing, but without needing the JS to accomplish it.

If you want to use the same page name format you are using, with step numbers, you would need something like this to set the current step number in $current_step:

<?php 
for($step_no = 1; $step_no <= 4; $step_no++) {
    if (${"Step_{$step_no}_State"} == 'active') $current_step = $step_no;
}
if (empty($current_step) && $active_step == 'done') $current_step = 5;
?>

Add a little more code to make use of that variable:

<?php 
for($step_no = 1; $step_no <= 4; $step_no++) {
    if (${"Step_{$step_no}_State"} == 'active') $current_step = $step_no;
}
if (empty($current_step) && $active_step == 'done') $current_step = 5;

if (is_numeric($current_step)) {
?>
<script type="text/javascript" language="javascript">
    pageTracker._trackPageview("/funnel_G1/step<?php print $current_step?>.html"); 
</script>

<?php } ?>

Another approach (probably better?) is to use the built in variable $active_step, which contains the current step in words, like:

• view
• address
• ship
• pay
• done

You could then tell Google you are sending them to "checkout_view.html", "checkout_address.html", "checkout_ship.html", etc...

The code to put in checkout.tpl.php for that is much simpler:

<script type="text/javascript" language="javascript">
    pageTracker._trackPageview("/funnel_G1/step<?php print $current_step?>.html"); 
</script>

[ljcaswell]

Thanks Jamie - the last solution is MUCH simpler!! There's one typo in your code though($current_step should be $active_step), so here's a revised complete set of setup instructions.

First, make sure you have the Google Analytics NEW code in your store_main.tpl.php, in the HEAD section.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXX-1");
pageTracker._trackPageview();
</script>

Then, at the end of checkout.tpl.php add:

<script type="text/javascript" language="javascript">
    pageTracker._trackPageview("/funnel_G1/step<?php print $active_step?>.html"); 
</script>

Then, login to your Google Analytics page, and go into the Goal Setup section.

Make sure it's set to "Head Match"

In the Goal URL field, put https://www.mysite.com/funnel_G1/stepdone.html

Then, in the funnel fields:

Step 1 = http://www.mysite.com/funnel_G1/stepview.html
Step 2 = https://www.mysite.com/funnel_G1/stepaddress.html
Step 3 = https://www.mysite.com/funnel_G1/stepship.html
Step 4 = https://www.mysite.com/funnel_G1/steppay.html
Step 5 = https://www.mysite.com/funnel_G1/stepdone.html

[ljcaswell]

Sorry, no need to put Step 5 in the Funnel section, so just:

Step 1 = http://www.mysite.com/funnel_G1/stepview.html
Step 2 = https://www.mysite.com/funnel_G1/stepaddress.html
Step 3 = https://www.mysite.com/funnel_G1/stepship.html
Step 4 = https://www.mysite.com/funnel_G1/steppay.html

[Jamie]

Sure, no problem. I'll get a built in Google Analytics feature done one of these days.

[greenM]

THANK YOU GUYS. I have been waiting for this code for long time. Keep up the amazing work.

[ljcaswell]

Jamie:

I'm noticing that when customers are paying with PayPal, the goal is not getting completed. Any idea how we can modify the code to capture these?

Right now, I'm showing funnel abandonments after the Payment step, leaving the site at /index.php?pp_return=1&tx=8C...........

[Jamie]

That is going to be very tricky, and will depend on whether you are using PayPal Standard or PayPal Pro.

With PayPal Standard, once the customer is sent to PayPal.com they are only returned to your site when they pay via a PayPal account. If they pay via a credit card without logging in, they are NOT returned. They stay on PayPal.com and the IPN notification sent to your website will complete the order provided IPN is enabled and working.

The only reliable way to report that an order has completed via PayPal is to write custom code that ties into our IPN code in squirrelcart/paypal_ipn.php. However, you are not going to be able to use Javascript for that. I don't know if Google Analytics provides a way of sending an HTTP post to one of their URLs in order to track a conversion or not; If they do then you would need to use CURL via our sc_http_request() function to make that HTTP request.

For PayPal Pro, that shouldn't be necessary as the customer stays on your site when they complete the order.

[greenM]

I see in the 1st line it is http:// and rest is https://


Step 1 = http://www.mysite.com/funnel_G1/stepview.htmlStep 2 = https://www.mysite.com/funnel_G1/stepaddress.html
Step 3 = https://www.mysite.com/funnel_G1/stepship.html
Step 4 = https://www.mysite.com/funnel_G1/steppay.html

Is this on purpose.

[greenM]

Hi ljcaswell, thank you for taking time and posting GA goals code. I have used this code exactly the way you have mentioned. I have put GA code in the head section of store_main.tpl.php and added
<script type="text/javascript" language="javascript">
pageTracker._trackPageview("/funnel_G1/step<?php print $active_step?>.html");
</script>
in the checkout_done.tpl.php and created goal and funnels in GA. But still I am not able to see any goals. Is there anything I am missing? Please help.