dataLayer.push duplicated

user_5391747 0
Viewed 431

I'm trying to push the dataLayer. But it keeps giving me a duplicate array. Please see below my code

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>

 dataLayer = [{
 'productID': '123456',
 'productTitle': 'Very awesome product',
 'productPrice': '13.00'
 }];
function next_step1c() {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
     'event': 'Enquiry',
     'PageURL': window.location.href,

     });
}
</script>
<fieldset id="firstc">
          <div class="funkyradio">
            <div class="funkyradio-success" onclick="next_step1c()">
                <input type="radio" name="buy" id="check1c" value="Rolex"/>
                <label for="check1c">Rolex</label>
            </div>
          </div>
</fieldset>

When I click the radio button I get the below result. enter image description here

But when I clicked the word Rolex. I am getting duplicate

enter image description here

How can I get one push only when I clicked the word Rolex?

jquery javascript
2 Answers

try like this. You added onclick to .funkyradio-success class. SO when you clicked the radio button it works only 1 time. But when You clicked to label button, there it clicks double. Because when you click label there works .funkyradio-success onclick. And label binded to radio input so input click trigger works too. So your function calls 2 times.

 dataLayer = [{
 'productID': '123456',
 'productTitle': 'Very awesome product',
 'productPrice': '13.00'
 }];
function next_step1c() {
console.log('you clicked me');
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
     'event': 'Enquiry',
     'PageURL': window.location.href,

     });
}
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<fieldset id="firstc">
          <div class="funkyradio">
            <div class="funkyradio-success" onclick="next_step1c()">
                <input type="radio" name="buy" id="check1c" value="Rolex"/>
                <label for="check1c">Rolex</label>
            </div>
          </div>
</fieldset>

Add onclick to input radio

 dataLayer = [{
 'productID': '123456',
 'productTitle': 'Very awesome product',
 'productPrice': '13.00'
 }];
function next_step1c() {
console.log('you clicked me');
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
     'event': 'Enquiry',
     'PageURL': window.location.href,

     });
}
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<fieldset id="firstc">
          <div class="funkyradio">
            <div class="funkyradio-success" >
                <input type="radio" name="buy" id="check1c" onclick="next_step1c()" value="Rolex"/>
                <label for="check1c">Rolex</label>
            </div>
          </div>
</fieldset>

Admin1

Just use .onchange instead for the radio type input element, and I see no purpose for checking if that dataLayer is defined cause it will always be in this code, and avoid writing inline JS cause it has lot of disadvantages.

var dataLayer = [{
 'productID': '123456',
 'productTitle': 'Very awesome product',
 'productPrice': '13.00'
}];

document.querySelector("#check1c").onchange = function () {
  dataLayer.push({
   'event': 'Enquiry',
   'PageURL': window.location.href,
  });
  console.log(dataLayer);
};
<fieldset id="firstc">
  <div class="funkyradio">
    <div class="funkyradio-success">
        <input type="radio" name="buy" id="check1c" value="Rolex"/>
        <label for="check1c">Rolex</label>
    </div>
  </div>
</fieldset>

user_131581510
Related