[SOLVED] adding javascript to product pages

[freakhouse]

Is there a way to add a different bit of javascript code to each product page? In order to use google's dynamic remarketing code you have to do this.  The old remarketing code you could just put in the footer file, but this is different because it's more targeted.

 

Any help would be appreciated.

[vekia]

you can do it in product editor page, just paste code there.

 

but before you will do this, you must extend tinymce editor features and change validation function, everything is described here: full featured tinymce with java scripts on product edit page

[freakhouse]

This worked, Big Thanks!

[moz]

hi,

 

ok i had the same question ! So i did change the editor, but now, how can i manage to copy and paste my Js snippet for remarketing tag ? I have opened a product form page, but can"t manage with it . 

 

Edit : In fact i managed a little bit :

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

But don't know how to integrate it to past the value from prestashop product page to this snippet..

Tks for your help..

Edited October 14, 2013 by moz (see edit history)

[freakhouse]

Hey moz- on the description section look on the far left below the scissors icon. There is an icon on the 3rd row to edit html source. paste your remarketing code below whatever description html coding is there.

[freakhouse]

if you need help with the replace with value stuff, let me know. I had to call in to google to figure that one out.

[moz]

hi,

 

Yes ! i found it..Thanks a lot  freakhouse! but my problem, maybe yours,  is that the tinyeditor  is adding some  additonal code such as  <![CDATA[ tag.. .

<script type="text/javascript">// <![CDATA[
var google_tag_params = {
ecomm_prodid: 'REPLACE_WITH_VALUE', 
ecomm_pagetype: 'REPLACE_WITH_VALUE',
ecomm_totalvalue: 'REPLACE_WITH_VALUE'
};
// ]]></script>
<script type="text/javascript">// <![CDATA[
var google_conversion_id = 998xxxxxx;
var google_conversion_label = "EdbQCIyo3gUQxxxxxxxxx";
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">// <![CDATA[

// ]]></script>
<noscript>&amp;amp;lt;div style="display:inline;"&amp;amp;gt; &amp;amp;lt;img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/998xxxxxxx/?value=0&amp;amp;amp;amp;label=EdbQCIxxxxxwM&amp;amp;amp;amp;guid=ON&amp;amp;amp;amp;script=0"/&amp;amp;gt; &amp;amp;lt;/div&amp;amp;gt;</noscript>

By the way, do i have to populate the product values  for each page ?    There is without any doubt a way to get it populate automatically ? isn't it ? 

Edited October 14, 2013 by moz (see edit history)

[freakhouse]

There is some extra code being added but it doesn't seem to make any difference.  You can test your tag in Google Chrome with the Google Tag Assistant. Do a search for that on google and install it in Chrome. It will show you if your code is working correctly on your page.

 

As far as adding the code on each page, it appears you are using the dynamic remarketing. That's what I'm doing. As opposed to just remarketing. With the dynamic you do have to add it to each page with the values replaced. id is your google product id. The type would be New if it's a new product. The value is entered for example '$99.95' All using the single quotes.

With the plain remarketing code it could be added to just the footer.tpl file for example. That is different coding though I believe.

Edited October 14, 2013 by freakhouse (see edit history)

[freakhouse]

Turns out I was wrong about the added code not making a difference. Apparently google doesn't like this.  For example it starts adding  // <![CDATA[   

 

Google has an article where they say a lot of WYSIWYG editors do this. Any ideas on how to remove the extra coding that prestashop adds?

[moz]

Hi Freakhouse,

 

I think that you have to bypass the tinymce editor ,  the the front end etc...Maybe through the productpage.tpl file directly ? I try to find a solution my side and keep you informed.

Edited October 15, 2013 by moz (see edit history)

[freakhouse]

Moz- I realized after I wrote that last post that google only updates their remarketing page once a day, so my coding may have not been seen yet by google. Their page and its analysis was why i thought the extra code mattered. That and they have an article that states it must be exact. That article may be outdated. When I test it with the Chrome tag analyzer it says its fine and shows no errors. So getting rid of the extra coding may not be an issue after all. I will let you know when I find out for sure.

Edited October 15, 2013 by freakhouse (see edit history)

[vekia]

you don't have to worry about cdata

 

 

A CDATA section is required if you need your document to parse as XML (e.g. when an XHTML page is interpreted as XML) and you want to be able to write literal i<10 and a && b instead of i<10and a && b, as XHTML will parse the JavaScript code as parsed character data as opposed to character data by default. This is not an issue with scripts that are stored in external source files, but for any inline JavaScript in XHTML you will probably want to use a CDATA section.

Note that many XHTML pages were never intended to be parsed as XML in which case this will not be an issue.

[moz]

Many thanks Freakhouse and vekia 

 

I need also to wait for a while..but i wonder regarding the method of implementing dynamic retargeting ..hardcoding or through tag manager or else ..

 

1/ The additional code on top of the google tag params have to be located just before the main core google snippet one let's saying like that. Ok if you handcode manually.

 

2/ But if you use the tag manager google platform, you have to also insert the google tag params named datalayer before the main code . The problem is that the container (which is inserted manually in the hearder.tpl file (template)) is just located at the beginning of the <body> tag, and if you proceed as you and i did (tagging just the google tag params addtional snippet in product page with wysiwyg editor) , you  always find it after the container tag, so it's impossible to manage ! 

 

3/ I can't find any way around the 2 above methods, as ready made modules seems to be quite rare for inserting external code in prestashop pages.

Edited October 15, 2013 by moz (see edit history)

[freakhouse]

you don't have to worry about cdata

Vekia-

Currently my google account says my pages are missing custom parameters.   These parameters are on my pages, so google's spiders are not seeing them. Is there a way to get around prestashop adding this code? In order to troubleshoot this I need be able to add the exact code google gave me and not have it modified.

[vekia]

you can try to add it manually in header.tpl file with {literal}YOUR_CODE_HERE{/literal} tags

[freakhouse]

I have different code on each product page. For example, on product #1 page, the code is something like prod_id=1, product #2 page the code is prod_id=2, etc.   The header.tpl file would change it on every page to the same thing, right? That wouldn't solve my problem.

[freakhouse]

I tried using the literal tags in my product description. They don't do anything. The CDATA coding is still generated and my variables are made useless. Got any more ideas?

Edited October 17, 2013 by freakhouse (see edit history)

[moz]

Freakhouse,

 

It's always the same problem when inserting external scripts for pushing variables (productId etc..) to external server (here google analytics ones)

 

You have to develop an  intermediary logic  php code which set the prestashop variables for populating  them automatically to the javascript google analytics 

 

Modifying the tpl is useful for still code, not for dynamic one..

 

That's the main use of modules ! But i can't find any for that purpose...

Edited October 17, 2013 by moz (see edit history)

[moz]

Freakhouse,

 

Depends on your objectives, if you want, i can help you finding the right developper to handle properly this matter.

[vekia]

and what about {Tools::getValue('product_id')} or some if conditions etc. ? i think that in this case modification of php logic isn't necessary.

[freakhouse]

Vekia-

I feel like my question got missed. The CDATA is basically remarking out the google code I've inserted.

Surely there has to be a way to get around this?

 

For example:

 

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

 

gets turned into this by Prestashop:

 

<script type="text/javascript">// <![CDATA[
var google_tag_params = {
ecomm_prodid: 'RLMUS8',
ecomm_pagetype: 'New',
ecomm_totalvalue: '88.00',
};
// ]]></script>

 

So, anything between   // <![CDATA[     and    // ]]>    is basically invisible to a spider.

Edited October 17, 2013 by freakhouse (see edit history)

[moz]

hi vekia,

 

For newbies, Could you please go further deep in your explanation..and give us the context of your idea of {Tools::getValue('product_id')}  ..

Many tks in advance

[vekia]

before i will start please let me know what exactly you want achieve and what code you want to use, and where you want to use product ID number

[freakhouse]

Vekia- did you see my question above about the CDATA making the google java code not work?

[vekia]

ohh but i don't know what's going on here. a little chaotic conversation.
 
let's clarify.
 
freakhouse
You pasting this code to product page editor (for example to description field)
then tinymce changing it automatically with CDATA.
now you think that this code doesnt work because of this, right?
you want to remove CDATA tags from code.
am i right?
 
 
moz
and you, what you exactly expect?

[freakhouse]

Vekia- yes, that is want I want to do.

[vekia]

so in your case it will be a bit hard to remove these code mainly because tinymce editor add CDATA automatically.

here is a little workaround.

 

open product.tpl

search for $product->description

and change it to: {$product->description|replace:'// <![CDATA[':''|replace:'// ]]>':''}

[freakhouse]

Vekia-

I don't understand. I looked in product.tpl   There are many instances of the phrase $product->description   which one am I replacing?

[vekia]

ok, so my question now is:

 

where you inserted google code?

 

to short description? or to normal description?

[freakhouse]

Vekia- normal (long) description.

[vekia]

so you have to change it here:

	{if isset($product) && $product->description}
		<!-- full description -->
		<div id="idTab1" class="rte">{$product->description}</div>
	{/if}

by default it's near 504 line in product.tpl file

[freakhouse]

Hi Vekia-

I am not seeing those exact lines in my file product.tpl file

The forum won't let me attach that kind of file. Could I email it to you and you modify it for me? It would probably be a lot quicker than trying to explain it to me    Maybe you could PM your email? 

 

 

[vekia]

it will be much easier and also helpful for other merchants (or devs) here if oyu will share it on http://pastebin.com/

[freakhouse]

Vekia- Cool site. Here you go:

http://pastebin.com/bnL2iBae

[moz]

Hi Vekia, 

 

Look for a way to insert a portion of script (remarketing tag)  to retrieve variables from the above many times mentioned product page

I 'am a bit lost i'm afraid, try to find my way out with a bit of help from a developper (not very available for now) . As soon as i manage , i 'll keep informed the forum.

 

Hi Freakhouse,

 

So did you succeed in pushing dynamically those variables to adwords ?

[vekia]

Vekia- Cool site. Here you go:

http://pastebin.com/bnL2iBae

here it is:

{if $product->description}
<section class="page_product_box toggle_frame more_info_inner">
        <h3 class="toggle">{l s='More info'}<i class="icon-toggle icon-minus-sign-alt"></i></h3>
                {if isset($product) && $product->description}
                        <div class="toggle_content">
                                {$product->description}
                </div>
                {/if}
</section>  
{/if}

[freakhouse]

Hi Vekia-

 

so every where in that code you just posted that it says $product->description I should replace with the code you gave me before:

 

{$product->description|replace:'// <![CDATA[':''|replace:'// ]]>':''}

 

is that right?

[vekia]

that's correct

[freakhouse]

tried it out- it's still adding the extra CDATA code in.

[vekia]

you've got force compile turned on?

[freakhouse]

don't know - where is that?

[freakhouse]

I found it and turned it on, that didn't fix the problem.

[freakhouse]

I looked at the source code for one of my pages. It is showing correctly there, but not on my editing page which is why I didn't see it before. That should be good enough. Thanks Vekia!

[vekia]

so cdata disappears ?

[freakhouse]

Vekia-

Yes it does. Thanks again.

[freakhouse]

Vekia- Google spiders visited my page and didn't see their code. I look at it more closely and realized your coding is removing some of their code as well. I'm pasting their code below. Your code removes their CDATA as well as the stuff that prestashop generates. RLMUS13, Product, 88.00 are values for my specific product page. These are the only things that are different between each page I use this on.

 

<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 'RLMUS13',
ecomm_pagetype: 'Product',
ecomm_totalvalue: '88.00',
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1069103396;
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/1069103396/?value=0&guid=ON&script=0"/>
</div>
</noscript>
 

[freakhouse]

Would getting HTML box pro solve this issue?

[vekia]

so code provided by google has got cdata tags, so we can't remove it!

where i can verify this code? how you checking if code is valid for google or not?

i will test it in html box pro, it should work, but before i need to check it to be 100% sure

[freakhouse]

In my Google Adwords account it is saying it doesn't see any tags now on any of my pages. Specifically, where I am getting this limited info is in their Remarketing section. That is what this code is for: remarketing.  I have tested with Chrome's Tag Assistant and it said it was ok even before I added your coding, so I wouldn't use that as a point of reference. I have asked Google and they have never given me an answer. It seems that you have to include their code exactly as they give it to you.

 

Vekia,  If you want to log in to my google adwords account and see what I am seeing, PM me and I will give you the login details.

 

According to the remarketing section in my Google adwords account, before I added your code it was seeing the tags, but not the section with the "user variables". In other words my product id, product type, and value that I mentioned in a previous post.  There is also a time lag, where you have to wait at least 24 hours for them to update this section. I  waited a couple days and that's when I realized google wasn't seeing the tags.

 

 

Here is a page I have the code on for example:

http://redlinemusicgear.com/guitar-and-bass-pedals/68-little-dual-sgos-4260142210019.html

[freakhouse]

Vekia- did you see my last post?

[vekia]

yes i saw it,

i checked your website and i see this code there, 

i don't know why google doesn't accept it

[freakhouse]

I just got off the phone with google. Their support team has pretty limited information about this "dynamic remarketing" code. They told me the code was ok, but I need to put code on every page of my site for it all to work correctly.  I am going to do this and I will let you know. Their system is really slow to update and check as well. It sees the product codes now, but not the page type and prices. Also, they said some browsers won't see the code the way it is, but most will.

[Mackens]

Hi, is your discussion about adding this code to each prestashop page ?

https://developers.google.com/tag-manager/quickstart

[moz]

Hi,

 

I found the solution, in fact, you can use the footer template  product page (footer.tpl)  to insert your snippet for adwords remarketiing :

 

here : https://www.fr.adwords-community.com/t5/Configuration-et-principes-de/Balises-remarketing-pour-Prestashop/m-p/27434/highlight/true#M2886 

 

But the problem is that maybe the script will slow down the loading time of the page..

 

@freakhouse : how did you manage finally , with which kind of coding ?

[ms99]

Can be changed in the product page, the process moves to the next page so that instead of Javascript loaded the next page on the new?

[vijaykryadav24]

Hi vekia,

 

 

How to add external Js to  product_list.tpl ?

 

product_list.tpl file is located at themes/default-bootstrap/

 

ProductController.php file is locatied at  override/classes/controller/

 

eko-image-rollover.js file located at   \themes\default-bootstrap\js

 

I tried this one ,but its not working for me

 

prestashop version 1.6

 

class ProductController extends ProductControllerCore {

{

    public function setMedia()

    {

        parent::setMedia(); // CSS files

        Tools::addJS(_THEME_JS_DIR_.'eko-image-rollover.js');

    }

}

 

Thanks

Edited May 22, 2015 by vijaykryadav24 (see edit history)

[robyroy]

quoto... version1.6

[Joey]

For PS1.7.3 version, do I still need turn on the "extend tinymce editor features" for insert the "google's dynamic remarketing code"?

Or just paste the code to product summary / description / embed code in the product page as I want insert one google tags js snippet code in one target product, not for all products. Thanks!

 

code look like below:

<!-- 
Start of global snippet: Please do not remove
Place this snippet between the <head> and </head> tags on every page of your site.
-->
<!-- Global site tag (gtag.js) - DoubleClick -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-xxxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'XX-xxxxxx');
</script>
<!-- End of global snippet: Please do not remove -->