I am working with a feature that checks if a user has accepted cookies of a certain category (with the help of JavaScript API — Piwik PRO Analytics Suite 18.2 documentation and specially getComplianceSettings). If yes, then I can show the content, but if not, the content is not shown and instead we’ll show a placeholder suggesting user to accept the cookies.
The problem is that I would need to add an eventListener to check if the consent has been changed after the first check of the consent. Which function should I use in eventListener? Updating the consent doesn’t load the page again so any load related eventListener is out of the question I assume. Is there some general function related to the update?
Also, what you could do here is to fire a custom JS tag based on the element presence trigger which would be responsible for checking if there is a consent form element within the source code of your website. If the consent is present on your website then you do not show the content to a user. The id of the consent form element (div) should look the following way: ppms_cm_consent_popup_(site ID of your website). This could be followed by another tag which would check the state of the user’s consent decision from the dataLayer or use the getComplianceSettings method for this purpose. If a user rejected the consent based on the information from the dataLayer or the output of the getComplianceSettings method then you do not show the user the content.
Hi asinior and thank you for your answer! The approach with the Tag manager sounds very tempting, but in this case client embeds content (= Youtube iframes) in CMS so the precise iframe tag couldn’t be added like it is added in step 6 (instructions) . Have you seen or implemented a similar case?
On the other hand: if anyone has a working example of the code implementation, I would gladly take a look at that as well. Especially the part about checking the consent again after initial consent check interests me a lot.
there are no messages sent or window events triggered by the script whenever consent changes afaik, so an event listener for a specific event is not an option. But there are handlers for all clicks on relevant buttons like ppms.cm.api('trackAgreeToAllClick', onFulfilled, onRejected);. Would it not be enough to attach event handlers here (and the two other buttons as well: trackRejectAllClick / trackSaveChoicesClick) by using those API functions?
If this is not an option (for whatever reason), you could add your own click events to all relevant buttons that are used to close the modal as a workaround.
In a standard modal, all buttons to accept or deny all or save individual choices are inside a container with a specific class: ppms_cm_centered_buttons. Adding click event listeners to all those buttons (and maybe running tasks after a litte timeout) could be a solution.
To just log to console what button (by id) was clicked, this line would do the job:
document.querySelectorAll(".ppms_cm_centered_buttons button").forEach(
x => x.addEventListener("click", e => {
console.log("clicked", e.target.id)
}
))
replacing the line console.log("clicked", e.target.id) with whatever you want to do after a (first or changed) consent decision can be used to unblock iframes or whatever task should be run at that point.
If you prefer to handle a custom message like piwikProConsentChanged, just post one when a button is clicked and then add a handler for messages:
document.querySelectorAll(".ppms_cm_centered_buttons button").forEach(
x => x.addEventListener("click", e => {
window.postMessage("piwikProConsentChanged");
}
));
window.addEventListener("message", function(e){
if (e.data === "piwikProConsentChanged") {
console.log("run your code here");
}
}, false
)