Manually enabling consentModal (and event listener doesn’t work)

I’ve enabled Enable Consent Management and disabled Show consent modal.

I’ve done a custom HTML Tool with this code

document.addEventListener("zarazConsentAPIReady", () => {
  console.log('zaraz api ready')
  if ({{system.device.location.isEUCountry}} === 1) {
    zaraz.consent.modal = true
  } else { 
    zaraz.consent.setAll(true)
    zaraz.consent.sendQueuedEvents()
  }
});

following this documentation: Consent Management API examples

The console.log is never logged which I somehow suspected as I would assume when Zaraz loads a tool that the API already is available, so that the event already happened, when the custom html is implemented.

However just for the sake of debugging I tried than to just do zaraz.consent.modal = true in the Chrome developer console, but it gave me the error zaraz.consent is undefined. Now I’m a bit lost.

I could try configuration rules or handle the consent logic with gtm or another tool, but with Zaraz would be the neatest.

Are you sure Zaraz is loaded at all in your page? zaraz.consent is undefined is a very strange error, are you sure you’re copying and pasting exactly? can you provide a screenshot?

I’m quite sure I can see it on monitoring and I can use zaraz.debug(…), but not:

image

You can check for yourself: https://skillsfaster.com

Do you have any tools assigned to a purpose? The consent object will not be populated unless there is actually something to display in the modal.

Make sure you have at least one tool assigned to a purpose, like so:

1 Like

@kuba_orlik this indeed helped. zaraz.consent is now available in the console.

However my CustomHTML is not showing up on the page. It’s not in the code.

if your action is configured properly, uses valid triggers and isn’t attached to a consent purpose, then it’s probably because you wrapped your code with document.addEventListener("zarazConsentAPIReady") but the HTML is being added after the event has been fired already.

@juliantosun you can use this snippet in the Custom HTML tool to solve the issue:

<script>
function handleZarazConsentAPIReady() {
  if ({{system.device.location.isEUCountry}} === 1) {
    zaraz.consent.modal = true
  } else {
    zaraz.consent.setAll(true)
    zaraz.consent.sendQueuedEvents()
  }
}

if (zaraz.consent?.APIReady) {
  handleZarazConsentAPIReady()
} else {
  document.addEventListener("zarazConsentAPIReady", handleZarazConsentAPIReady)
}
</script>

We’ll update the docs in a moment

Okay I can trigger the modal now. However it appears on every page. Am I supposed to read the cookies manually?

I can, just thought Zaraz would do that.

zaraz.consent.modal = true will always make the modal appear - even if the choices have already been made by the user. This is to enable a use-case where a user wants to change their preferences. When using consent API, only call zaraz.consent.modal = true when you want the modal to actually appear.

So in short - yes, in this case you have to read the cookies manually