CQ_Analytics.record on component onload
I am following below instruction [1] how to submit an event after page loads.
My use case is to record an image ad impression so what i did is to attach the triggering of event on image onload. I created a component called adbanner and it has below JS code on each instance. Each adbanner component is wrapped in a div with a given unique id.
<div id="cq-ad_fVV75"><img title="Must Know" alt="Must Know" class="img-responsive center-block" src="/content/mysite/en/home/_jcr_content/section3ad2/adbanner.img.jpg/1429087979100.jpg"/></div>
$("#cq-ad_fVV75 img").load(function(){
console.log("ad loaded cq-ad_fVV75");
CQ_Analytics.record({
event: "adImpression",
values: {adName: "ad_300_100_must_know" },
collect: false,
options: { obj: this },
componentPath: "mysite/components/content/general/adbanner"
});
});
Above implementation is just doing fine when there is only one adbanner component in a page, however the issue arise when there is already multiple instance in one page.
Although from the console log i can see all the image onload executed successfully because I can see multiple console log which shows the "add loaded cq-ad_<uinique_id>", the thing is that I can only see one event being triggered and it always contains the value (adName) of the last component loaded.
Below is the single event trigger that i can see from the chrome console sitecatalyst debugger
SiteCatalyst Server Call #1 (450 chars)
Report Suite ID : xxxxxxxxxxxxxxxxxxx
Page Name : Home
Current URL : /content/mysite/en/home
Events : event4
eVar4 : ad_300_220_test_ad
Currency Code : USD
Char Set : UTF-8
Screen Resolution : 1920x1200
Color Depth : 24
JavaScript Version : 1.6
JavaScript Enabled : Y
Cookies Supported : Y
Browser Width : 1858
Browser Height : 761
Version of Code : H.26.2
Data Centre : xxxxxxxxxx.xxxxx.sc.omtrdc.net
By the way adImpression is mapped to event4 and adName is mapped to eVar4 .
I hope someone can lead me to the correct way of doing this.
Any input is highly appreciated.
Thanks!