Add Cookie Consent GTM
Cookie Consent:
<script>
</script>GTM:
<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-N2WK2N2P');
</script>1. **Edit the `header.php` File:**
– Go to your WordPress dashboard.
– Navigate to **Appearance** > **Theme Editor**.
– Open the `header.php` file from the right sidebar under the Theme Files section.
2. **Add the Cookie Consent Script:**
– Place the following Cookie Consent script just before the closing “ tag.
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="7fdfe016-6fcc-417a-9093-e25df6b4e186" data-blockingmode="auto" type="text/javascript"></script>3. **Add the GTM Script:**
– Add the GTM code right after the opening “ tag (for better performance and proper functionality).
<!-- 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-N2WK2N2P');</script>
<!-- End Google Tag Manager -->4. **Save the Changes:**
– Click the **Update File** button to save your changes.
Now, both the Cookie Consent and Google Tag Manager scripts will be included in your site's header. If you're using a caching plugin, clear the cache to ensure the changes take effect.
1. **Create a Child Theme or Use Your Theme's `functions.php` File:**
If you haven't already, it's a good idea to use a child theme to ensure your changes are preserved during theme updates. You can also directly modify the `functions.php` file in your theme.
2. **Add the Code to `functions.php`:**
Add the following code in your theme's `functions.php` file to insert the scripts.
// Add Cookie Consent script to the header
function add_cookie_consent_script() {
echo '<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="7fdfe016-6fcc-417a-9093-e25df6b4e186" data-blockingmode="auto" type="text/javascript"></script>';
}
add_action('wp_head', 'add_cookie_consent_script');
// Add Google Tag Manager script after the opening body tag
function add_gtm_script() {
echo '<!-- 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-N2WK2N2P');</script>
<!-- End Google Tag Manager -->';
}
add_action('wp_body_open', 'add_gtm_script');3. **Save the `functions.php` File:**
– After adding the code, save the `functions.php` file.
### Explanation:
– The `add_cookie_consent_script` function hooks into `wp_head`, which outputs the Cookie Consent script in the “ section of the HTML.
– The `add_gtm_script` function hooks into `wp_body_open`, which adds the Google Tag Manager script just after the opening “ tag.
This method ensures that the scripts are added dynamically via WordPress hooks and are easier to maintain and update.