Exemples complets

Cette page contient des exemples techniques et des tutoriels vidéo pour l'intégration et la configuration de la solution Cookie Consent.

Exemple 1 : mise en œuvre sur un site web basique

Exemple de TermsFeed Cookie Consent sur un site web de base avec le script Google Analytics ajouté.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Cookie Consent Example</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a basic example of TermsFeed Cookie Consent.</p>

    <button id="changePreferences">Cookie Settings</button>

    <!-- Cookie Consent -->
    <script type="text/javascript" src="//www.termsfeed.com/public/cookie-consent/4.2.0/cookie-consent.js" charset="UTF-8"></script>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        cookieconsent.run({
            "notice_banner_type": "simple",
            "consent_type": "express",
            "palette": "light",
            "language": "en",
            "website_name": "My Website",
            "website_privacy_policy_url": "https://example.com/privacy",
            "open_preferences_center_selector": "#changePreferences",
            "page_load_consent_levels": ["strictly-necessary"]
        });
    });
    </script>
    <noscript>Free cookie consent by <a href="https://www.termsfeed.com/">TermsFeed</a></noscript>

    <!-- Google Analytics (tagged) -->
    <script type="text/plain" data-cookie-consent="tracking">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview');
    </script>
</body>
</html>

Exemple de TermsFeed Cookie Consent avec Google Consent Mode V2 intégré.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E-commerce Store</title>

    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){
    	dataLayer.push(arguments);
    }
    gtag('consent', 'default', {
    	'ad_storage': 'denied',
    	'ad_user_data': 'denied',
    	'ad_personalization': 'denied',
    	'analytics_storage': 'denied'
    });
    </script>  

    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
    	window.dataLayer = window.dataLayer || [];
    	function gtag(){dataLayer.push(arguments);}

    	gtag('js', new Date());
    	gtag('config', 'TAG_ID');
    </script>

</head>
<body>
    <h1>Our Shop</h1>

    <button id="cookieSettings" style="position:fixed; bottom:20px; right:20px;">
         Cookie Settings
    </button>

    <!-- Cookie Consent -->
    <script src="//www.termsfeed.com/public/cookie-consent/4.2.0/cookie-consent.js" charset="UTF-8"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        cookieconsent.run({
            "notice_banner_type": "headline",
            "consent_type": "express",
            "palette": "dark",
            "language": "en",
            "website_name": "Shop",
            "website_privacy_policy_url": "https://shop.example.com/privacy",
            "open_preferences_center_selector": "#cookieSettings",
            "page_load_consent_levels": ["strictly-necessary"],
            "notice_banner_reject_button_hide": false,
            "callbacks": {
            	"scripts_specific_loaded": (level) => {
            		switch(level) {
            			case 'targeting':
            				gtag('consent', 'update', {
            					'ad_storage': 'granted',
            					'ad_user_data': 'granted',
            					'ad_personalization': 'granted',
            					'analytics_storage': 'granted'
            				});
            				break;
            		}
            	}
            },
            "callbacks_force": true
        });
    });
    </script>
    <noscript>Cookie consent by <a href="https://www.termsfeed.com/">TermsFeed</a></noscript>

</body>
</html>

Tutoriels vidéo

Découvrez comment intégrer et utiliser l'outil de consentement aux cookies grâce à nos tutoriels vidéo :

Tutoriels supplémentaires