CODEWITHSUNDEEP
javascriptgoogle-chrome
tkwitten
tkwitten

Reputation: 113

Javascript Event Not displaying in Chrome Developer Console

I have this button:

<a href="#" ng-click="addToCart()" onclick="step4()" class="btn btn-submit btn-block">Add to Cart</a>

then I have this Javascript:

function step4() {
    dataLayer.push({
        'event': 'checkout',
        'ecommerce': {
            'checkout': {
                'actionField': {'step': 4}
            }
        }
    });
}

In the chrome developer console, it does not show anything firing when I click the link? Any tips? How can I tell my JS is firing?

Upvotes: 0

Views: 243

Answers (2)

meverson
meverson

Reputation: 318

Your function should be firing, but you aren't outputting anything to the console so you won't see anything there. You should try putting a console.log() statement in your function, which will output some text to the development console.

You can do something like this, which will print to the console as soon as the function is hit, and then a second time just before it completes along with the new value of your dataLayer object:

function step4() {
    console.log('Inside step4 function.');

    dataLayer.push({
        'event': 'checkout',
        'ecommerce': {
            'checkout': {
                'actionField': {'step': 4}
            }
        }
    });

    console.log('End of function call: ', dataLayer);
}

Here's a plunker: https://plnkr.co/edit/fLcx1oX4Q1A6XoiBOGcp?p=preview

Upvotes: 1

Shalini
Shalini

Reputation: 163

I guess you should prevent default action of anchor element

try function step4(e) { e.preventDefault(); dataLayer.push({ 'event': 'checkout', 'ecommerce': { 'checkout': { 'actionField': {'step': 4} } } }); }

Upvotes: 1

Related Questions