PDA

View Full Version : Dynamic Remarketing



Ben
06-25-2013, 01:49 AM
Google released their dynamic remarketing ads yesterday, they look very cool.
It lets you show ads on display network showing individual products that people have browsed on your site.
There's some very clever automatic bid adjustment based on product values and it dynamically adjusts which products get shown to individual users based on click through rates and conversion rates for individual products.

To do it you need a merchant centre feed and to ad some new code to your site. This is where I'm struggling.
I need to pass product ID, product price and page type, so I'm hoping one of our resident javascript Ninjas will be able to fill in the blanks on this code snippet:

<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 'REPLACE_WITH_VALUE',
ecomm_pagetype: 'REPLACE_WITH_VALUE',
ecomm_totalvalue: 'REPLACE_WITH_VALUE'
};
</script>

There's more information here:

https://support.google.com/adwords/answer/3103357

Any help on this would be very much appreciated, if one of you guys can help with the code I'll write a guide to doing the rest of the set up so that all of us can use these new ads.

PaulH
06-25-2013, 03:11 AM
Hi Ben,
I can't help with the code, I have emailed Volusion support today to ask them what I need to pass, so I will let you know what they say if anything.
I did find this article though talking about the impact of the remarketing code on analytics tracking which may be useful if you are looking to implement remarketing.
http://www.blastam.com/blog/index.php/2013/04/google-analytics-remarketing-tag-concerns-solved/

Ben
06-25-2013, 05:39 AM
So I've made a bit of progress;
I can call the product code using the global_Current_ProductCode variable.
I tested it with this:

$(function() {
alert(global_Current_ProductCode);
})

I can identify whether a page is a product page or not with this:

if(typeof global_Current_ProductCode === 'undefined'){
alert("This is not a product");
};

And I can extract the price with this although it still includes the currency symbol which I'll need to remove:
$(function() {
var price= $('span[itemprop="price"]').html();
alert(price);
})

I don't know how to assign the values to the array in the Google code though.

Ben
06-25-2013, 09:21 AM
Hi Ben,
I can't help with the code, I have emailed Volusion support today to ask them what I need to pass, so I will let you know what they say if anything.
I did find this article though talking about the impact of the remarketing code on analytics tracking which may be useful if you are looking to implement remarketing.
http://www.blastam.com/blog/index.php/2013/04/google-analytics-remarketing-tag-concerns-solved/

Thanks Paul,
If I can get remarketing working using this code instead of by changing the analytics code I should get the best of both worlds; the clean analytics code and the ability to use remarketing where people don't have adblocking enabled.

Ben
06-25-2013, 09:30 AM
Made a bit more progress, need to do a bit more tinkering to get it finished, any help or suggestions much appreciated.

<script type="text/javascript">
var pagetype = "category"
if(typeof global_Current_ProductCode != 'undefined'){
var pagetype = "product"
};

var totalvalue= $('span[itemprop="price"]').html().replace('', '');

var google_tag_params = {
ecomm_prodid:global_Current_ProductCode,
ecomm_pagetype:pagetype ,
ecomm_totalvalue:totalvalue
};

</script>


<script type="text/javascript">
$(function() {


alert(google_tag_params.ecomm_pagetype)
})

</script>

PaulH
06-26-2013, 12:55 AM
Hi,
I have heard back from Volusion, but it isn't really much help.
They said


Thank you for choosing Volusion. I understand you need some help setting up your Google Dynamic Remarketing. Let me look into this for you.

Let's start with this:

ecomm_prodid: 'REPLACE_WITH_VALUE',
ecomm_pagetype: 'REPLACE_WITH_VALUE',
ecomm_totalvalue: 'REPLACE_WITH_VALUE',

These three sections need to be populated with the products, pages, and values that you particularly want to promote. Unfortunately these need to be hardcoded in order to be utilized. If you are comfortable with Java, you can build some code that defines these parameters. If not, Google offers a service to do this called Google Tag Manager located here:

http://www.google.com/tagmanager

This will allow you to build tags with specific rules that can be used to populate these fields.

Ben
06-27-2013, 01:08 AM
Thanks Paul, I looked at doing this with Tag Manager and to be honest I think it's going to be more complex than just coding the JS manually. I'm making progress though; my script now sets the variables depending on page type, it extracts product values on product pages and the cart page and it extracts the product id on product pages.

Next, I need a way of extracting product id from the cart page, and a way to extract the product ids and total order value from the order complete page.

PaulH
06-27-2013, 01:42 AM
Hi Ben,
I am not sure if this is of any help, but we use this code (added to article 130 in volusion) to track the products ordered in GA.
http://traffikco.com/add-ecommerce-and-google-analytics-tracking-to-your-volusion-site/

Ben
06-27-2013, 09:39 AM
Thanks, I already have a very similar piece of code on my site, the ROI tracking script on the order complete page makes the tracking for that page relatively simple.
The part that I'm struggling with is getting an array holding the product codes of any items in the shopping cart page, getting there, just slowly.

ritchey
06-27-2013, 11:13 AM
It's a pleasant surprise that Volusion responded to you, instead of saying this is not supported at this time.

Ben
06-30-2013, 12:14 PM
I'm almost there with this now, should have it all working in a day or two.

Gave myself a crash course in javascript and jQuery so my code sure ain't pretty, all I have left to do is write something to extract a list of SKUs from category and search pages.

GentleBath
08-26-2013, 08:32 PM
Did you ever get it done? I would be interested in it.

Ben
08-27-2013, 05:20 AM
Hi Guys,
Been away for a while, I got very close to having this working but other things took priority. My code - such as it is - is below. Feel free to take it to bits and use it however you want.

You'll want this chrome plugin to test it:

https://chrome.google.com/webstore/detail/adwords-remarketing-tag-v/iokkmdmobnhjmhbapieilipodaaeohol

I'll keep working on this when I get chance, so if you manage to get it working or if you have any suggestions I'd be really grateful if you could add comments and code to this thread.

The code below uses jQuery and should be called from the footer, it's not pretty and I dare say it's remarkably inefficient but hopefully it's a good start.


//sets default values
var pagetype = "'other'"
var googleprice = "''";
var googleprodid ='';

//gets current URL
var pathname = window.location.pathname;

//If home page
if($("#div_articleid_2").length > 0){
var pagetype = "'home'";
var googleprice = "''";
var googleprodid ="''";
};

//If product page
if(pathname.indexOf('-p/') > -1){
var pagetype = "'product'";
var googleprice = $('span[itemprop="price"]').html().replace(/[^\d.,]+/,'');
var googleprodid = global_Current_ProductCode;
};


//If category page
if(pathname.indexOf('-s/') > -1){
var pagetype = "'category'";
var googleprice = "''";
var catquantity = $('.colors_productname').length;

for (var i=0; i < catquantity; i++) {

var link = $('a.colors_productname').eq(i).attr('href');
var substr = link.split('.htm');
var pcode = substr[0].split('-p/');
var googleprodid = googleprodid + "'" + pcode[1] + "'" + ",";
};

googleprodid = "[" + googleprodid.slice(0, -1) + "]";
};

//If Cart Page
if(pathname.indexOf('ShoppingCart') > -1){
var pagetype = "'cart'";
var googleprice = $(".pricecolor.colors_productprice b").html().replace(/[^0-9.]/g, '');

var cartquantity = $('a .cart-item-name').length;

for (var i=0; i < cartquantity; i++) {

var link = $('a.cart-item-name').eq(i).attr('href');
var substr = link.split('&');
var pcode = substr[0].split('=');
var googleprodid = googleprodid + "'" + pcode[1] + "'" + ",";
};

googleprodid = "[" + googleprodid.slice(0, -1) + "]";

};

//If Checkout Page
if(pathname.indexOf('one-page-checkout') > -1){
var pagetype = "'cart'";
var googleprice = $("#TotalsTotalTD").html().replace(/[^\d.,]+/,'');
var googleprodid ="''";//TO DO
};

//If Order Complete
if(pathname.indexOf('OrderFinished') > -1){
var pagetype = "'purchase'";
var googleprice = Order[2];
for (var i=0; i < OrderDetails.length; i++) {
googleprodid = googleprodid + OrderDetails[i][2] +",";
}
googleprodid = googleprodid.slice(0, -1);
googleprodid = "'" + googleprodid + "'";
};

var google_tag_params = {
ecomm_prodid: googleprodid,
ecomm_pagetype: pagetype,
ecomm_totalvalue: googleprice
};

Ben
09-03-2013, 01:49 AM
Just a quick update; the code above seems to work.

If you put it in script tags or it own file then immediately afterwards put the standard google code replacing the XXXXXX with your converison ID it should work:

<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/XXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

I've had this code live on my site for a couple of days and the remarketing campaigns are receiving impressions and driving clicks.

Too early to say much about conversion rate yet.

JamesMac
09-22-2013, 09:35 PM
Just a quick update; the code above seems to work.

If you put it in script tags or it own file then immediately afterwards put the standard google code replacing the XXXXXX with your converison ID it should work:

<script type="text/javascript">


Do you use the JS code from above as the script tags or just a simple <script>?

I can't get it to pass the values dynamically -- Do I need to put the code on more than just the template_XX.html page in Volusion?

p.s. You're right about Tag Manager. That's a nightmare of complications to get set up correctly.....

demitrius
09-26-2013, 07:18 AM
//If home page
if($("#div_articleid_2").length > 0){
var pagetype = "'home'";
var googleprice = "''";
var googleprodid ="''";
};

Do not use this tag. This only appears if you are logged in as admin. Customers do not see this.

PDecor
06-05-2014, 05:33 PM
Do you use the JS code from above as the script tags or just a simple <script>?

I can't get it to pass the values dynamically -- Do I need to put the code on more than just the template_XX.html page in Volusion?

p.s. You're right about Tag Manager. That's a nightmare of complications to get set up correctly.....

_______________________________

After considerable time with Google, here is what we have for the dynamic remarketing (you will need to put in your own ID where you see XXXXXXXXXX conversion ID and again just below that. Also, another snippet needs to be added to both the Shopping Cart page and the One Page Checkout page. Let me know if you need them. Also, look for weird spaces in the code below and remove them. Not sure why they appeared when I uploaded this:

<!-- in default template before closing body tag -->

<script type="text/javascript" >
if(window.location.pathname == '/')
{
var google_tag_params = {
ecomm_pagetype: 'home'
};
}
if(document.getElementsByClassName('results_per_pa ge_select')[0] != undefined)
{
var google_tag_params = {
ecomm_pagetype: 'category'
};
}

if(document.getElementsByClassName('vCSS_input_add tocart')[0] != undefined)
{
var id = new Array();
var price = new Array();
id.push(document.getElementsByClassName('product_c ode')[0].innerHTML)
if(document.getElementsByClassName('product_produc tprice')[0].getElementsByTagName('span')[1] != undefined)
{
price.push(document.getElementsByClassName('produc t_productprice')[0].getElementsByTagName('span')[1].innerHTML.replace("$","").replace(",",""));
}
else
{
price.push(document.getElementsByClassName('produc t_saleprice')[0].getElementsByTagName('span')[1].innerHTML.replace("$","").replace(",",""));
}
var google_tag_params = {
ecomm_prodid: id,
ecomm_pagetype: 'product',
ecomm_totalvalue: price
};
}
</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/XXXXXXXXX/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

demitrius
06-05-2014, 06:57 PM
getElementsByClassName only works on IE9+.

This may not be a big deal if you don't care for targeting older browsers, however. But worth considering.

bennyblanco
06-25-2014, 08:04 PM
Hi PDecor - thanks for posting that! Would you be able to post the snippets for the Shopping Cart page and the One Page Checkout page ?

Thank you!