{"version":3,"file":"facebook-carousel-9477e65d21a1dbcc4710.js","mappings":"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","sources":["webpack://voresby.web/./Scripts/features/event-tracking.ts","webpack://voresby.web/./Scripts/components/carousel/facebook-carousel.tsx","webpack://voresby.web/./Scripts/components/carousel/wrapped-swiper.tsx","webpack://voresby.web/./Scripts/util/gtm.ts","webpack://voresby.web/./Scripts/util/helpers.ts"],"sourcesContent":["import { EventApi } from \"../lib-api/apis/EventApi\";\r\nimport { apiConfiguration } from \"../api-configuration\";\r\nimport { isBot } from \"../util/browser-detection\";\r\n\r\ntype EventObject = {\r\n ikpi?: string;\r\n objectId?: string;\r\n objectType?: string;\r\n};\r\n\r\nlet impressionEventObserver: IntersectionObserver | null = null;\r\nconst queue: EventObject[] = [];\r\nconst eventApi = new EventApi(apiConfiguration);\r\n\r\nif (\"IntersectionObserver\" in window && !isBot()) {\r\n impressionEventObserver = new IntersectionObserver(\r\n function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n const eventElement = entry.target as HTMLElement;\r\n queue.push({\r\n ikpi: eventElement.dataset.ikpi,\r\n objectId: eventElement.dataset.objectid,\r\n objectType: eventElement.dataset.objecttype,\r\n });\r\n impressionEventObserver?.unobserve(eventElement);\r\n }\r\n });\r\n },\r\n { threshold: 0.5 }\r\n );\r\n\r\n //Ville gerne finde på noget bedre end dette. Kan man hooke up på et array? Detecte changes?\r\n //Idéen er at kunne bundle flere impressions i et api kald. F.eks. på forsiden vil der muligvis være 3 banner above the fold, 1 api kald i stedet for 3!\r\n // /api/impr/tr { ids: ['asd-asd-asd-as-d', 'dsa-dsaas-d-as-asdsa-d'] }\r\n const pushQueue = () => {\r\n setTimeout(async () => {\r\n if (queue.length > 0) {\r\n const toPush = queue.splice(0, queue.length);\r\n //upload queue and reset it\r\n try {\r\n (async () => {\r\n toPush.forEach((event) => {\r\n if (event.ikpi && event.objectId && event.objectType) {\r\n trackVoresKpi(event.ikpi, event.objectId, event.objectType);\r\n }\r\n });\r\n })();\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }\r\n pushQueue();\r\n }, 500); //hvor tit kan vi polle?\r\n };\r\n pushQueue();\r\n}\r\n\r\nexport const trackVoresKpi = async (eventType, objectId, objectType) => {\r\n await eventApi.trackEvent({\r\n eventTypeString: eventType,\r\n objectId: objectId,\r\n objectTypeString: objectType,\r\n });\r\n};\r\n\r\nconst getClickTrackingElements = (el?: ParentNode) =>\r\n (el || document).querySelectorAll(\"a[data-ckpi]\");\r\nconst getImpressionTrackingElements = (el?: ParentNode) =>\r\n (el || document).querySelectorAll(\"[data-ikpi]\");\r\n\r\nexport function hookVoresEventTracking(el?: ParentNode) {\r\n getClickTrackingElements(el).forEach(function (element) {\r\n if (\r\n element.dataset.ckpi &&\r\n element.dataset.objectid &&\r\n element.dataset.objecttype\r\n ) {\r\n // console.log(element.dataset.ckpi);\r\n // console.log(element.dataset.objectid);\r\n // console.log(element.dataset.objecttype);\r\n element.addEventListener(\"click\", () => {\r\n (async () => {\r\n trackVoresKpi(\r\n element.dataset.ckpi,\r\n element.dataset.objectid,\r\n element.dataset.objecttype\r\n );\r\n })();\r\n });\r\n }\r\n });\r\n getImpressionTrackingElements(el).forEach(function (element) {\r\n impressionEventObserver && impressionEventObserver.observe(element);\r\n });\r\n}\r\n","import React, { useCallback, useEffect, useState } from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { Swiper, SwiperSlide } from \"swiper/react\";\r\nimport { apiConfiguration } from \"../../api-configuration\";\r\nimport {\r\n EventTypes,\r\n FacebookApi,\r\n FacebookPostDto,\r\n ObjectTypes,\r\n} from \"../../lib-api\";\r\nimport { Navigation, Pagination, Autoplay, Lazy } from \"swiper\";\r\nimport { trackGaEvent } from \"../../util/gtm\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { trackVoresKpi } from \"../../features/event-tracking\";\r\nimport { WrappedSwiper } from \"./wrapped-swiper\";\r\nimport { ellipsize } from \"../../util/helpers\";\r\n\r\nconst Label = styled(\"span\")`\r\n display: inline-block;\r\n background-color: #d03822;\r\n color: #fcfcfc;\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 18px;\r\n text-transform: uppercase;\r\n padding: 4px 6px;\r\n letter-spacing: 0.03rem;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n z-index: 1;\r\n`;\r\n\r\nconst facebookApi = new FacebookApi(apiConfiguration);\r\n\r\ntype Posts = FacebookPostDto[] | undefined;\r\n\r\nconst FacebookCarousel: React.FC<{\r\n businessCategoryIds?: string[];\r\n eventType: EventTypes;\r\n objectType: ObjectTypes;\r\n}> = ({ businessCategoryIds, eventType, objectType }) => {\r\n const [posts, setPosts] = useState(undefined);\r\n\r\n useEffect(() => {\r\n (async () => {\r\n try {\r\n const posts = await facebookApi.getFacebookPosts({\r\n getFacebookPostsForm: {\r\n businessCategoryIds,\r\n },\r\n });\r\n setPosts(posts);\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n })();\r\n }, []);\r\n\r\n if (posts !== undefined && posts.length < 3) {\r\n return null;\r\n }\r\n\r\n const trackClick = useCallback(\r\n (postId: string) => {\r\n console.log(\"tracking click\", eventType, postId, objectType);\r\n trackGaEvent(\"on_facebook_carousel_clicked\");\r\n if (eventType && objectType) {\r\n trackVoresKpi(eventType, postId, objectType);\r\n }\r\n },\r\n [eventType, objectType]\r\n );\r\n\r\n return (\r\n <>\r\n \r\n\r\n {posts !== undefined && posts.length > 0 && (\r\n \r\n <>\r\n {posts.map((post, index) => (\r\n \r\n trackClick(post.id)}\r\n >\r\n
\r\n \r\n
\r\n
\r\n
\r\n {post.name}\r\n

\r\n {ellipsize(post.message ?? \"\")}\r\n

\r\n Åbn opslaget\r\n
\r\n \r\n \r\n ))}\r\n \r\n \r\n )}\r\n Annoncørbetalt indhold\r\n \r\n );\r\n};\r\n\r\nconst facebokCarousels = document.getElementsByTagName(\"facebook-carousel\");\r\n\r\nfor (let i = 0; i < facebokCarousels.length; i++) {\r\n const element = facebokCarousels.item(i) as HTMLElement;\r\n const root = createRoot(element);\r\n\r\n const businessCategoryIds = element.dataset.businessCategoryIds\r\n ? JSON.parse(element.dataset.businessCategoryIds)\r\n : null;\r\n\r\n const objectType = element.dataset.objectType;\r\n const eventType = element.dataset.eventType;\r\n\r\n root.render(\r\n \r\n );\r\n}\r\n","import { styled } from \"styled-components\";\r\nimport { Swiper } from \"swiper/react\";\r\n\r\nexport const WrappedSwiper = styled(Swiper)`\r\n width: 100%;\r\n height: 100%;\r\n\r\n .swiper-button-prev,\r\n .swiper-button-next {\r\n color: #a43424 !important;\r\n top: 25% !important;\r\n &::after {\r\n font-size: 30px;\r\n font-weight: 900;\r\n }\r\n }\r\n\r\n .swiper-pagination {\r\n background-color: #fcfcfc;\r\n }\r\n\r\n .swiper-pagination-bullet-active {\r\n opacity: 1;\r\n background: #a43424;\r\n }\r\n\r\n .swiper-slide {\r\n //min-height: 355px;\r\n padding-bottom: 35px;\r\n\r\n /* Center slide text vertically */\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n display: -webkit-flex;\r\n display: flex;\r\n -webkit-box-pack: center;\r\n -ms-flex-pack: center;\r\n -webkit-justify-content: center;\r\n justify-content: center;\r\n -webkit-box-align: start;\r\n -ms-flex-align: start;\r\n -webkit-align-items: start;\r\n align-items: start;\r\n\r\n a {\r\n display: flex;\r\n flex-direction: column;\r\n color: #000;\r\n text-decoration: none;\r\n > div {\r\n &:first-child {\r\n height: 200px;\r\n }\r\n &:last-child {\r\n min-height: 160px;\r\n }\r\n position: relative;\r\n width: 200px;\r\n align-self: center;\r\n img {\r\n display: block;\r\n width: 200px;\r\n height: 200px;\r\n object-fit: cover;\r\n }\r\n }\r\n b {\r\n font-size: 16px;\r\n word-wrap: break-word;\r\n }\r\n p {\r\n font-size: 13px;\r\n max-height: 200px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n /*white-space: nowrap;*/\r\n }\r\n }\r\n }\r\n`;\r\n","declare const window: {\r\n dataLayer: any[];\r\n};\r\n\r\n/* If you add new ones here. Remeber to add them in Google Tag Manager GA4 Event Tag */\r\ntype validEvents =\r\n | \"on_cookie_consent\"\r\n | \"on_company_contact\"\r\n | \"on_facebook_carousel_clicked\"\r\n | \"on_shared_with_friend\"\r\n | \"on_content_task_feedback\"\r\n | \"on_newsletter_subscribe\"\r\n | \"on_external_link_clicked\"\r\n | \"on_questionnaire_submitted\"\r\n | \"on_one_tap\"\r\n | \"on_kpi\"\r\n | \"lead_generated\";\r\n\r\n/* If you add new ones here. Remeber to add them in Google Tag Manager GA4 Event Tag, And in CustomDefinitions IN GA4 */\r\ntype validParameters =\r\n | \"in_section\"\r\n | \"action\"\r\n | \"href\"\r\n | \"variant\"\r\n | \"lead_type\"\r\n | \"customer_id\"\r\n | \"customer_name\"\r\n | \"user_data\";\r\n\r\ntype validUserData = \"email\" | \"phone\" | \"zip\" | \"city\" | \"country\";\r\n\r\nexport function trackGaEvent(\r\n type: validEvents,\r\n parameters?: { [key in validParameters]?: string | number },\r\n userData?: { [key in validUserData]?: string | number },\r\n callback?: (id: string) => void\r\n) {\r\n window.dataLayer = window.dataLayer || [];\r\n //convert parameter keys to dlv_* for Tag Manager.\r\n const convertedParams = convertParams(parameters);\r\n\r\n const event: any = {\r\n event: type,\r\n ...convertedParams,\r\n };\r\n\r\n if (userData) {\r\n event.user_data = userData;\r\n }\r\n\r\n if (callback) {\r\n event.eventCallback = callback;\r\n }\r\n\r\n window.dataLayer.push(event);\r\n}\r\n\r\n/* If you add new ones here. Remeber to add them in Google Tag Manager GA4 DLV */\r\ntype validDataLayerVariables = \"page_type\" | \"category\";\r\n\r\nexport function setDataLayerVariables(parameters: {\r\n [key in validDataLayerVariables]?: string | number;\r\n}) {\r\n window.dataLayer = window.dataLayer || [];\r\n //convert parameter keys to dlv_* for Tag Manager.\r\n const convertedParams = convertParams(parameters);\r\n window.dataLayer.push({\r\n ...convertedParams,\r\n });\r\n}\r\n\r\nfunction convertParams(parameters?: { [key: string]: string | number }) {\r\n return parameters\r\n ? Object.fromEntries(\r\n Object.entries(parameters).map(([key, value]) => [`dlv_${key}`, value])\r\n )\r\n : {};\r\n}\r\n\r\nexport function trackVirtualPageView(url: string) {\r\n window.dataLayer = window.dataLayer || [];\r\n window.dataLayer.push({\r\n event: \"GAVirtualPageView\",\r\n virtualPageUrl: url,\r\n });\r\n}\r\n","export const ellipsize = (input?: string) => {\r\n if (input && input.length > 125) {\r\n return input.substring(0, 125) + \"...\";\r\n }\r\n return input;\r\n};\r\n"],"names":["impressionEventObserver","queue","eventApi","EventApi","apiConfiguration","window","isBot","IntersectionObserver","entries","forEach","entry","isIntersecting","_impressionEventObser","eventElement","target","push","ikpi","dataset","objectId","objectid","objectType","objecttype","unobserve","threshold","pushQueue","setTimeout","_asyncToGenerator","length","toPush","splice","event","trackVoresKpi","e","console","error","_ref3","eventType","trackEvent","eventTypeString","objectTypeString","_x","_x2","_x3","apply","arguments","Label","styled","_templateObject","facebookApi","FacebookApi","FacebookCarousel","_ref","businessCategoryIds","posts","setPosts","useState","undefined","useEffect","getFacebookPosts","getFacebookPostsForm","trackClick","useCallback","postId","log","trackGaEvent","React","className","WrappedSwiper","modules","Navigation","Pagination","Lazy","Autoplay","slidesPerView","breakpoints","navigation","pagination","clickable","loop","preloadImages","lazy","enabled","checkInView","loadPrevNext","autoplay","delay","disableOnInteraction","map","post","index","_post$permalink","_post$message","SwiperSlide","key","concat","permalink","href","rel","onClick","id","alt","imageUrl","name","ellipsize","message","facebokCarousels","document","getElementsByTagName","i","element","item","root","createRoot","JSON","parse","render","Swiper","type","parameters","userData","callback","dataLayer","_objectSpread","Object","fromEntries","value","convertParams","user_data","eventCallback","input","substring"],"sourceRoot":""}