Sample code for integrating Google's consent mode with Google Ads

Thank you for this example.
I have added not only Google Ads but our entire Google Tag Manager using custom code, could you please also give an example code on how to integrate consent mode with that? Thanks!

I have the same enquiry as Lisadoessegger, when using google tag manager what values must be changed? Thank you

Do I have to update this code to be specific to my Tag Manager? Sorry if sounds like stupid question

<!-- Add this script to your HTML -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    ad_storage: 'denied', // Set default consent to deny ad storage
    analytics_storage: 'denied' // Set default consent to deny analytics storage
  });
  gtag('set', 'ads_data_redaction', true); // Enable ads data redaction
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

 

Replace GA_MEASUREMENT_ID with your actual Google Analytics Measurement ID.

This code sets the default consent for ad storage and analytics storage to denied and enables ads data redaction. It integrates with Google Ads by ensuring that ads data is not stored or used for users who have not provided consent.

Thank you @Alisonsmith12 for helping us to configure google tag manager with google consent mode.

Excuse my ignorance, but why should we use The google Analytics measurement ID (G-XXXXXX) instead of the google tag manager (GTM-XXXX). 

Should this code replace the goggle tag manager code injection or it should go above or beneath.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');</script>
<!-- End Google Tag Manager -->

Thank you

hi, I entered the code as explained, but my cookie bar remains identical to before, why? hi, I entered the code as explained, but my cookie bar remains identical to before, why? Shouldn't it show more choices to accommodate Google Consent Mode V2?

Big thank you to @Parker_SQSP for the code above.

I've got absolutely no idea when it comes to Javascript but I've adjusted it slightly and could do with someone sense-checking what I've done...

1. Using GTM code instead of Google Ads Tag ID

I guess in @Parker_SQSP's code you're supposed to replace the two AW-{AW-ID}'s with a relevant Google Ads Tag ID? Instead I put my Google Tag Manager GTM container ID, and it still appears to work. Is that to be expected?

2. Adding "analytics_storage"

I noticed that using @Parker_SQSP's code would result in analytics_storage being granted on page load before consent had been given. So I added values for analytics_storage alongside the others in several places throughout the code. And this now appears to work too! Again, is this to be expected? And am I right to want the default behaviour of analytics_storage to be Denied until consent it is given via a cookie banner?

I've been testing it out in Tag Assistant and everything appears to be working correctly. Cookie Consent State (gcs) is set to G100 (No consent) on page load, and switches to G111 (Ads & Analytics have consent) after consent is given.

Here is the butchered code that I have produced...

<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-XXXXXXX"></script>

<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('consent', 'default', {
  'ad_storage': 'denied',
  'analytics_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied'
 });
 gtag('js', new Date());
 gtag('config', 'GTM-XXXXXXX');

 let squarespaceCookies = {};
 if (window.getSquarespaceCookies) {
   squarespaceCookies = window.getSquarespaceCookies();
 }
 const consentValue = squarespaceCookies.marketing === 'accepted' ? 'granted' :  'denied';
 const consentObj = { 
  'ad_storage': consentValue,
  'analytics_storage': consentValue,
  'ad_user_data': consentValue,
  'ad_personalization': consentValue
 };
 gtag('consent', 'update', consentObj);
 
 window.onCookieBannerInteraction = () => {
   let squarespaceCookies = {};
   if (window.getSquarespaceCookies) {
     squarespaceCookies = window.getSquarespaceCookies();
   }
   const consentValue = squarespaceCookies.marketing === 'accepted' ? 'granted' :  'denied';
  const consentObj = { 
     'ad_storage': consentValue,
     'analytics_storage': consentValue,
     'ad_user_data': consentValue,
     'ad_personalization': consentValue
   };
   gtag('consent', 'update', consentObj);
 }
</script>

And I don't understand how @Alisonsmith12's code above integrates into this and what it does?