statcounter custom tag for pop-up page - jquery-plugins

Question

i have a list of products in my web page whose details are shown in modal popup.
I tried using the custom tag of statcounter as shown on their site [http://statcounter.com/support/knowledge-base/276/] but it works only for one product category. I am using the same modal body to show different products.
following is the codesnippet :
var sc_project = $##$##;
var sc_invisible = 0;
var sc_security = "$#*$*##$";
var _statcounter = _statcounter || [];
//function to push custom statcounter for products_of_interest
function _productStatCounter(product_of_interest) {
_statcounter.push({ "tags": { "data-project": product_of_interest } });
}
// jquery to push projects based on click
$(".portfolio-link").click(function () {
test_product = ($(this).attr("href"));
if(test_product !== undefined){
product_of_interest = ($(this).attr("data-project"));
_productStatCounter(product_of_interest);
} else {
return;
}
});
I used jquery to push the product_of_interest based on click of the product but statcounter is showing info about only one product not all the products. Since my product web app is a single page so i have used modal-body for showing different products on a popup screen. Is there any way to use statcounter on popups ?

Answer 1

The following worked for me. My window's hash changes when I open a modal and I was able to push the tags to statcounter on hash change.
<script type="text/javascript">
var sc_project = ******;
var sc_invisible = 1;
var sc_click_stat = 2; /*track anchor links*/
var sc_security = '******';
var _statcounter = _statcounter || [];
_statcounter.push({ tags: { page: 'homepage' } }); /*optional*/
window.onhashchange = locationHashChanged;
function locationHashChanged() {
var modalName = window.location.hash;
_statcounter.push({ tags: { project: modalName } });
_statcounter.record_pageview();
}
</script>