How To Setup Conversion Tracking In Magento

3rd Party Conversion Tracking

Magento Commerce has the ability to track eCommerce sale with Google Analytics out of the box (more on that in a future post). Something that a lot of merchants struggle with is how to set up conversion tracking for other tracking software or comparison shopping engines.

How To

Here is an easy hack to track conversions for Shopzilla, PriceGrabber and the likes:

Open the file: app\design\frontend\XXXX\XXXX\template\checkout\success.phtml

At the end of the file, add the following code, this will create two variables with the order number and the order total:

1    <?php
2        //Get Order Number & Order Total
3        $order = Mage::getModel('sales/order')->loadByIncrementId(Mage::getSingleton('checkout/session')->getLastRealOrderId());
4        $amount = number_format($order->getGrandTotal(),2);
5    ?>

After the above code snippet, copy and paste the tracking code from the third party analytics software of comparison shopping engine. Insert the following variable where they suggest placing the order ID and the order total:

1    <?php echo $amount; ?> // Order Total
2    <?php echo $this->getOrderId() ?> // Order Number

Here is a code example for the Shopzilla conversion tracking tool:

1    <script language="javascript">
2        var mid            = 'XXXXX'; // Your Shopzilla Merchant ID
3        var cust_type      = '';
4        var order_value    = '<?php echo $amount; ?>'; // Order Amount
5        var order_id       = '<?php echo $this->getOrderId() ?>'; //Order Number
6        var units_ordered  = '';
7    </script>
8    <script language="javascript" src="https://www.shopzilla.com/css/roi_tracker.js"></script>
9    <script language="JavaScript" src="https://eval.bizrate.com/js/pos_193511.js" type="text/javascript"></script>

How to Add Video to Products in Magento

Adding a video to a product greatly enhances the online shopping experience. The out-of-the-box Magento package doesn’t support video. This How-To shows just how to do that. We’ll be able to either (1) drop in HTML embed code from sites like YouTube, or (2) use an FLV file that we provide.

This article assumes you have the jQuery Javascript library installed and have “jQuery.noConflict()”‘ set up.  If you don’t have jQuery.noConflict(), then simply replace instances of “jQuery” with “$”.  If you don’t have this library, download jQuery here.

Here’s the sequence of steps we’re going to take:

1. Create a product attribute for the video code
2. Assign the newly created attribute to an attribute set
3. Modify the template files
4. Obtain and upload a copy of the free JWPlayer
5. Add video to a product using HTML embed code or using an FLV file

1. Create a product attribute for the video code.

Log in to your Magento Admin Panel. Navigate to Catalog > Attributes > Manage Attributes. Click on the “Add New Attribute” button found close to the top-right hand corner of the screen. The first tab that’s open is the *Properties* tab. You are presented with lots of textboxes and dropdowns. Here’s what to fill them in with :



Attribute Properties

- Attribute Code: video
- Scope: Global
- Catalog Input Type of Store Owner: Text Area
- Default Value: [leave blank]
- Unique Value: No
- Values Required: No
- Input Validation for Store Owner: None
- Apply To: All Product Types

Frontend Properties

- Use in quick search: No
- Use in advanced search: No
- Comparable on Front-end: No
- Use in Layered Navigation: No
- Use in Search Results Layered Navigation: No
- Use for Price Rule Conditions: No
- Position: 0
- Allow HTML-tags on Front-end: Yes
- Visible on Product View Page on Front-end: No
- Used in product listing: No
- Used for sorting in product listing: No

Then navigate to the *Manage Label / Options* tab. You only have to fill in the “Admin” value, and for this use “Video“. This can be changed later if you need to.

Click the “Save Attribute” button to save the attribute.

2. Assign the newly created attribute to an attribute set (likely Default)
While still in the Admin Panel, navigate to Catalog > Attributes > Manage Attribute Sets. From the right-hand column, labeled “Unassigned Attributes”, drag our new video attribute to the “General” group found in the middle column.

Click “Save Attribute Set” button to save the attribute set.

3. Modify the template files
You’ll need to use a text-editor and FTP client.

3a. video.phtml
Create a file with these contents:

<?php
$_product = $this->getProduct();
?>
<?php if( $video = $_product->getVideo() ){ ?>
<h2>Product Video</h2>
<div class="products">
<?php if( file_exists( getcwd() .'/skin/frontend/[your-package]/[your-theme]/videos/'. $video ) ){ ?>
<div id="mediaspace">&nbsp;</div>
<script>
jQuery( document ).ready( function(){
jQuery.getScript( '<?php echo $this->getSkinUrl('videos/mediaplayer/swfobject.js'); ?>', function(){
var so = new SWFObject('/skin/frontend/[your-package]/[your-theme]/videos/mediaplayer/player.swf','ply','470','320','9','#ffffff');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','<?php echo Mage::getBaseUrl(); ?>/skin/frontend/[your-package]/[your-theme]/videos/<?php echo $video; ?>');
so.write('mediaspace');
} );
} );
</script>
<?php } else { ?>
<?php echo $video; ?>
<?php } ?>
</div>
<?php } ?>

And save the file as /app/design/frontend/[your-package]/[your-theme]/template/catalog/product/view/video.phtml

3b. catalog.xml

Open up /app/design/frontend/[your-package]/[your-theme]/layout/catalog.xml and add this line:

<block type="catalog/product_view" name="product_video" as="product_video" template="catalog/product/view/video.phtml"/>

as a child anywhere inside this node:

<block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">

… and save the file.

3c. catalog/product/view.phtml

Open up /app/design/frontend/[your-package]/[your-theme]/catalog/product/view.phtml and add this line:

<?php echo $this->getChildHtml('product_video'); ?> 

wherever you want the video to appear on the page.  Save the file.

4. Obtain and upload a copy of the free JWPlayer

Download the player
After you download the ZIP file, extract and upload the files using an FTP client to: /skin/frontend/[your-package]/[your-theme]/videos/*
With the FTP client, rename the “mediaplayer-viral” folder to “mediaplayer”

5. Add video to a product

In the Magento Admin Panel, navigate to Catalog > Manage Products and click on the product you’d like to add video to. You should see a textarea labeled “Video”.

5a. Use HTML embed code

In the “Video” textarea, simply drop in the HTML code you’ve received (such as from YouTube) and click “Save” to save the product.

5b. OR use an FLV file

- Upload your FLV file to /skin/frontend/[your-package]/[your-theme]/videos/

- In the “Video” textarea, specify the filename of the FLV you’ve just uploaded.

Repeat Step 5 for all of the products you want to add video to. 

Congratulations, you’ve added video to your products.

* This method is tested and working for Magento v 1.3.2.4

Magento Admin Grid: how to change number of rows

We had a request from our client, that we change default number of items in Magento admin grid. Now, this is very simple, when we know how to change it. Below you can see an example which uses magento observer model and event hocking “core_block_abstract_prepare_layout_before”.



First of all, make backup copies of your files.

Step 1.
This is example of event hocking, put it in config.xml

01.<adminhtml>

02. <events>

03. <core_block_abstract_prepare_layout_before>

04. <observers>

05. <reward>

06. <class>grid/observer</class>

07. <method>applyLimitToGrid</method>

08. </reward>

09. </observers>

10. </core_block_abstract_prepare_layout_before>

11.

12. </events>

13. </adminhtml>

Step 2.
Create model class observer.php

01.class Inchoo_Grid_Model_Observer

02.{

03.

04. public function applyLimitToGrid(Varien_Event_Observer $observer)

05. {

06. $block = $observer->getEvent()->getBlock();

07. if(($block instanceof Mage_Adminhtml_Block_Widget_Grid) && !($block instanceof Mage_Adminhtml_Block_Dashboard_Grid))

08. $block->setDefaultLimit(200);

09.

10. }

11.

12.}

It would be good that you make your own module and all put in it. I hope that you know how to make magento module.

Magento Layout / Structural Block How to?

1. Layout your Structural Blocks

When you begin the implementation process, first ask yourself this question: What are the layout needs of my store?

What this simply means is: “Will my store always have a left column? Or will some pages have a left, main and a right column? Or perhaps some of the pages will just one column?”. These questions are imperative because the variations of page structure will directly determine the number of skeleton templates you will need to create – For instance, if you have a one column and a 3 column layout, you will need to create two skeleton template accordingly. But before we go further, let’s first look at what a skeleton template looks like.

<div class="header">getChildHtml('header')?&gt;</div>
<div class="middle">
<div class="col-left">getChildHtml('left')?&gt;</div>
<div class="col-main">getChildHtml('content')?&gt;</div>
</div>
<div class="footer">getChildHtml('footer')?&gt;</div>

Pretty straight forward. This type of templates are what we call “skeleton templates” because it exists for the purpose of positioning structural blocks within a page. Such templates are located in app/design/frontend/default/default/template/page/, and you can name it anything you want – mycolumns.phtml, 2columns-left.phtml, whatever suits your fancy. “Wait a minute!!! What is all this getChildHtml(”)?> business?” you say. Ok, let’s move along.

If you examine the method getChildHtml(’header’)?>, you will see that there’s an identifier called “header” being assigned to the area encased by the XHTML
. What getChildHtml does, is it grabs all the content blocks(see step 2 below) that is assigned to “header” via something called a layout (see step 3 below), and places it inside
2. Distribute your Content Blocks (aka Let’s cut up some real meat of the page)
Content blocks are the ones that actually parse your store’s data into visually appealing format using XHTML. Unlike other eCommerce solutions you may be used to, Magento supplies separate content blocks per separate functionalities. What this means is, your col_left.tpl (or whatever else you may be used to working with), no longer contains ALL the XHTML to be shown in the left column but rather, the functionality used in the left column will recruit its own template for use. Let’s take the demo Magento as an example. If you open a category page on your browser, you will see in the right column the following functionalities: mini-cart, compare products, newsletter and community poll. Each of these content blocks comes with its own template file. Because mini-cart is a separate functionality, as is the compare products, newsletter…etc, mini-cart has it’s own template file, compare products has its own template file, and newsletter has its own template file. The XHTMLyou create should be cut up accordingly on per functionality basis.

3. Let’s recap and comprehend
In this step, let’s take a breather and do a quick recap.
When working in the visual aspect of a store running on Magento, there’re three things you will use to visually parse your store data.

Structural Blocks
Structural blocks are the visual skeleton of a store page. These blocks exist for the sole reason of creating visual structure. Example structural blocks are header, left column, main column, footer…etc.

Content Blocks
Content blocks are the blocks that constructs the makeup of a structural block. Each content block represents distinct functionalities such as Mini-cart, mini-wishlist, compare products, newsletter signup…etc, and they comes with it’s own template.

Layouts
Located in app/design/frontend/your_package/your_theme/layout, layout is the one that puts all the pieces together. When a page loads in your store, the following things happen:
a. The layout first grabs the base skeleton template of the site.
b. It grabs all the content blocks that are assigned to the structural blocks of a page, and loads them.
Basically the layout says “Grab these content blocks and nest them inside these structural blocks.” The layout can be updated on a per page basis, so you can conveniently change the functionalities being loaded into each page of you store with just one file.

This is the absolute quick idea of how the templates work in Magento. We’re working on a full documentation and it will be released with the stable version of Magento. In the mean time, the best thing to do is read through the threads of the forum, stay active in the community and ask a lot of questions! I hope this reply gave you some understanding of how things work in Magento.

Quick script to batch create Magento categories

A site we administer with a reasonable amount of SKUs (far in excess of 100,000), needed some quick category manipulation for a series of new data to be dropped in. The new information had a desired category tree that had to be built up quick, but with over 600 categories to be created, human effort wouldn’t be suitable.

So, using the Magento category ID export script to help manipulate the CSV – we were able to quickly make a script to batch create our categories.

First off, create your CSV with 2 columns, the parent ID for the category and the category name – you could easily add more columns for extra options, but it wasn’t necessary for us.

The CSV file should be something like this:

3,subcat
4,subcat2
6,subcat3

Then it should be saved in ./var/import/importCats.csv

Then save the following in ./quickCatCreate.php

<?php
 
    define('MAGENTO', realpath(dirname(__FILE__)));
    require_once MAGENTO . '/app/Mage.php';
 
    umask(0);
    Mage::app()->setCurrentStore(Mage_Core_Model_App::ADMIN_STORE_ID);
        $count = 0;
 
    $file = fopen('./var/import/importCats.csv', 'r');
    while (($line = fgetcsv($file)) !== FALSE) { $count++;
      //$line is an array of the csv elements
 
      if (!empty($line[0]) && !empty($line[1])) {
 
          $data['general']['path'] = $line[0];
          $data['general']['name'] = $line[1];
          $data['general']['meta_title'] = "";
          $data['general']['meta_description'] = "";
          $data['general']['is_active'] = "";
          $data['general']['url_key'] = "";
          $data['general']['display_mode'] = "PRODUCTS";
          $data['general']['is_anchor'] = 0;
 
          $data['category']['parent'] = $line[0]; // 3 top level
          $storeId = 0;
 
          createCategory($data,$storeId);
          sleep(0.5);
          unset($data);
        }
 
    } 
 
 
  function createCategory($data,$storeId) {
 
      echo "Starting {$data['general']['name']} [{$data['category']['parent']}] ...";
 
      $category = Mage::getModel('catalog/category');
      $category->setStoreId($storeId);
 
      # Fix must be applied to run script
      #http://www.magentocommerce.com/boards/appserv/main.php/viewreply/157328/
     
          if (is_array($data)) {
              $category->addData($data['general']);
 
              if (!$category->getId()) {
 
                  $parentId = $data['category']['parent'];
                  if (!$parentId) {
                      if ($storeId) {
                          $parentId = Mage::app()->getStore($storeId)->getRootCategoryId();
                      }
                      else {
                          $parentId = Mage_Catalog_Model_Category::TREE_ROOT_ID;
                      }
                  }
                  $parentCategory = Mage::getModel('catalog/category')->load($parentId);
                  $category->setPath($parentCategory->getPath());
 
              }
 
                    /**
                     * Check "Use Default Value" checkboxes values
                     */
                    if ($useDefaults = $data['use_default']) {
                        foreach ($useDefaults as $attributeCode) {
                            $category->setData($attributeCode, null);
                        }
                    }             
 
              $category->setAttributeSetId($category->getDefaultAttributeSetId());
 
              if (isset($data['category_products']) &&
                  !$category->getProductsReadonly()) {
                  $products = array();
                  parse_str($data['category_products'], $products);
                  $category->setPostedProducts($products);
              }
 
              try {
                  $category->save();
                  echo "Suceeded <br /> ";
              }
              catch (Exception $e){
                      echo "Failed <br />";
 
              }
          }     
 
  }

Then it is just a matter of visiting the link in your browser to create the categories – customise to your hearts content, any further expansion should be very easy (such as product association etc.)

Uh oh – I’m getting errors after the first record!

Fatal error: Call to a member function getPath() on a non-object in app\code\core\Mage\Catalog\Model\Resource\Eav\Mysql4\Category.php on line 385

There is a small NB though, there is a bug with Magento’s original code that will cause a problem with the above script, a quick fix is outlined here. It is just a matter of commenting out 2 lines to force the variable to be re-set.

In ./app/code/core/Mage/Catalog/Model/Resource/Eav/Mysql4/Category.php line #110

protected function _getTree()
    {
        //if (!$this->_tree) {
            $this->_tree = Mage::getResourceModel('catalog/category_tree')
                ->load();
        //}
        return $this->_tree;
    }

Magento - Yahoo Analytics Conversion Code

Unlike other tracking codes, we need to put Yahoo Analytics Conversion code between <HEAD> and </HEAD> tags.

Yahoo’s Instructions for the following code are:

Copy the HTML code below and insert it between the <HEAD> and </HEAD> tags on your site’s conversion page(s). To pass a dynamic revenue value in the tag, you must modify your web pages accordingly.

To add the Yahoo conversion tracking code in the Head tags, we need to look at the checkout layout configuration file:
/app/design/frontend/your_interface/your_theme/layout/checkout.xml

Find out which page layout it uses when an order is completed.

i.e.) For one page checkout, look for this code:

<checkout_onepage_success>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
</reference>

You can edit the Head section of ‘2columns-right.phtml’ to add the Yahoo tracking code. But if this template, 2columns-right.phtml is being used for other pages, I would make a copy of it and name it ‘2columns-right-success.phtml’ and add the tracking code there. This way, it will track it only when there is a successful conversion.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?><SCRIPT language=”JavaScript” type=”text/javascript”>
<!– Yahoo! Inc.
window.ysm_customData = new Object();
window.ysm_customData.conversion = “transId=,currency=,amount=”;
var ysm_accountid = “—–YAHOO_ACCOUNT_ID—–”;
document.write(”<SCR” + “IPT language=’JavaScript’ type=’text/javascript’ ”
+ “SRC=//” + “srv2.wa.marketingsolutions.yahoo.com” + “/script/ScriptServlet” + “?aid=” + ysm_accountid
+ “></SCR” + “IPT>”);
// –>
</SCRIPT>

How to Import Products into Magento

There’s a little confusion among some on how to import products into a Magento ecommerce store. I spent some time today researching and trying to find the best method on doing this. The reason for my research is because there was no simple documentation anywhere that I could find on how to import products. Magento actually has built a pretty robust import/export mechanism into the ecommerce cms that has a ton of flexibility to do many things. I’m not going to cover all of those. This is just for those of you who simply just want to import products into their Magento cart.

Step 1 – Add a new product manually
add a new product manually to the catalog, assign it to a category, and fill out all fields that will be necessary to your store. The obvious ones are price, description, quantity etc. It’s important that you fill out all fields that you know you are going to need for all the products you import.

Step 2 – Export Your Products
Now we want to export your product to a .csv file so that we can view the fields that are required to import. Go to System >> Import/Export >> Profiles. Now click on Export All Products then Run Profile. Click on the “Run Profile in Popup” button. Once the export is completed, go to your var/export directory on your Magento install and you will find the .csv file there for you to download.

Step 3 – Analyze The .CSV File
Now if you look at your .csv export file you will see the field names that you need to match up. Now just start filling yours in and creating your csv file ready for import. This step is extremely important. Otherwise Magento cannot match what you are trying to import and the importing will fail. At a most basic level, here are the fields that I imported:
    •    store
    •    attribute_set
    •    type
    •    sku
    •    category_ids
    •    status
    •    visibility
    •    tax_class_id
    •    weight
    •    price
    •    name
    •    description

Step 4 – Import Your New .CSV File
Now go to System >> Import/Export >> Profiles. Now click on Import All Products. Change “Type” under Data Format to CSV/Tab Seperated. Now click on Upload File, and browse for your .csv file and click “Save and Continue Editing”. Now go to “Run Profile” and select your file from the dropdown menu. Click the button underneath to run the import. And whalllah. All your products should now be imported.