Add Adwords tracking code to order confirmation page in Magento

Featured Image

Adding an Adwords tracking code to order confirmation page in Magento is relatively easy task. One that can be handled under an hour or so if you choose to implement it the proper way. Here is how.

  • Modify the “app/design/frontend/default/my_custom_theme/layout/checkout.xml” file. Look for section
        <checkout_onepage_success>
            <reference name="root">
                <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            </reference>
            <reference name="content">
                <block name="checkout.success" template="checkout/success.phtml" type="checkout/onepage_success" />
            </reference>
        </checkout_onepage_success>
  • And turn it into
        <checkout_onepage_success>
            <reference name="root">
                <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            </reference>
            <reference name="content">
                <block name="checkout.success" template="checkout/success.phtml" type="checkout/onepage_success" />
            </reference>
            <reference name="before_body_end">
                <block name="google_adwords_tracking" template="checkout/google_adwords_tracking.phtml" type="core/template" />
            </reference>        
        </checkout_onepage_success>
  • Create the “app/design/frontend/default/my_custom_theme/template/checkout/google_adwords_tracking.phtml” file and copy-paste the the Adwords tracking JavaScript code into it.

This code relies on

< ?php echo $this?>getChildHtml('before_body_end') ?>

block call from footer of each template (1column.phtml, 2columns-left.phtml, 2columns-right.phtml, 3columns.phtml). So, as long if haven’t removed this block call from mentioned templates, the above should work.

Thats it.


13 comments

  1. Wondering why we should have this stuff “Modify the “app/design/frontend/default/my_custom_theme/layout/checkout.xml” file.” when it could be done in local.xml and thus there is no need to have a local theme copy of checkout.xml

    1. @Milen Petrov -No specific reason. As a matter of fact, this is more fit to be in local.xml 🙂 I was merely referencing it in my example project. Thanks for noticing and pointing it out.

  2. hi I want to put a custom external tracking link on the customers page so they can track their order. Any help as to what page to add the code to? I’ve been looking for a couple hours already and con’t seem to find it.

  3. Hello all,
    I have made a payment extension and that will create a pdf after the successful checkout. for that i want to put a link in the success page so the user can download the pdf from there. how coukld i make this happen from my module itself please help …….

  4. Great, was looking for a way to implement the new asynchronous tracking code of Google analytics in the header. Is quite easy to do now, much appreciated!

  5. Sorry, here my Layout code….

    <?xml version="1.0"?>
    <layout version="0.1.0">
    <default>
    </default>

    <checkout_onepage_success>
    <reference name="root">
    <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
    </reference>
    <reference name="content" before="-">
    <action method="unsetChild"><name>checkout.success</name></action>
    <block name="checkout.success" template="safetypay/confirmation.phtml" type="safetypay/confirmation" />
    </reference>
    </checkout_onepage_success>
    </layout>

  6. Hi Branko,

    Excellent article…

    One Question:
    *************************
    If you wish to include more data in the template success.phtml.
    What labels should I use?

    *** I try to make something like this:
    http://pikchurimages.s3.amazonaws.com/pic_KYQ_l.jpg

    You see, i need to combine both data: existing and custom (show only if is used my extension: a payment method).

    This is my layout file:

    page/2columns-right.phtml

    checkout.success

    ** This layout fail, replace completely the Success page. Only display when my payment method is selected. Currently showing all types of payment… 😛

    ** The “safetypay/confirmation.phtml” template, is responsible for recover all the information of the Success page (include information for default).

    Thanks friends! Wait yours comments!

  7. i m Working with adwords for last 5 Year and finally i have made a masterpiece which contains all the solution about Adwords Soo Do me Feedback soo i can make it Better for you people to understand

  8. Hey,

    Do you knw how to generate below values on Magento confirmation page.

    For each purchased item…..iterate below values
    ……..getProductID()
    ………getProductPrice()
    ……..getQuantity()
    Next Item in cart

  9. I would recommend rendering the tracking code in the page content rather then at body end.. It also is a requirement by Google AdWords that it be visible.

    All themes (except iphone) include getChildHtml() ?> in success.phtml, so your child html blocks will be rendered in the page content.

    so your checkout.xml file would be

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.