CODEWITHSUNDEEP
javascriptjquery
Gurmeet Singh
Gurmeet Singh

Reputation: 834

Click event not working on dcmads

I want to make an ajax call whenever someone clicks on a dcmads ad placed on my website. But I am unable to do so. I think that it is somewhat because of event bubbling and capturing and even tried to resolve it but this made no effect.

HTML -

<div class="ad-snippet">
  <ins class='dcmads' style='display:inline-block;width:728px;height:90px'
    data-dcm-placement='N8897.1919357DBM_CA/B10148853.136150045'
    data-dcm-rendering-mode='iframe'
    data-dcm-https-only
    data-dcm-resettable-device-id=''>
    <script src='https://www.googletagservices.com/dcm/dcmads.js'></script>
  </ins>
</div>

JS -

var ad_click = document.querySelectorAll('.ad-snippet');
[].forEach.call(ad_click, function(key,value){
  key.onclick = function(){
    alert("hi");
 }
});

Any help will be highly appreciated as to why this is happening and how can we handle this?

Upvotes: 1

Views: 713

Answers (1)

Gurmeet Singh
Gurmeet Singh

Reputation: 834

For anyone facing the same issue I have finally found a solution to this using the below mentioned amazing plugin

https://github.com/vincepare/iframeTracker-jquery

Reason of issue - It's impossible to read iframe content (DOM) from the parent page due to the same origin policy

How does this plugin work - Tracking is based on the blur event associated to a page/iframe boundary monitoring system telling over which iframe is the mouse cursor at any time.

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when the iframe is clicked (like firing an XHR request)
        }
    });
});

Upvotes: 1

Related Questions