templates/vehicle_tip/tip.html.twig line 1

  1. <section class="tips-box">
  2.     <header class="tips-box__header">
  3.         <h2>Doporučené vozy</h2>
  4.     </header>
  5.     <div class="tips-box__items">
  6.         {% for t in vehicleTips %}
  7.             {% include 'vehicle_tip/_tipCard.html.twig' with {
  8.                 vehicle: t.vehicle,
  9.                 compact: true,
  10.                 autanetPartnerId: t.autanetPartner ? t.autanetPartner.id : null,
  11.                 recommendedPlacement: 'R02',
  12.                 recommendedPageContext: pageContext
  13.             } only %}
  14.         {% endfor %}
  15.     </div>
  16. </section>
  18. <script>
  19.     (function () {
  20.         const items = document.querySelectorAll(
  21.             '[data-recommended-placement="R02"][data-recommended-vehicle-id][data-autanet-partner-id][data-recommended-page-context]'
  22.         );
  24.         if (
  25.             !items.length
  26.             || !window.AutanetAnalytics
  27.             || typeof window.AutanetAnalytics.withIdentity !== 'function'
  28.         ) {
  29.             return;
  30.         }
  32.         function sendRecommendedEvent(item, eventType) {
  33.             const vehicleId = item.dataset.recommendedVehicleId;
  34.             const partnerId = item.dataset.autanetPartnerId;
  35.             const pageContext = item.dataset.recommendedPageContext;
  37.             if (!vehicleId || !partnerId || !pageContext) {
  38.                 return;
  39.             }
  41.             window.AutanetAnalytics.withIdentity(function (identity) {
  42.                 if (!identity) {
  43.                     return;
  44.                 }
  46.                 const formData = new FormData();
  47.                 formData.append('event_type', eventType);
  48.                 formData.append('vehicle_id', vehicleId);
  49.                 formData.append('partner_id', partnerId);
  50.                 formData.append('placement', 'R02');
  51.                 formData.append('page_context', pageContext);
  52.                 formData.append(
  53.                     'device',
  54.                     window.matchMedia('(max-width: 766px)').matches
  55.                         ? 'mobile'
  56.                         : 'desktop'
  57.                 );
  58.                 formData.append('visitor_key', identity.visitorKey);
  59.                 formData.append('session_key', identity.sessionKey);
  60.                 formData.append('pageview_key', identity.pageviewKey);
  62.                 fetch('{{ path('app_analytics_event') }}', {
  63.                     method: 'POST',
  64.                     body: formData,
  65.                     keepalive: true
  66.                 }).catch(function () {
  67.                 });
  68.             }, 5000);
  69.         }
  71.         items.forEach(function (item) {
  72.             item.addEventListener('click', function () {
  73.                 sendRecommendedEvent(item, 'recommended_vehicle_click');
  74.             });
  75.         });
  77.         if (typeof window.IntersectionObserver !== 'function') {
  78.             return;
  79.         }
  81.         const impressionTimers = new Map();
  82.         const trackedVehicleIds = new Set();
  84.         function clearImpressionTimer(vehicleId) {
  85.             const timer = impressionTimers.get(vehicleId);
  87.             if (timer) {
  88.                 clearTimeout(timer);
  89.                 impressionTimers.delete(vehicleId);
  90.             }
  91.         }
  93.         const observer = new IntersectionObserver(function (entries) {
  94.             entries.forEach(function (entry) {
  95.                 const item = entry.target;
  96.                 const vehicleId = item.dataset.recommendedVehicleId;
  98.                 if (!vehicleId || trackedVehicleIds.has(vehicleId)) {
  99.                     return;
  100.                 }
  102.                 if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
  103.                     if (impressionTimers.has(vehicleId)) {
  104.                         return;
  105.                     }
  107.                     const timer = setTimeout(function () {
  108.                         impressionTimers.delete(vehicleId);
  110.                         if (trackedVehicleIds.has(vehicleId)) {
  111.                             return;
  112.                         }
  114.                         trackedVehicleIds.add(vehicleId);
  115.                         sendRecommendedEvent(item, 'recommended_vehicle_impression');
  116.                     }, 1000);
  118.                     impressionTimers.set(vehicleId, timer);
  119.                     return;
  120.                 }
  122.                 clearImpressionTimer(vehicleId);
  123.             });
  124.         }, {
  125.             threshold: [0, 0.5, 1]
  126.         });
  128.         items.forEach(function (item) {
  129.             observer.observe(item);
  130.         });
  131.     })();
  132. </script>