How to insert tracking code in prettyPhoto image view (lightbox)?

Question

I know that similar questions have been asked regarding google analytics, but in this case, the tracking code is a bit more complex. I want to append the tracking code to each image viewed via prettyPhoto.

In the prettyPhoto init method I define the changepicturecallback to call a function: myCallbaclFunc:

$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
            animation_speed:'normal',
            theme:'light_square',
            slideshow:3000, 
            autoplay_slideshow: false, 
            show_title: true, 
            overlay_gallery_max: 3000,
            changepicturecallback: myCallbackFunc
            });

then, myCallbackFunc is defined as:

myCallbackFunc = function() {
//append code to social container div
$('.pp_social').append('<div class="netscope"><script type="text/javascript">var WRP_ID=316817;var WRP_SECTION="COMUNIDADE";var WRP_SUBSECTION="Estudos MensHealth";var WRP_SECTION_GRP="316817 - MensHealth";var WRP_SUBSECTION_GRP= WRP_SECTION;var WRP_CONTENT="Home content";var WRP_CHANNEL;var WRP_ACC;wreport_ok=0;</scr'+'ipt><script type="text/javascript" src="http://www.autohoje.com/inc/netscope2.js"></scr'+'ipt><script type="text/javascript">if(wreport_ok==1){ var w_counter = new wreport_counter(WRP_SECTION, WRP_SUBSECTION, WRP_ID, WRP_ACC, WRP_CHANNEL, WRP_SECTION_GRP, WRP_SUBSECTION_GRP);w_counter.add_content(WRP_CONTENT);w_counter.count();}</scr'+'ipt></div>');

}

But all I get as I inspect the generated code is the emtpy div class="netscope"

Is there other method than "append" I should be using? Should I somehow escape the javascript code?

Thanks in advance.

language tag is not really recommended, use `type='text/javascript'` — Dhiraj, Jun 28 '12 at 00:40
It's loading fine here: http://jsfiddle.net/userdude/wzzGA/ You have to look in the `script` tag for the Javascript source. — Jared Farrish, Jun 28 '12 at 00:54
@Jared - If I inspect the result section all I can see is the created div. The append works fine for that. But the javascript code doesn't show inside the div — mjpramos, Jun 28 '12 at 01:00
Your scripts are there; it doesn't matter if they're "in" that `div` or not. Try: http://jsfiddle.net/userdude/wzzGA/1/ You'll see one of the variables you declare prints. Look at the `Script` tab in Firebug and you'll see the scripts are there, they're just now showing in the HTML tab as elements. — Jared Farrish, Jun 28 '12 at 01:08

score 0 · Answer 1 · edited May 23 '17 at 12:12

Can't append <script> element

May be you are in browser that has this issue.

Or it can be the issue by which you dont see it in DOM,

See @Hendra Uzia s answer refering to the issue,

All of jQuery's insertion methods use a domManip function internally to clean/process elements before and after they are inserted into the DOM. One of the things the domManip function does is pull out any script elements about to be inserted and run them through an "evalScript routine" rather than inject them with the rest of the DOM fragment. It inserts the scripts separately, evaluates them, and then removes them from the DOM.

I believe that one of the reasons jQuery does this is to avoid "Permission Denied" errors that can occur in Internet Explorer when inserting scripts under certain circumstances. It also avoids repeatedly inserting/evaluating the same script (which could potentially cause problems) if it is within a containing element that you are inserting and then moving around the DOM.

My understanding of the intricacies of script injection is pretty limited, so if you'd like to discuss it further, maybe you could post a topic on the jQuery forum.

How to insert tracking code in prettyPhoto image view (lightbox)?

1 Answers1