I’ve achieved this with the following code that adds the users’s groups to the body tag:
<script>
// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2
if (window.jQuery) {
window.jQuery(function ($) {
var u = Discourse.User.current();
if (u !== null){
u.findDetails().then(function(u) {
// console.log(u.groups);
var arrayLength = u.groups.length;
for (var i = 0; i < arrayLength; i++) {
$('body').addClass('group-'+u.groups[i].name);
}
});
}
});
};
</script>
This code performs one additional call to the Discourse API to fetch the group information, but only once during the initial page load so the impact is minimal.
Next, target the right groups in CSS and hide banners for them:
/* remove ads for Patreon supporters */
.group-patreon-casual .google-adsense,
.group-patreon-commercial .google-adsense,
.group-patreon-serious .google-adsense {
display:none;
}