templates/flex/flex.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!{% endblock %}</title>
  7.     <script>
  9.     </script>
  10.     <link rel="icon"
  11.           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>">
  12.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
  13.           integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  14.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
  15.             integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  16.             crossorigin="anonymous"></script>
  17.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
  18.             integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
  19.             crossorigin="anonymous"></script>
  20.     {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
  21.     {#
  22.     {% block stylesheets %}
  23.         {{ encore_entry_link_tags('app') }}
  24.     {% endblock %}
  26.     {% block javascripts %}
  27.         {{ encore_entry_script_tags('app') }}
  28.     {% endblock %}
  29.     #}
  31.     {# Axeptio TCF API #}
  32.     <script>
  33.         window.axeptioSettings = {
  34.             clientId: "66137db6ae83de5e566cfc53",
  35.             cookiesVersion: "first-id sandbox-fr-EU",
  36.         };
  38.         (function (d, s) {
  39.             var t = d.getElementsByTagName(s)[0],
  40.                 e = d.createElement(s);
  41.             e.async = false;
  42.             e.src = "//static.axept.io/tcf/sdk.js";
  43.             e.type = "module";
  44.             t.parentNode.insertBefore(e, t);
  45.         })(document, "script");
  46.     </script>
  47.     {# End Axeptio TCF API #}
  48. </head>
  49. <body>
  50. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  51.     <a class="navbar-brand" href="{{ path('app_index') }}">{{ site_name }}</a>
  52.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
  53.             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  54.         <span class="navbar-toggler-icon"></span>
  55.     </button>
  56. </nav>
  57. <div class="container">
  58.     <div class="row">
  59.         <div class="col-md-12">
  60.             <h3>First ID : <span id="firstid"></span></h3>
  61.         </div>
  62.     </div>
  64.     <div class="row mt-4">
  65.         <div class="col-md-12">
  66.             <h4>DeviceId:</h4>
  67.             <input type="text" id="deviceIdInput" class="mb-2 form-control" disabled>
  68.             <button id="generateDeviceId" class="btn btn-secondary">Get device id</button>
  69.         </div>
  70.     </div>
  71.     {% block body %}{% endblock %}
  72. </div>
  73. </body>
  76. <script>
  77.     function getCookieValueFromCookieName(cookieName) {
  78.         let cookieArr = document.cookie.split(";");
  79.         for (let i = 0; i < cookieArr.length; i++) {
  80.             let cookiePair = cookieArr[i].split("=");
  81.             if (cookieName === cookiePair[0].trim()) {
  82.                 return decodeURIComponent(cookiePair[1]);
  83.             }
  84.         }
  85.         return null;
  86.     }
  90.     function loadFirstIdSdk() {
  91.         console.time("sdk:callback");
  92.         console.time("sdk:event");
  93.         var script = document.createElement('script');
  94.         script.src = "https://cdn.preprod.first-id.fr/sdk/loader/loader-latest-flex.js?id=1234567890";
  95.         script.defer = true;
  96.         document.head.appendChild(script);
  98.         script.onload = function () {
  99.             window.firstId = window.firstId || {
  100.                 callbacks: [],
  101.                 debug: true,
  102.                 cookieName: 'firstid',
  103.                 firstIdFlexFeature: true,
  104.             };
  106.             window.firstId.callbacks.push(() => {
  107.                 console.log('FirstID SDK loaded and initialized after user consent.');
  108.                 console.timeEnd("sdk:callback");
  109.                 // Additional FirstID SDK logic here
  110.             });
  112.             window.firstId.callbacks.push(() => {
  113.                 console.log(FIRSTID.get)
  114.             });
  116.             // FirstIdSdk().init();
  117.         };
  118.     }
  120.     loadFirstIdSdk();
  122.     let interval = undefined
  124.     function updateFid() {
  125.         let fid = getCookieValueFromCookieName('firstid')
  126.         if (fid) {
  127.             if (interval) {
  128.                 clearInterval(interval)
  129.             }
  130.             $('#firstid').text(fid)
  131.         } else {
  132.             $('#firstid').text('No First ID cookie find.')
  133.         }
  134.     }
  136.     interval = setInterval(updateFid, 1000)
  138.     document.addEventListener('firstId:new', (event) => console.log('New first id:', event.detail));
  139.     document.addEventListener('firstId:initialized', (event) => {
  140.         console.log('First id initialized:', event.detail)
  141.         console.timeEnd("sdk:event");
  142.     });
  144.     document.getElementById('generateDeviceId').addEventListener('click', function() {
  145.         if(!window.FIRSTID) {
  146.             console.error('FirstID SDK not loaded yet.');
  147.             return;
  148.         }
  149.         if(!window.FIRSTID.getDeviceId) {
  150.             console.error('FirstID SDK does not have getDeviceId method.');
  151.             return;
  152.         }
  154.         FIRSTID.getDeviceId()
  155.             .then(id => {
  156.                 document.getElementById('deviceIdInput').value = id;
  157.             })
  158.             .catch(error => {
  159.                 console.error('Error:', error);
  160.             });
  161.     });
  162. </script>
  163. </html>