templates/iframe/iframe_content.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Iframe SDK Test</title>
  7.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
  8.           integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  9.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
  10.         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  11.         crossorigin="anonymous"></script>
  12.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
  13.         integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
  14.         crossorigin="anonymous"></script>
  15.     <style>
  16.         body { padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
  17.         .result-card { margin-bottom: 15px; }
  18.         .result-value { font-family: monospace; font-size: 14px; word-break: break-all; }
  19.         .timing { font-size: 12px; color: #6c757d; }
  20.         .status-waiting { color: #ffc107; }
  21.         .status-success { color: #28a745; }
  22.         .status-error { color: #dc3545; }
  23.         .status-null { color: #6c757d; }
  24.         .method-badge { font-size: 11px; }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="container-fluid">
  29.         <h4 class="mb-4">🧪 FirstId Iframe SDK - Test Panel</h4>
  31.         <div class="row">
  32.             <div class="col-md-6">
  33.                 <div class="card result-card">
  34.                     <div class="card-header d-flex justify-content-between align-items-center">
  35.                         <span>0. callbacksWhenIframeReceiveFirstId</span>
  36.                         <span class="badge badge-primary method-badge">Async</span>
  37.                     </div>
  38.                     <div class="card-body">
  39.                         <div id="result-iframe-receive" class="result-value status-waiting">⏳ En attente...</div>
  40.                         <div id="timing-iframe-receive" class="timing"></div>
  41.                     </div>
  42.                 </div>
  43.             </div>
  45.             <div class="col-md-6">
  46.                 <div class="card result-card">
  47.                     <div class="card-header d-flex justify-content-between align-items-center">
  48.                         <span>1. Callback</span>
  49.                         <span class="badge badge-primary method-badge">Async</span>
  50.                     </div>
  51.                     <div class="card-body">
  52.                         <div id="result-callback" class="result-value status-waiting">⏳ En attente...</div>
  53.                         <div id="timing-callback" class="timing"></div>
  54.                     </div>
  55.                 </div>
  56.             </div>
  58.             <div class="col-md-6">
  59.                 <div class="card result-card">
  60.                     <div class="card-header d-flex justify-content-between align-items-center">
  61.                         <span>2. Event DOM</span>
  62.                         <span class="badge badge-primary method-badge">Async</span>
  63.                     </div>
  64.                     <div class="card-body">
  65.                         <div id="result-event" class="result-value status-waiting">⏳ En attente...</div>
  66.                         <div id="timing-event" class="timing"></div>
  67.                     </div>
  68.                 </div>
  69.             </div>
  71.             <div class="col-md-6">
  72.                 <div class="card result-card">
  73.                     <div class="card-header d-flex justify-content-between align-items-center">
  74.                         <span>3. getFirstId()</span>
  75.                         <span class="badge badge-secondary method-badge">Sync</span>
  76.                     </div>
  77.                     <div class="card-body">
  78.                         <div id="result-method" class="result-value status-waiting">⏳ En attente...</div>
  79.                         <div id="timing-method" class="timing"></div>
  80.                         <button class="btn btn-sm btn-outline-primary mt-2" onclick="testGetFirstIdMethod()">
  81.                             Tester maintenant
  82.                         </button>
  83.                     </div>
  84.                 </div>
  85.             </div>
  87.             <div class="col-md-6">
  88.                 <div class="card result-card">
  89.                     <div class="card-header d-flex justify-content-between align-items-center">
  90.                         <span>4. Getter .firstId</span>
  91.                         <span class="badge badge-secondary method-badge">Sync</span>
  92.                     </div>
  93.                     <div class="card-body">
  94.                         <div id="result-getter" class="result-value status-waiting">⏳ En attente...</div>
  95.                         <div id="timing-getter" class="timing"></div>
  96.                         <button class="btn btn-sm btn-outline-primary mt-2" onclick="testGetterProperty()">
  97.                             Tester maintenant
  98.                         </button>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         </div>
  104.         <div class="card mt-3">
  105.             <div class="card-header">📊 Informations SDK</div>
  106.             <div class="card-body">
  107.                 <table class="table table-sm table-borderless mb-0">
  108.                     <tr>
  109.                         <td width="150">Version</td>
  110.                         <td id="sdk-version" class="result-value">-</td>
  111.                     </tr>
  112.                     <tr>
  113.                         <td>SDK Load Time</td>
  114.                         <td id="sdk-load-time" class="result-value">-</td>
  115.                     </tr>
  116.                     <tr>
  117.                         <td>Source</td>
  118.                         <td id="sdk-source" class="result-value">-</td>
  119.                     </tr>
  120.                     <tr>
  121.                         <td>Cookie Name</td>
  122.                         <td id="sdk-cookie-name" class="result-value">-</td>
  123.                     </tr>
  124.                     <tr>
  125.                         <td>window.__FIRSTID__</td>
  126.                         <td id="sdk-global" class="result-value">-</td>
  127.                     </tr>
  128.                 </table>
  129.             </div>
  130.         </div>
  132.         <div class="card mt-3">
  133.             <div class="card-header">📝 Logs</div>
  134.             <div class="card-body p-0">
  135.                 <pre id="logs" class="mb-0 p-3" style="max-height: 200px; overflow-y: auto; font-size: 12px; background: #f8f9fa;"></pre>
  136.             </div>
  137.         </div>
  138.     </div>
  140. <script>
  141.     var PAGE_LOAD_TIME = performance.now();
  142.     var SDK_LOAD_TIME = null;
  144.     function log(message) {
  145.         var logsElement = document.getElementById('logs');
  146.         var timestamp = (performance.now() - PAGE_LOAD_TIME).toFixed(2);
  147.         logsElement.textContent += '[' + timestamp + 'ms] ' + message + '\n';
  148.         logsElement.scrollTop = logsElement.scrollHeight;
  149.     }
  151.     function displayAsyncResult(elementId, value, pageLoadTime, sdkLoadTime) {
  152.         var element = document.getElementById(elementId);
  153.         var timingElement = document.getElementById(elementId.replace('result-', 'timing-'));
  154.         var durationFromPage = (performance.now() - pageLoadTime).toFixed(2);
  155.         var durationFromSdk = sdkLoadTime ? (performance.now() - sdkLoadTime).toFixed(2) : null;
  157.         if (value) {
  158.             element.textContent = '✅ ' + value;
  159.             element.className = 'result-value status-success';
  160.         } else {
  161.             element.textContent = '⚠️ null (non disponible)';
  162.             element.className = 'result-value status-null';
  163.         }
  165.         var timingText = '⏱️ ' + durationFromPage + 'ms depuis page';
  166.         if (durationFromSdk) {
  167.             timingText += ' | ' + durationFromSdk + 'ms depuis SDK load';
  168.         }
  169.         timingElement.textContent = timingText;
  170.     }
  172.     function displaySyncResult(elementId, value, clickTime) {
  173.         var element = document.getElementById(elementId);
  174.         var timingElement = document.getElementById(elementId.replace('result-', 'timing-'));
  175.         var duration = (performance.now() - clickTime).toFixed(4);
  177.         if (value) {
  178.             element.textContent = '✅ ' + value;
  179.             element.className = 'result-value status-success';
  180.         } else {
  181.             element.textContent = '⚠️ null (non disponible)';
  182.             element.className = 'result-value status-null';
  183.         }
  185.         timingElement.textContent = '⏱️ ' + duration + 'ms depuis le click';
  186.     }
  188.     function testGetFirstIdMethod() {
  189.         var clickTime = performance.now();
  190.         if (window.FIRSTID) {
  191.             var firstId = window.FIRSTID.getFirstId();
  192.             displaySyncResult('result-method', firstId, clickTime);
  193.             log('getFirstId() appelé: ' + (firstId || 'null'));
  194.         } else {
  195.             document.getElementById('result-method').textContent = '❌ SDK non chargé';
  196.             document.getElementById('result-method').className = 'result-value status-error';
  197.             log('getFirstId() - SDK non disponible');
  198.         }
  199.     }
  201.     function testGetterProperty() {
  202.         var clickTime = performance.now();
  203.         if (window.FIRSTID) {
  204.             var firstId = window.FIRSTID.firstId;
  205.             displaySyncResult('result-getter', firstId, clickTime);
  206.             log('.firstId getter appelé: ' + (firstId || 'null'));
  207.         } else {
  208.             document.getElementById('result-getter').textContent = '❌ SDK non chargé';
  209.             document.getElementById('result-getter').className = 'result-value status-error';
  210.             log('.firstId getter - SDK non disponible');
  211.         }
  212.     }
  214.     function updateSdkInfo() {
  215.         if (window.FIRSTID) {
  216.             document.getElementById('sdk-version').textContent = window.FIRSTID.getVersion() || window.FIRSTID.version || '-';
  217.             document.getElementById('sdk-cookie-name').textContent = window.FIRSTID.config?.cookieName || '-';
  218.         }
  219.         document.getElementById('sdk-global').textContent = window.__FIRSTID__ || 'undefined';
  220.     }
  222.     log('Page chargée, initialisation du SDK...');
  224.     document.addEventListener('firstId:initialized', function(event) {
  225.         var firstId = event.detail.firstId;
  226.         displayAsyncResult('result-event', firstId, PAGE_LOAD_TIME, SDK_LOAD_TIME);
  227.         log('Event firstId:initialized reçu: ' + (firstId || 'null'));
  229.         document.getElementById('sdk-source').textContent = firstId
  230.             ? (document.cookie.indexOf('firstid') > -1 ? 'Cookie ou Parent' : 'PostMessage Parent')
  231.             : 'Non trouvé';
  233.         updateSdkInfo();
  234.     });
  236.     window.firstId = {
  237.         debug: true,
  238.         callbacks: [
  239.             function(firstId) {
  240.                 displayAsyncResult('result-callback', firstId, PAGE_LOAD_TIME, SDK_LOAD_TIME);
  241.                 log('Callback exécuté: ' + (firstId || 'null'));
  242.                 updateSdkInfo();
  243.             }
  244.         ],
  245.         callbacksWhenIframeReceiveFirstId: [
  246.             function(firstId) {
  247.                 displayAsyncResult('result-iframe-receive', firstId, PAGE_LOAD_TIME, SDK_LOAD_TIME);
  248.                 log('callbacksWhenIframeReceiveFirstId exécuté: ' + (firstId || 'null'));
  249.                 updateSdkInfo();
  250.             }
  251.         ]
  252.     };
  254.     (function loadSdk() {
  255.         var script = document.createElement('script');
  256.         script.src = 'https://cdn.preprod.first-id.fr/sdk/script/iframe-latest.js';
  257.         script.async = true;
  259.         script.onload = function() {
  260.             SDK_LOAD_TIME = performance.now();
  261.             var loadDuration = (SDK_LOAD_TIME - PAGE_LOAD_TIME).toFixed(2);
  262.             log('SDK script chargé en ' + loadDuration + 'ms');
  263.             document.getElementById('sdk-load-time').textContent = loadDuration + 'ms';
  264.         };
  266.         script.onerror = function() {
  267.             log('Erreur lors du chargement du SDK');
  268.         };
  270.         document.head.appendChild(script);
  271.     })();
  272. </script>
  273. </body>
  274. </html>