templates/flex/flex-no-tcf.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{% block title %}Welcome to FirstID Flex (No TCF){% endblock %}</title>
  6.     <link rel="icon"
  7.           href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
  9.           integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  10.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
  11.             integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  12.             crossorigin="anonymous"></script>
  13.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
  14.             integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
  15.             crossorigin="anonymous"></script>
  16. </head>
  17. <body>
  18. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  19.     <a class="navbar-brand" href="{{ path('app_index') }}">{{ site_name }}</a>
  20.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
  21.             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  22.         <span class="navbar-toggler-icon"></span>
  23.     </button>
  24. </nav>
  25. <div class="container">
  26.     <div class="row">
  27.         <div class="col-md-12">
  28.             <h3>First ID (No TCF): <span id="firstid"></span></h3>
  29.         </div>
  30.     </div>
  31.     {% block body %}{% endblock %}
  32. </div>
  34. <script>
  35.     function getCookieValueFromCookieName(cookieName) {
  36.         let cookieArr = document.cookie.split(";");
  37.         for (let i = 0; i < cookieArr.length; i++) {
  38.             let cookiePair = cookieArr[i].split("=");
  39.             if (cookieName === cookiePair[0].trim()) {
  40.                 return decodeURIComponent(cookiePair[1]);
  41.             }
  42.         }
  43.         return null;
  44.     }
  46.     function loadFirstIdSdk() {
  47.         console.time("sdk:callback");
  48.         console.time("sdk:event");
  49.         var script = document.createElement('script');
  50.         script.src = "https://cdn.preprod.first-id.fr/sdk/loader/loader-latest-flex-no-tcf.js?id=1234567890";
  51.         script.defer = true;
  52.         document.head.appendChild(script);
  54.         script.onload = function () {
  55.             window.firstId = window.firstId || {
  56.                 callbacks: [],
  57.                 debug: true,
  58.                 cookieName: 'firstid',
  59.                 firstIdFlexFeature: true,
  60.             };
  62.             window.firstId.callbacks.push(() => {
  63.                 console.log('FirstID SDK (No TCF) loaded and initialized.');
  64.                 console.timeEnd("sdk:callback");
  65.                 // Additional FirstID SDK logic here
  66.             });
  68.             window.firstId.callbacks.push(() => {
  69.                 console.log(FIRSTID.getId());
  70.             });
  72.             // FirstID SDK will be initialized automatically
  73.         };
  74.     }
  76.     loadFirstIdSdk();
  78.     let interval = undefined;
  80.     function updateFid() {
  81.         let fid = getCookieValueFromCookieName('firstid');
  82.         if (fid) {
  83.             if (interval) {
  84.                 clearInterval(interval);
  85.             }
  86.             $('#firstid').text(fid);
  87.         } else {
  88.             $('#firstid').text('No First ID cookie found.');
  89.         }
  90.     }
  92.     interval = setInterval(updateFid, 1000);
  93.     
  94.     document.addEventListener('firstId:new', (event) => console.log('New first id:', event.detail));
  95.     document.addEventListener('firstId:initialized', (event) => {
  96.         console.log('First id initialized:', event.detail)
  97.         console.timeEnd("sdk:event");
  98.     });
  100. </script>
  101. </body>
  102. </html>