I'm an analyst working with a developper to receive some values from LWC. We are trying to pass values through dispatch/listener, but the eventlistener is not triggered.

In the LWC we have:

@api Name_Label; 
@api Title_Label;
@api Call_Label;
@api Video;
@api Close;
@api Background_image;
dispatchEvent;



//Boolean tracked variable to indicate if modal is open or not default value is false as modal is closed when page is loaded 
@track isModalOpen = false;
openModal() {
    // to open modal set isModalOpen tarck value as true
    this.isModalOpen = true;

    this.dispatchEvent(new CustomEvent("updateGTMdataLayer", { "detail" : { data: "test"} }));
}
closeModal() {
    // to close modal set isModalOpen tarck value as false
    this.isModalOpen = false;
}
submitDetails() {
    // to close modal set isModalOpen tarck value as false
    //Add your code to call apex method or do some processing
    this.isModalOpen = false;
}
}

Then I have placed in the head markup this script to log into the console that the event triggered.

<script>
document.addEventListener('updateGTMdataLayer', function(e){ console.log("updateGTMdataLayer")});
</script>

Can someone care to help?

Thanks

I'm an analyst working with a developper to receive some values from a LWC. We are trying to pass values through dispatch/listener, but the eventlistener is not triggered.

The end goal will be to some values from the LWC through to Google Tag Manager.

In the LWC we have:

@api Name_Label; 
@api Title_Label;
@api Call_Label;
@api Video;
@api Close;
@api Background_image;
dispatchEvent;



//Boolean tracked variable to indicate if modal is open or not default value is false as modal is closed when page is loaded 
@track isModalOpen = false;
openModal() {
    // to open modal set isModalOpen tarck value as true
    this.isModalOpen = true;

    this.dispatchEvent(new CustomEvent("updateGTMdataLayer", { "detail" : { data: "test"} }));
}
closeModal() {
    // to close modal set isModalOpen tarck value as false
    this.isModalOpen = false;
}
submitDetails() {
    // to close modal set isModalOpen tarck value as false
    //Add your code to call apex method or do some processing
    this.isModalOpen = false;
}
}

Then I have placed in the head markup this script to log into the console that the event triggered.

<script>
document.addEventListener('updateGTMdataLayer', function(e){ console.log("updateGTMdataLayer")});
</script>

Can someone care to help?

Thanks