Add Google AdWords Dynamic Remarketing Code to Magento CMS & Home Pages

In a previous tutorial, we looked at how to add Google AdWords Dynamic Remarketing code to Magento’s product pages. That gets us some of the way there, and you can start remarketing with just that bit of code on your site (verified working on a live Magento Enterprise website).

Integrate Google Dynamic Remarketing in Magento

However, there are a lot more pages we can tag with the remarketing code, including the home pages, category and subcategory pages and listings, and CMS pages. We’ll take a look at the home page and static CMS pages in this tutorial, and tackle category pages in future one.

The reason we do the home page and CMS pages at the same time is that Google has a separate pagetype for each of these pages. If you add the CMS code to your Magento home page, though, you won’t have the correct pagetype. And if you add the home page code just on that page, you’ll need to remove the CMS page code to prevent having both tags on the home page.

Let’s tackle the CMS pages first, since they are remarkably similar to the product pages.

Creating or Adding to the local.xml File

First, navigate to your magentoroot/app/design/frontend/base/default/layout/ directory, and open the local.xml file located there. If you don’t have one, you’ll need to create one, and if you’re using a different package/theme, navigate to the correct folder rather than base/default as I did here.

In that local.xml file, we’re going to add the following code to it:

<?xml version="1.0" encoding="UTF-8"?>
<!-- other code -->
<layout>
<!-- other layout code -->
	<cms_page>
		<reference name="before_body_end">
			<block type="core/template" name="trafficmotion.remarketingCms">
				<action method="setTemplate">
					<template>trafficmotion/remarketing/cms.phtml</template>
				</action>
			</block>
		</reference>
	</cms_page>
</layout>

Easy enough, right? Now, we have to get the proper directory so that Magento knows what file to pull from where, and put the right code in that file.

Directory Structure for AdWords Dynamic Remarketing Code Layout

Here are the folders that we need to navigate to if you’ve read my previous AdWords Remarketing on Magento tutorial, or create them if they don’t yet exist.

  • magentoroot/app/design/frontend/base/default/template/trafficmotion/
  • magentoroot/app/design/frontend/base/default/template/trafficmotion/remarketing/

Next, we’ll get the actual code for the CMS pages. Magento is looking for the block to insert before the closing <body> tag, so let’s give it what it wants.

Creating the cms.phtml File

Since we don’t need to call any paramaters like the SKU or total value on the CMS pages, we don’t need any fancy PHP code. Plain old HTML will do just fine, though we still need to name our file with the PHTML extension. Create cms.phtml and add the following code to it:

<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '',
ecomm_pagetype: 'siteview',
ecomm_totalvalue: '',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</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="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing Tag -->

Remember to use the actual code that Google gives you for your site. Your conversion ID probably isn’t XXXXX. Also remember to set the ecomm_pagetype to ‘siteview’ so AdWords knows what pagetype these are.

Wrapping Up Dynamic Remarketing Integration for CMS Pages

That’s all there is to adding the remarketing tag to your CMS pages. The only problem is, the code now appears on the homepage, as well as all other CMS pages. We’ll look at getting rid of it on the homepage next, as well as inserting the correct code. But here’s how the code will look on the actual pages of your Magento store:

<p class="bugs">Help Us to Keep Magento Healthy - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong>Report All Bugs</strong></a> (ver. 1.8.1.0)</p>
        <address>&copy; 2013 Magento Demo Store. All Rights Reserved.</address>
    </div>
</div>
                
<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '',
ecomm_pagetype: 'siteview',
ecomm_totalvalue: '',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</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="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing Tag -->
    </div>
</div>
</body>
</html>

Removing the CMS Remarketing Code from the Homepage

We’re going to go back to the local.xml file we used up above, located at magentoroot/app/design/frontend/base/default/layout/local.xml and add the following code to that file:

<?xml version="1.0" encoding="UTF-8"?>
<!-- other code  -->
<layout>
<!-- other layout code -->
	<cms_index_index>
		<reference name="before_body_end">
			<remove name="trafficmotion.remarketingCms" />
		</reference>
	</cms_index_index>

That gets rid of the remarketingCms block on the homepage, so now we’re free to add the correct code. We could do another local.xml layout update, but since we’re adding a block just to one page, we can more easily do this in the backend of Magento with a static block and a layout XML update to the homepage.

Creating the Static Block

Login to the admin area of your store, and navigate to CMS > Static Blocks and click +Add New Block in the upper right corner of the page. Let’s give it a Block Title of Google Remarketing Code – Homepage, an Identifier of google-remarketing-home, and choose your appropriate Store View. Enable the block and put the following code in the Content section:

<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '',
ecomm_pagetype: 'home',
ecomm_totalvalue: '',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</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="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing Tag -->

Now, all we have to do is add that block to the before_body_end section of our homepage. Navigate to CMS > Pages > Manage Content and look for the page with the URL key of “home” and open that page.

In the Design tab, we’re going to add some XML code, and then we’ll be all done. Here’s what we need to add to that page.

<reference name="before_body_end">
<block type="cms/block" name="google_remarketing">
    <action method="setBlockId"><block_id>google-remarketing-home</block_id></action> 
</block>
</reference>

Wrapping Up Dynamic Remarketing Integration for the Homepage

Whew! We’re all done here. Take a look at the Page Source on the homepage, and you’ll see the correct dynamic remarketing code, without the extra reference to the CMS page remarketing code. Here’s what it looks like after we’re finished:

<p class="bugs">Help Us to Keep Magento Healthy - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong>Report All Bugs</strong></a> (ver. 1.8.1.0)</p>
        <address>&copy; 2013 Magento Demo Store. All Rights Reserved.</address>
    </div>
</div>
                
<!-- Begin Google Code for Remarketing Tag -->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: '',
ecomm_pagetype: 'home',
ecomm_totalvalue: '',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</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="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
<!-- End Google Code for Remarketing Tag -->
    </div>
</div>
</body>
</html>

That was one of our longest Magento tutorials yet, but was an important one for getting the AdWords Dynamic Remarketing code to display correctly on our static pages and our homepage. In our next tutorial, we’ll look at adding the code to the category view pages.

Magento Google AdWords Dynamic Remarketing Tutorials

2 thoughts on “Add Google AdWords Dynamic Remarketing Code to Magento CMS & Home Pages”

  1. Nick,

    Thank you for this great series of magento remarketing tips.

    I’d like to add tracking to my cart, checkout, and success pages. I assume it would just be a matter of changing the ecom_pagetype for each of these, but I’m not sure if these pages are considered CMS or what.

    Any help would be much appreciated.

    1. Hi Steve,

      The implementation on the cart/checkout/success pages is a little more involved. I might do a tutorial on it in the future, but I’d also be wary of providing do-it-yourself code for pages as important as the cart and checkout process. It might be something worth paying a developer for, as the remarketing code will need to calculate the total value of the transaction to ensure proper tracking. If you have any/many customizations or extensions for the cart/checkout pages, the implementation might need to be done differently.

      Thankfully, doing it on the product/CMS/home/category pages are all easy enough and relatively far safer to implement.

      Also, yes, you’ll need to change the ecomm_pagetype for the cart/checkout/success pages, based on Google’s remarketing specifications.

Leave a Reply

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