June 10, 2010
Setting up Google Analytics in Yahoo Stores Properly
Ya know, as little as 2 years ago, Google and Yahoo really did not play well together especially when it came to analytics. Sure your Yahoo store has some backend features and stats but its nothing compared to what Google Analytics can offer. The problem however is understanding exactly how to set it up properly on your site. Since I am asked quite often to help do this for customers, I figured I would write a self help way of doing it yourself. Of course, if you still want help, I am always for hire ;-p
The first thing you must do of course is signup for a Google Analtics account. I am not going to go through that process. Once you have your account setup just set it to the side for a second while we get some code in your Yahoo Store.
STEP 1
The first snippet of code you need is for all your store pages. Copy and paste from below and replace the XX-XXXXXX-X with YOUR Google Analytics ID. It will look something like UA-453212-5
<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">
try {
var pageTracker = _gat._getTracker("XX-XXXXXX-X");
pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);
pageTracker._setAllowAnchor(true);
pageTracker._trackPageview();
} catch(err) {}</script>
The above code is what you will copy and paste into every page of your store (except the cart pages). The easiest way to tackle this is to goto your store editor and then VARIABLES. In that area you can use the copyright box, footer, head or any other place that will allow javascript. If you have custom templates you will probably see an area that has other head tags or other scripts that you can add this into.
STEP 2
After that is done, its time to add some code to your actual shopping cart pages. Under order settings from your Yahoo dashboard, goto CHECKOUT MANAGER. Then goto PAGE CONFIGURATION. Personally we use the main cart page, combined shipping and billing and order confirmation. You may be using the main cart page, shipping, billing, review and confirmation pages. Either way, there is a small change to the code you must add to each of those pages. So lets start with the Shopping Cart page first. On each of these pages, you will have an HTML HEAD SECTION at the bottom in the advanced settings area. This is where you will copy and paste your code into. Each snippet of code for your cart pages are identical with 1 small change on each.
<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">
try {
var pageTracker = _gat._getTracker("XX-XXXXXX-X");
pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);
pageTracker._setAllowAnchor(true);
pageTracker._trackPageview("/checkout-cart.html");
} catch(err) {}</script>
See that yellow part? Thats the part you have to change on each page of your checkout pages. So just the same code on each page but change the part in yellow so it matches how your checkout flows.
/checkout-cart.html (pretty much what every Yahoo store has as the first initial cart page)
/checkout-ship-bill.html (this is the one you will use if you have shipping AND billing on 1 single page)
/checkout-shipping.html (for single page shipping)
/checkout-billing.html (for single page billing)
/checkout-onepage.html (use this if you have a single page checkout where everything is on the same page, shipping, billing and credit card info)
/checkout-review.html (use this on the review page)
/checkout-status.html (use the on the page that shows order status)
The final piece of code is almost like the above with a couple extras. This piece is the code you paste into the confirmation page. This is the money page so be sure to get this one right.
<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">
try {
var pageTracker = _gat._getTracker("XX-XXXX-X");
pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);
pageTracker._setAllowAnchor(true);
pageTracker._trackPageview("/checkout-confirm.html");
pageTracker._addTrans(orderNum, "", orderTotal, orderTax, orderShipping, "", "", "");
for(i=0;i<codes.length;i++){
pageTracker._addItem(orderNum, codes[i], items[i], "", price[i], qtys[i]);
}
pageTracker._trackTrans();
} catch(err) {}</script>
Again, dont forget to change the XX-XXXXXX-XX with YOUR Google Analytics ID.
STEP 3
This step could present problems for some but honestly its not that tough. We need to alter a couple things in your Yahoo Store templates to make sure everything tracks properly. Basically we are adding a small amount of javascript to all your links and forms that point to your shopping cart. So, goto your Yahoo Store Editor. Click CONENTS from the advanced buttons. Now click Templates. You will have built-in templates and custom templates if you had a Yahoo Store designer handle your setup. Find the template that says Top-bottom-nav-links and click it. Look for the line
CSS-WITH-LINK class WHEN AND
and click on CSS-WITH-LINK
Next click the EDIT button.
In the field next to the Add button, enter onclick
Click the Update button.
Click the New button.
In the text box next to the word simple, paste this "pageTracker._link('http://order.store.yahoo.net/cgi-bin/wg-order?catalog=yhst-XXXXXXXXXXXXX',true);" and be sure to include the " on each side.
NOTE: MAKE SURE TO REPLACE THE STORE ID yhst-XXXXXXXXXXXXX WITH YOUR ACTUAL STORE ID.
Click the nil link next to the word onclick.
Click the Replace button.
That handles the text links. Now we need to make 1 more small change so that the "Add to Cart" buttons or "Send" from your forms work.
Back to the template again, look for one that reads Orderform and click it. Now find the line that has
FORM destination dest
and click on FORM
Next click the EDIT button.
In the field next to the Add button, enter onclick.
Click the Update button.
Click the New button.
In the text box next to the word simple paste "pageTracker._linkByPost(this,true);"
Click the Create button.
Click the nil link next to the word onclick.
Click the Replace button.
Pat yourself on the back… you are now a Yahoo Store Programmer!
Once all this is done, save all changes, publish your checkout and publish your store again so all the changes go live.
Thats it for the Yahoo Store part of installing Google Analytics. Now lets get to a few things to setup in your Google Analytics account.
WATCH THIS VIDEO IF YOU NEED ADDTIONAL HELP
STEP 4
Login to your Google Analytics account. Once there, click on edit for your site.

The next thing you see should be something like below. In the website profile area, click edit again.

Finally we arrive at this… fill this in with your stores information but the most important part is teh default page. Make sure you fill this in with index.html (assuming you are using the actual store from Yahoo and not tags)

Save your changes and you will be back on the Profile settings again. Below the section we were just working on is a GOALS section. Under Goals (set 1) click Add goal. You will see this as the next screen. Fill this in like I have mine setup.


Remember, if you have a different shopping cart setup than I use, you will need to adjust those funnel pages accordingly. So go back up to see what those pages where. You just want to make sure you have exactly how the customers checkout on your store. If you have a shipping page and a billing page, you would ultimately have 1 additional step than I do. Save goal. Thats it! You will now be able to see exactly how many people ordered and purchased in your Google Analytics reports. Not to mention having the ecommerce overview is really nice. Play around with additional settings to get it just right and you are now able to have great data to mange your stores better.










