[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"docs-en-\u002Fen\u002Fdocs\u002Fspa":3},{"id":4,"title":5,"body":6,"category":3345,"code_examples":3346,"demos":3346,"description":3347,"extension":3348,"meta":3349,"navigation":3346,"order":3346,"path":3350,"seo":3351,"sitemap":3352,"stem":3354,"tags":3346,"toc":363,"videos":3355,"__hash__":3356},"docsEn\u002Fen\u002Fdocs\u002Fspa.md","Single Page Application Tracking",{"type":7,"value":8,"toc":3301},"minimark",[9,13,17,22,25,52,58,72,77,91,95,100,103,232,236,239,381,385,389,655,659,853,857,1143,1147,1502,1506,1510,1513,1755,1759,1762,2064,2068,2071,2252,2256,2260,2278,2282,2285,2514,2518,2521,2541,2545,2549,2558,2569,2573,2580,2591,2595,2602,2621,2625,2632,2646,2650,2654,2855,2859,2862,3071,3075,3079,3090,3094,3105,3109,3120,3124,3135,3139,3234,3238,3242,3263,3267,3291,3294,3297],[10,11,5],"h1",{"id":12},"single-page-application-tracking",[14,15,16],"p",{},"Single Page Applications (SPAs) present unique challenges for tracking because traditional pageview tracking relies on full page reloads. Learn how to implement proper tracking for SPAs built with React, Vue.js, Angular, and other modern frameworks.",[18,19,21],"h2",{"id":20},"the-spa-tracking-challenge","The SPA Tracking Challenge",[14,23,24],{},"In traditional websites, each page navigation triggers a full page reload, making it easy to track pageviews. However, SPAs use client-side routing where:",[26,27,28,32,43,46,49],"ul",{},[29,30,31],"li",{},"Page content changes dynamically without full reloads",[29,33,34,35,39,40],{},"URLs change via JavaScript ",[36,37,38],"code",{},"pushState","\u002F",[36,41,42],{},"replaceState",[29,44,45],{},"Navigation happens instantly through JavaScript",[29,47,48],{},"Traditional tracking methods miss route changes",[29,50,51],{},"Virtual pageviews are not automatically captured",[14,53,54],{},[55,56,57],"strong",{},"❌ Without SPA Tracking:",[26,59,60,63,66,69],{},[29,61,62],{},"Only initial page load is tracked",[29,64,65],{},"Route changes are invisible to analytics",[29,67,68],{},"User journey appears incomplete",[29,70,71],{},"Conversion attribution is broken",[14,73,74],{},[55,75,76],{},"✅ With Proper SPA Tracking:",[26,78,79,82,85,88],{},[29,80,81],{},"All route changes are tracked as pageviews",[29,83,84],{},"Complete user journey is captured",[29,86,87],{},"Proper conversion attribution maintained",[29,89,90],{},"Accurate engagement metrics",[18,92,94],{"id":93},"konektor-spa-implementation","Konektor SPA Implementation",[96,97,99],"h3",{"id":98},"_1-basic-spa-tracking-setup","1. Basic SPA Tracking Setup",[14,101,102],{},"Initialize Konektor with SPA mode enabled:",[104,105,110],"pre",{"className":106,"code":107,"language":108,"meta":109,"style":109},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Enable SPA tracking in initialization\nkonektor('init', 'WS-YOUR-WORKSPACE-ID', {\n    spa: {\n        enabled: true,\n        autoTrack: true,  \u002F\u002F Automatically track route changes\n        trackHash: false  \u002F\u002F Set to true if using hash routing\n    }\n});\n","javascript","",[36,111,112,121,158,170,185,200,214,220],{"__ignoreMap":109},[113,114,117],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"sHwdD","\u002F\u002F Enable SPA tracking in initialization\n",[113,122,124,128,132,136,140,142,145,148,151,153,155],{"class":115,"line":123},2,[113,125,127],{"class":126},"s2Zo4","konektor",[113,129,131],{"class":130},"sTEyZ","(",[113,133,135],{"class":134},"sMK4o","'",[113,137,139],{"class":138},"sfazB","init",[113,141,135],{"class":134},[113,143,144],{"class":134},",",[113,146,147],{"class":134}," '",[113,149,150],{"class":138},"WS-YOUR-WORKSPACE-ID",[113,152,135],{"class":134},[113,154,144],{"class":134},[113,156,157],{"class":134}," {\n",[113,159,161,165,168],{"class":115,"line":160},3,[113,162,164],{"class":163},"swJcz","    spa",[113,166,167],{"class":134},":",[113,169,157],{"class":134},[113,171,173,176,178,182],{"class":115,"line":172},4,[113,174,175],{"class":163},"        enabled",[113,177,167],{"class":134},[113,179,181],{"class":180},"sfNiH"," true",[113,183,184],{"class":134},",\n",[113,186,188,191,193,195,197],{"class":115,"line":187},5,[113,189,190],{"class":163},"        autoTrack",[113,192,167],{"class":134},[113,194,181],{"class":180},[113,196,144],{"class":134},[113,198,199],{"class":119},"  \u002F\u002F Automatically track route changes\n",[113,201,203,206,208,211],{"class":115,"line":202},6,[113,204,205],{"class":163},"        trackHash",[113,207,167],{"class":134},[113,209,210],{"class":180}," false",[113,212,213],{"class":119},"  \u002F\u002F Set to true if using hash routing\n",[113,215,217],{"class":115,"line":216},7,[113,218,219],{"class":134},"    }\n",[113,221,223,226,229],{"class":115,"line":222},8,[113,224,225],{"class":134},"}",[113,227,228],{"class":130},")",[113,230,231],{"class":134},";\n",[96,233,235],{"id":234},"_2-manual-route-change-tracking","2. Manual Route Change Tracking",[14,237,238],{},"For frameworks that need manual tracking, call the tracking function on route changes:",[104,240,242],{"className":106,"code":241,"language":108,"meta":109,"style":109},"\u002F\u002F Manual pageview tracking\nfunction trackPageView() {\n    konektor('track', 'pageview', {\n        page: window.location.pathname,\n        title: document.title,\n        referrer: document.referrer\n    });\n}\n\n\u002F\u002F Call on every route change\ntrackPageView();\n",[36,243,244,249,263,290,313,330,344,353,358,365,371],{"__ignoreMap":109},[113,245,246],{"class":115,"line":116},[113,247,248],{"class":119},"\u002F\u002F Manual pageview tracking\n",[113,250,251,255,258,261],{"class":115,"line":123},[113,252,254],{"class":253},"spNyl","function",[113,256,257],{"class":126}," trackPageView",[113,259,260],{"class":134},"()",[113,262,157],{"class":134},[113,264,265,268,270,272,275,277,279,281,284,286,288],{"class":115,"line":160},[113,266,267],{"class":126},"    konektor",[113,269,131],{"class":163},[113,271,135],{"class":134},[113,273,274],{"class":138},"track",[113,276,135],{"class":134},[113,278,144],{"class":134},[113,280,147],{"class":134},[113,282,283],{"class":138},"pageview",[113,285,135],{"class":134},[113,287,144],{"class":134},[113,289,157],{"class":134},[113,291,292,295,297,300,303,306,308,311],{"class":115,"line":172},[113,293,294],{"class":163},"        page",[113,296,167],{"class":134},[113,298,299],{"class":130}," window",[113,301,302],{"class":134},".",[113,304,305],{"class":130},"location",[113,307,302],{"class":134},[113,309,310],{"class":130},"pathname",[113,312,184],{"class":134},[113,314,315,318,320,323,325,328],{"class":115,"line":187},[113,316,317],{"class":163},"        title",[113,319,167],{"class":134},[113,321,322],{"class":130}," document",[113,324,302],{"class":134},[113,326,327],{"class":130},"title",[113,329,184],{"class":134},[113,331,332,335,337,339,341],{"class":115,"line":202},[113,333,334],{"class":163},"        referrer",[113,336,167],{"class":134},[113,338,322],{"class":130},[113,340,302],{"class":134},[113,342,343],{"class":130},"referrer\n",[113,345,346,349,351],{"class":115,"line":216},[113,347,348],{"class":134},"    }",[113,350,228],{"class":163},[113,352,231],{"class":134},[113,354,355],{"class":115,"line":222},[113,356,357],{"class":134},"}\n",[113,359,361],{"class":115,"line":360},9,[113,362,364],{"emptyLinePlaceholder":363},true,"\n",[113,366,368],{"class":115,"line":367},10,[113,369,370],{"class":119},"\u002F\u002F Call on every route change\n",[113,372,374,377,379],{"class":115,"line":373},11,[113,375,376],{"class":126},"trackPageView",[113,378,260],{"class":130},[113,380,231],{"class":134},[18,382,384],{"id":383},"framework-specific-implementation","Framework-Specific Implementation",[96,386,388],{"id":387},"react-with-react-router","React with React Router",[104,390,394],{"className":391,"code":392,"language":393,"meta":109,"style":109},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nfunction App() {\n    const location = useLocation();\n\n    useEffect(() => {\n        \u002F\u002F Track pageview on route change\n        if (window.konektor) {\n            window.konektor('track', 'pageview', {\n                page: location.pathname,\n                search: location.search,\n                title: document.title\n            });\n        }\n    }, [location]);\n\n    return \u003CYourApp \u002F>;\n}\n","jsx",[36,395,396,423,445,449,460,477,481,495,500,521,550,565,582,597,607,613,629,634,650],{"__ignoreMap":109},[113,397,398,402,405,408,411,414,416,419,421],{"class":115,"line":116},[113,399,401],{"class":400},"s7zQu","import",[113,403,404],{"class":134}," {",[113,406,407],{"class":130}," useEffect",[113,409,410],{"class":134}," }",[113,412,413],{"class":400}," from",[113,415,147],{"class":134},[113,417,418],{"class":138},"react",[113,420,135],{"class":134},[113,422,231],{"class":134},[113,424,425,427,429,432,434,436,438,441,443],{"class":115,"line":123},[113,426,401],{"class":400},[113,428,404],{"class":134},[113,430,431],{"class":130}," useLocation",[113,433,410],{"class":134},[113,435,413],{"class":400},[113,437,147],{"class":134},[113,439,440],{"class":138},"react-router-dom",[113,442,135],{"class":134},[113,444,231],{"class":134},[113,446,447],{"class":115,"line":160},[113,448,364],{"emptyLinePlaceholder":363},[113,450,451,453,456,458],{"class":115,"line":172},[113,452,254],{"class":253},[113,454,455],{"class":126}," App",[113,457,260],{"class":134},[113,459,157],{"class":134},[113,461,462,465,468,471,473,475],{"class":115,"line":187},[113,463,464],{"class":253},"    const",[113,466,467],{"class":130}," location",[113,469,470],{"class":134}," =",[113,472,431],{"class":126},[113,474,260],{"class":163},[113,476,231],{"class":134},[113,478,479],{"class":115,"line":202},[113,480,364],{"emptyLinePlaceholder":363},[113,482,483,486,488,490,493],{"class":115,"line":216},[113,484,485],{"class":126},"    useEffect",[113,487,131],{"class":163},[113,489,260],{"class":134},[113,491,492],{"class":253}," =>",[113,494,157],{"class":134},[113,496,497],{"class":115,"line":222},[113,498,499],{"class":119},"        \u002F\u002F Track pageview on route change\n",[113,501,502,505,508,511,513,515,518],{"class":115,"line":360},[113,503,504],{"class":400},"        if",[113,506,507],{"class":163}," (",[113,509,510],{"class":130},"window",[113,512,302],{"class":134},[113,514,127],{"class":130},[113,516,517],{"class":163},") ",[113,519,520],{"class":134},"{\n",[113,522,523,526,528,530,532,534,536,538,540,542,544,546,548],{"class":115,"line":367},[113,524,525],{"class":130},"            window",[113,527,302],{"class":134},[113,529,127],{"class":126},[113,531,131],{"class":163},[113,533,135],{"class":134},[113,535,274],{"class":138},[113,537,135],{"class":134},[113,539,144],{"class":134},[113,541,147],{"class":134},[113,543,283],{"class":138},[113,545,135],{"class":134},[113,547,144],{"class":134},[113,549,157],{"class":134},[113,551,552,555,557,559,561,563],{"class":115,"line":373},[113,553,554],{"class":163},"                page",[113,556,167],{"class":134},[113,558,467],{"class":130},[113,560,302],{"class":134},[113,562,310],{"class":130},[113,564,184],{"class":134},[113,566,568,571,573,575,577,580],{"class":115,"line":567},12,[113,569,570],{"class":163},"                search",[113,572,167],{"class":134},[113,574,467],{"class":130},[113,576,302],{"class":134},[113,578,579],{"class":130},"search",[113,581,184],{"class":134},[113,583,585,588,590,592,594],{"class":115,"line":584},13,[113,586,587],{"class":163},"                title",[113,589,167],{"class":134},[113,591,322],{"class":130},[113,593,302],{"class":134},[113,595,596],{"class":130},"title\n",[113,598,600,603,605],{"class":115,"line":599},14,[113,601,602],{"class":134},"            }",[113,604,228],{"class":163},[113,606,231],{"class":134},[113,608,610],{"class":115,"line":609},15,[113,611,612],{"class":134},"        }\n",[113,614,616,619,622,624,627],{"class":115,"line":615},16,[113,617,618],{"class":134},"    },",[113,620,621],{"class":163}," [",[113,623,305],{"class":130},[113,625,626],{"class":163},"])",[113,628,231],{"class":134},[113,630,632],{"class":115,"line":631},17,[113,633,364],{"emptyLinePlaceholder":363},[113,635,637,640,643,647],{"class":115,"line":636},18,[113,638,639],{"class":400},"    return",[113,641,642],{"class":134}," \u003C",[113,644,646],{"class":645},"sBMFI","YourApp",[113,648,649],{"class":134}," \u002F>;\n",[113,651,653],{"class":115,"line":652},19,[113,654,357],{"class":134},[96,656,658],{"id":657},"vuejs-with-vue-router","Vue.js with Vue Router",[104,660,662],{"className":106,"code":661,"language":108,"meta":109,"style":109},"\u002F\u002F In main.js or router.js\nimport router from '.\u002Frouter';\n\nrouter.afterEach((to, from) => {\n    \u002F\u002F Track pageview after route change\n    if (window.konektor) {\n        window.konektor('track', 'pageview', {\n            page: to.path,\n            title: to.meta?.title || document.title,\n            referrer: from.path\n        });\n    }\n});\n",[36,663,664,669,688,692,720,725,742,771,788,818,832,841,845],{"__ignoreMap":109},[113,665,666],{"class":115,"line":116},[113,667,668],{"class":119},"\u002F\u002F In main.js or router.js\n",[113,670,671,673,676,679,681,684,686],{"class":115,"line":123},[113,672,401],{"class":400},[113,674,675],{"class":130}," router ",[113,677,678],{"class":400},"from",[113,680,147],{"class":134},[113,682,683],{"class":138},".\u002Frouter",[113,685,135],{"class":134},[113,687,231],{"class":134},[113,689,690],{"class":115,"line":160},[113,691,364],{"emptyLinePlaceholder":363},[113,693,694,697,699,702,704,706,710,712,714,716,718],{"class":115,"line":172},[113,695,696],{"class":130},"router",[113,698,302],{"class":134},[113,700,701],{"class":126},"afterEach",[113,703,131],{"class":130},[113,705,131],{"class":134},[113,707,709],{"class":708},"sHdIc","to",[113,711,144],{"class":134},[113,713,413],{"class":708},[113,715,228],{"class":134},[113,717,492],{"class":253},[113,719,157],{"class":134},[113,721,722],{"class":115,"line":187},[113,723,724],{"class":119},"    \u002F\u002F Track pageview after route change\n",[113,726,727,730,732,734,736,738,740],{"class":115,"line":202},[113,728,729],{"class":400},"    if",[113,731,507],{"class":163},[113,733,510],{"class":130},[113,735,302],{"class":134},[113,737,127],{"class":130},[113,739,517],{"class":163},[113,741,520],{"class":134},[113,743,744,747,749,751,753,755,757,759,761,763,765,767,769],{"class":115,"line":216},[113,745,746],{"class":130},"        window",[113,748,302],{"class":134},[113,750,127],{"class":126},[113,752,131],{"class":163},[113,754,135],{"class":134},[113,756,274],{"class":138},[113,758,135],{"class":134},[113,760,144],{"class":134},[113,762,147],{"class":134},[113,764,283],{"class":138},[113,766,135],{"class":134},[113,768,144],{"class":134},[113,770,157],{"class":134},[113,772,773,776,778,781,783,786],{"class":115,"line":222},[113,774,775],{"class":163},"            page",[113,777,167],{"class":134},[113,779,780],{"class":130}," to",[113,782,302],{"class":134},[113,784,785],{"class":130},"path",[113,787,184],{"class":134},[113,789,790,793,795,797,799,802,805,807,810,812,814,816],{"class":115,"line":360},[113,791,792],{"class":163},"            title",[113,794,167],{"class":134},[113,796,780],{"class":130},[113,798,302],{"class":134},[113,800,801],{"class":130},"meta",[113,803,804],{"class":134},"?.",[113,806,327],{"class":130},[113,808,809],{"class":134}," ||",[113,811,322],{"class":130},[113,813,302],{"class":134},[113,815,327],{"class":130},[113,817,184],{"class":134},[113,819,820,823,825,827,829],{"class":115,"line":367},[113,821,822],{"class":163},"            referrer",[113,824,167],{"class":134},[113,826,413],{"class":130},[113,828,302],{"class":134},[113,830,831],{"class":130},"path\n",[113,833,834,837,839],{"class":115,"line":373},[113,835,836],{"class":134},"        }",[113,838,228],{"class":163},[113,840,231],{"class":134},[113,842,843],{"class":115,"line":567},[113,844,219],{"class":134},[113,846,847,849,851],{"class":115,"line":584},[113,848,225],{"class":134},[113,850,228],{"class":130},[113,852,231],{"class":134},[96,854,856],{"id":855},"angular-with-router","Angular with Router",[104,858,862],{"className":859,"code":860,"language":861,"meta":109,"style":109},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { NavigationEnd, Router } from '@angular\u002Frouter';\nimport { filter } from 'rxjs\u002Foperators';\n\nexport class AppComponent {\n    constructor(private router: Router) {\n        this.router.events\n            .pipe(filter(event => event instanceof NavigationEnd))\n            .subscribe((event: NavigationEnd) => {\n                \u002F\u002F Track pageview on navigation end\n                if (window.konektor) {\n                    window.konektor('track', 'pageview', {\n                        page: event.url,\n                        title: document.title,\n                        referrer: event.urlAfterRedirects\n                    });\n                }\n            });\n    }\n}\n","typescript",[36,863,864,891,913,917,930,951,963,994,1017,1022,1039,1068,1084,1099,1113,1122,1127,1135,1139],{"__ignoreMap":109},[113,865,866,868,870,873,875,878,880,882,884,887,889],{"class":115,"line":116},[113,867,401],{"class":400},[113,869,404],{"class":134},[113,871,872],{"class":130}," NavigationEnd",[113,874,144],{"class":134},[113,876,877],{"class":130}," Router",[113,879,410],{"class":134},[113,881,413],{"class":400},[113,883,147],{"class":134},[113,885,886],{"class":138},"@angular\u002Frouter",[113,888,135],{"class":134},[113,890,231],{"class":134},[113,892,893,895,897,900,902,904,906,909,911],{"class":115,"line":123},[113,894,401],{"class":400},[113,896,404],{"class":134},[113,898,899],{"class":130}," filter",[113,901,410],{"class":134},[113,903,413],{"class":400},[113,905,147],{"class":134},[113,907,908],{"class":138},"rxjs\u002Foperators",[113,910,135],{"class":134},[113,912,231],{"class":134},[113,914,915],{"class":115,"line":160},[113,916,364],{"emptyLinePlaceholder":363},[113,918,919,922,925,928],{"class":115,"line":172},[113,920,921],{"class":400},"export",[113,923,924],{"class":253}," class",[113,926,927],{"class":645}," AppComponent",[113,929,157],{"class":134},[113,931,932,935,937,940,943,945,947,949],{"class":115,"line":187},[113,933,934],{"class":253},"    constructor",[113,936,131],{"class":134},[113,938,939],{"class":253},"private",[113,941,942],{"class":708}," router",[113,944,167],{"class":134},[113,946,877],{"class":645},[113,948,228],{"class":134},[113,950,157],{"class":134},[113,952,953,956,958,960],{"class":115,"line":202},[113,954,955],{"class":134},"        this.",[113,957,696],{"class":130},[113,959,302],{"class":134},[113,961,962],{"class":130},"events\n",[113,964,965,968,971,973,976,978,981,983,986,989,991],{"class":115,"line":216},[113,966,967],{"class":134},"            .",[113,969,970],{"class":126},"pipe",[113,972,131],{"class":163},[113,974,975],{"class":126},"filter",[113,977,131],{"class":163},[113,979,980],{"class":708},"event",[113,982,492],{"class":253},[113,984,985],{"class":130}," event",[113,987,988],{"class":134}," instanceof",[113,990,872],{"class":645},[113,992,993],{"class":163},"))\n",[113,995,996,998,1001,1003,1005,1007,1009,1011,1013,1015],{"class":115,"line":222},[113,997,967],{"class":134},[113,999,1000],{"class":126},"subscribe",[113,1002,131],{"class":163},[113,1004,131],{"class":134},[113,1006,980],{"class":708},[113,1008,167],{"class":134},[113,1010,872],{"class":645},[113,1012,228],{"class":134},[113,1014,492],{"class":253},[113,1016,157],{"class":134},[113,1018,1019],{"class":115,"line":360},[113,1020,1021],{"class":119},"                \u002F\u002F Track pageview on navigation end\n",[113,1023,1024,1027,1029,1031,1033,1035,1037],{"class":115,"line":367},[113,1025,1026],{"class":400},"                if",[113,1028,507],{"class":163},[113,1030,510],{"class":130},[113,1032,302],{"class":134},[113,1034,127],{"class":130},[113,1036,517],{"class":163},[113,1038,520],{"class":134},[113,1040,1041,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066],{"class":115,"line":373},[113,1042,1043],{"class":130},"                    window",[113,1045,302],{"class":134},[113,1047,127],{"class":126},[113,1049,131],{"class":163},[113,1051,135],{"class":134},[113,1053,274],{"class":138},[113,1055,135],{"class":134},[113,1057,144],{"class":134},[113,1059,147],{"class":134},[113,1061,283],{"class":138},[113,1063,135],{"class":134},[113,1065,144],{"class":134},[113,1067,157],{"class":134},[113,1069,1070,1073,1075,1077,1079,1082],{"class":115,"line":567},[113,1071,1072],{"class":163},"                        page",[113,1074,167],{"class":134},[113,1076,985],{"class":130},[113,1078,302],{"class":134},[113,1080,1081],{"class":130},"url",[113,1083,184],{"class":134},[113,1085,1086,1089,1091,1093,1095,1097],{"class":115,"line":584},[113,1087,1088],{"class":163},"                        title",[113,1090,167],{"class":134},[113,1092,322],{"class":130},[113,1094,302],{"class":134},[113,1096,327],{"class":130},[113,1098,184],{"class":134},[113,1100,1101,1104,1106,1108,1110],{"class":115,"line":599},[113,1102,1103],{"class":163},"                        referrer",[113,1105,167],{"class":134},[113,1107,985],{"class":130},[113,1109,302],{"class":134},[113,1111,1112],{"class":130},"urlAfterRedirects\n",[113,1114,1115,1118,1120],{"class":115,"line":609},[113,1116,1117],{"class":134},"                    }",[113,1119,228],{"class":163},[113,1121,231],{"class":134},[113,1123,1124],{"class":115,"line":615},[113,1125,1126],{"class":134},"                }\n",[113,1128,1129,1131,1133],{"class":115,"line":631},[113,1130,602],{"class":134},[113,1132,228],{"class":163},[113,1134,231],{"class":134},[113,1136,1137],{"class":115,"line":636},[113,1138,219],{"class":134},[113,1140,1141],{"class":115,"line":652},[113,1142,357],{"class":134},[96,1144,1146],{"id":1145},"nextjs-hybrid-spassr","Next.js (Hybrid SPA\u002FSSR)",[104,1148,1150],{"className":391,"code":1149,"language":393,"meta":109,"style":109},"\u002F\u002F In _app.js\nimport { useRouter } from 'next\u002Frouter';\nimport { useEffect } from 'react';\n\nfunction MyApp({ Component, pageProps }) {\n    const router = useRouter();\n\n    useEffect(() => {\n        const handleRouteChange = (url) => {\n            \u002F\u002F Track client-side route changes\n            if (window.konektor) {\n                window.konektor('track', 'pageview', {\n                    page: url,\n                    title: document.title\n                });\n            }\n        };\n\n        router.events.on('routeChangeComplete', handleRouteChange);\n        return () => {\n            router.events.off('routeChangeComplete', handleRouteChange);\n        };\n    }, [router.events]);\n\n    return \u003CComponent {...pageProps} \u002F>;\n}\n",[36,1151,1152,1157,1179,1199,1203,1226,1240,1244,1256,1276,1281,1298,1327,1339,1352,1361,1366,1371,1375,1407,1420,1451,1456,1473,1478,1497],{"__ignoreMap":109},[113,1153,1154],{"class":115,"line":116},[113,1155,1156],{"class":119},"\u002F\u002F In _app.js\n",[113,1158,1159,1161,1163,1166,1168,1170,1172,1175,1177],{"class":115,"line":123},[113,1160,401],{"class":400},[113,1162,404],{"class":134},[113,1164,1165],{"class":130}," useRouter",[113,1167,410],{"class":134},[113,1169,413],{"class":400},[113,1171,147],{"class":134},[113,1173,1174],{"class":138},"next\u002Frouter",[113,1176,135],{"class":134},[113,1178,231],{"class":134},[113,1180,1181,1183,1185,1187,1189,1191,1193,1195,1197],{"class":115,"line":160},[113,1182,401],{"class":400},[113,1184,404],{"class":134},[113,1186,407],{"class":130},[113,1188,410],{"class":134},[113,1190,413],{"class":400},[113,1192,147],{"class":134},[113,1194,418],{"class":138},[113,1196,135],{"class":134},[113,1198,231],{"class":134},[113,1200,1201],{"class":115,"line":172},[113,1202,364],{"emptyLinePlaceholder":363},[113,1204,1205,1207,1210,1213,1216,1218,1221,1224],{"class":115,"line":187},[113,1206,254],{"class":253},[113,1208,1209],{"class":126}," MyApp",[113,1211,1212],{"class":134},"({",[113,1214,1215],{"class":708}," Component",[113,1217,144],{"class":134},[113,1219,1220],{"class":708}," pageProps",[113,1222,1223],{"class":134}," })",[113,1225,157],{"class":134},[113,1227,1228,1230,1232,1234,1236,1238],{"class":115,"line":202},[113,1229,464],{"class":253},[113,1231,942],{"class":130},[113,1233,470],{"class":134},[113,1235,1165],{"class":126},[113,1237,260],{"class":163},[113,1239,231],{"class":134},[113,1241,1242],{"class":115,"line":216},[113,1243,364],{"emptyLinePlaceholder":363},[113,1245,1246,1248,1250,1252,1254],{"class":115,"line":222},[113,1247,485],{"class":126},[113,1249,131],{"class":163},[113,1251,260],{"class":134},[113,1253,492],{"class":253},[113,1255,157],{"class":134},[113,1257,1258,1261,1264,1266,1268,1270,1272,1274],{"class":115,"line":360},[113,1259,1260],{"class":253},"        const",[113,1262,1263],{"class":130}," handleRouteChange",[113,1265,470],{"class":134},[113,1267,507],{"class":134},[113,1269,1081],{"class":708},[113,1271,228],{"class":134},[113,1273,492],{"class":253},[113,1275,157],{"class":134},[113,1277,1278],{"class":115,"line":367},[113,1279,1280],{"class":119},"            \u002F\u002F Track client-side route changes\n",[113,1282,1283,1286,1288,1290,1292,1294,1296],{"class":115,"line":373},[113,1284,1285],{"class":400},"            if",[113,1287,507],{"class":163},[113,1289,510],{"class":130},[113,1291,302],{"class":134},[113,1293,127],{"class":130},[113,1295,517],{"class":163},[113,1297,520],{"class":134},[113,1299,1300,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325],{"class":115,"line":567},[113,1301,1302],{"class":130},"                window",[113,1304,302],{"class":134},[113,1306,127],{"class":126},[113,1308,131],{"class":163},[113,1310,135],{"class":134},[113,1312,274],{"class":138},[113,1314,135],{"class":134},[113,1316,144],{"class":134},[113,1318,147],{"class":134},[113,1320,283],{"class":138},[113,1322,135],{"class":134},[113,1324,144],{"class":134},[113,1326,157],{"class":134},[113,1328,1329,1332,1334,1337],{"class":115,"line":584},[113,1330,1331],{"class":163},"                    page",[113,1333,167],{"class":134},[113,1335,1336],{"class":130}," url",[113,1338,184],{"class":134},[113,1340,1341,1344,1346,1348,1350],{"class":115,"line":599},[113,1342,1343],{"class":163},"                    title",[113,1345,167],{"class":134},[113,1347,322],{"class":130},[113,1349,302],{"class":134},[113,1351,596],{"class":130},[113,1353,1354,1357,1359],{"class":115,"line":609},[113,1355,1356],{"class":134},"                }",[113,1358,228],{"class":163},[113,1360,231],{"class":134},[113,1362,1363],{"class":115,"line":615},[113,1364,1365],{"class":134},"            }\n",[113,1367,1368],{"class":115,"line":631},[113,1369,1370],{"class":134},"        };\n",[113,1372,1373],{"class":115,"line":636},[113,1374,364],{"emptyLinePlaceholder":363},[113,1376,1377,1380,1382,1385,1387,1390,1392,1394,1397,1399,1401,1403,1405],{"class":115,"line":652},[113,1378,1379],{"class":130},"        router",[113,1381,302],{"class":134},[113,1383,1384],{"class":130},"events",[113,1386,302],{"class":134},[113,1388,1389],{"class":126},"on",[113,1391,131],{"class":163},[113,1393,135],{"class":134},[113,1395,1396],{"class":138},"routeChangeComplete",[113,1398,135],{"class":134},[113,1400,144],{"class":134},[113,1402,1263],{"class":130},[113,1404,228],{"class":163},[113,1406,231],{"class":134},[113,1408,1410,1413,1416,1418],{"class":115,"line":1409},20,[113,1411,1412],{"class":400},"        return",[113,1414,1415],{"class":134}," ()",[113,1417,492],{"class":253},[113,1419,157],{"class":134},[113,1421,1423,1426,1428,1430,1432,1435,1437,1439,1441,1443,1445,1447,1449],{"class":115,"line":1422},21,[113,1424,1425],{"class":130},"            router",[113,1427,302],{"class":134},[113,1429,1384],{"class":130},[113,1431,302],{"class":134},[113,1433,1434],{"class":126},"off",[113,1436,131],{"class":163},[113,1438,135],{"class":134},[113,1440,1396],{"class":138},[113,1442,135],{"class":134},[113,1444,144],{"class":134},[113,1446,1263],{"class":130},[113,1448,228],{"class":163},[113,1450,231],{"class":134},[113,1452,1454],{"class":115,"line":1453},22,[113,1455,1370],{"class":134},[113,1457,1459,1461,1463,1465,1467,1469,1471],{"class":115,"line":1458},23,[113,1460,618],{"class":134},[113,1462,621],{"class":163},[113,1464,696],{"class":130},[113,1466,302],{"class":134},[113,1468,1384],{"class":130},[113,1470,626],{"class":163},[113,1472,231],{"class":134},[113,1474,1476],{"class":115,"line":1475},24,[113,1477,364],{"emptyLinePlaceholder":363},[113,1479,1481,1483,1485,1488,1491,1494],{"class":115,"line":1480},25,[113,1482,639],{"class":400},[113,1484,642],{"class":134},[113,1486,1487],{"class":645},"Component",[113,1489,1490],{"class":134}," {...",[113,1492,1493],{"class":130},"pageProps",[113,1495,1496],{"class":134},"} \u002F>;\n",[113,1498,1500],{"class":115,"line":1499},26,[113,1501,357],{"class":134},[18,1503,1505],{"id":1504},"advanced-spa-tracking-features","Advanced SPA Tracking Features",[96,1507,1509],{"id":1508},"virtual-pageview-tracking","Virtual Pageview Tracking",[14,1511,1512],{},"Track dynamic content changes as virtual pageviews:",[104,1514,1516],{"className":106,"code":1515,"language":108,"meta":109,"style":109},"\u002F\u002F Track modal opens as virtual pages\nfunction trackModalView(modalName) {\n    konektor('track', 'pageview', {\n        page: `\u002Fvirtual\u002Fmodal\u002F${modalName}`,\n        title: `Modal: ${modalName}`,\n        virtual: true\n    });\n}\n\n\u002F\u002F Track tab changes\nfunction trackTabChange(tabName) {\n    konektor('track', 'pageview', {\n        page: `${window.location.pathname}#${tabName}`,\n        title: `${document.title} - ${tabName}`,\n        virtual: true\n    });\n}\n",[36,1517,1518,1523,1539,1563,1585,1604,1614,1622,1626,1630,1635,1651,1675,1707,1735,1743,1751],{"__ignoreMap":109},[113,1519,1520],{"class":115,"line":116},[113,1521,1522],{"class":119},"\u002F\u002F Track modal opens as virtual pages\n",[113,1524,1525,1527,1530,1532,1535,1537],{"class":115,"line":123},[113,1526,254],{"class":253},[113,1528,1529],{"class":126}," trackModalView",[113,1531,131],{"class":134},[113,1533,1534],{"class":708},"modalName",[113,1536,228],{"class":134},[113,1538,157],{"class":134},[113,1540,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561],{"class":115,"line":160},[113,1542,267],{"class":126},[113,1544,131],{"class":163},[113,1546,135],{"class":134},[113,1548,274],{"class":138},[113,1550,135],{"class":134},[113,1552,144],{"class":134},[113,1554,147],{"class":134},[113,1556,283],{"class":138},[113,1558,135],{"class":134},[113,1560,144],{"class":134},[113,1562,157],{"class":134},[113,1564,1565,1567,1569,1572,1575,1578,1580,1583],{"class":115,"line":172},[113,1566,294],{"class":163},[113,1568,167],{"class":134},[113,1570,1571],{"class":134}," `",[113,1573,1574],{"class":138},"\u002Fvirtual\u002Fmodal\u002F",[113,1576,1577],{"class":134},"${",[113,1579,1534],{"class":130},[113,1581,1582],{"class":134},"}`",[113,1584,184],{"class":134},[113,1586,1587,1589,1591,1593,1596,1598,1600,1602],{"class":115,"line":187},[113,1588,317],{"class":163},[113,1590,167],{"class":134},[113,1592,1571],{"class":134},[113,1594,1595],{"class":138},"Modal: ",[113,1597,1577],{"class":134},[113,1599,1534],{"class":130},[113,1601,1582],{"class":134},[113,1603,184],{"class":134},[113,1605,1606,1609,1611],{"class":115,"line":202},[113,1607,1608],{"class":163},"        virtual",[113,1610,167],{"class":134},[113,1612,1613],{"class":180}," true\n",[113,1615,1616,1618,1620],{"class":115,"line":216},[113,1617,348],{"class":134},[113,1619,228],{"class":163},[113,1621,231],{"class":134},[113,1623,1624],{"class":115,"line":222},[113,1625,357],{"class":134},[113,1627,1628],{"class":115,"line":360},[113,1629,364],{"emptyLinePlaceholder":363},[113,1631,1632],{"class":115,"line":367},[113,1633,1634],{"class":119},"\u002F\u002F Track tab changes\n",[113,1636,1637,1639,1642,1644,1647,1649],{"class":115,"line":373},[113,1638,254],{"class":253},[113,1640,1641],{"class":126}," trackTabChange",[113,1643,131],{"class":134},[113,1645,1646],{"class":708},"tabName",[113,1648,228],{"class":134},[113,1650,157],{"class":134},[113,1652,1653,1655,1657,1659,1661,1663,1665,1667,1669,1671,1673],{"class":115,"line":567},[113,1654,267],{"class":126},[113,1656,131],{"class":163},[113,1658,135],{"class":134},[113,1660,274],{"class":138},[113,1662,135],{"class":134},[113,1664,144],{"class":134},[113,1666,147],{"class":134},[113,1668,283],{"class":138},[113,1670,135],{"class":134},[113,1672,144],{"class":134},[113,1674,157],{"class":134},[113,1676,1677,1679,1681,1684,1686,1688,1690,1692,1694,1696,1699,1701,1703,1705],{"class":115,"line":584},[113,1678,294],{"class":163},[113,1680,167],{"class":134},[113,1682,1683],{"class":134}," `${",[113,1685,510],{"class":130},[113,1687,302],{"class":134},[113,1689,305],{"class":130},[113,1691,302],{"class":134},[113,1693,310],{"class":130},[113,1695,225],{"class":134},[113,1697,1698],{"class":138},"#",[113,1700,1577],{"class":134},[113,1702,1646],{"class":130},[113,1704,1582],{"class":134},[113,1706,184],{"class":134},[113,1708,1709,1711,1713,1715,1718,1720,1722,1724,1727,1729,1731,1733],{"class":115,"line":599},[113,1710,317],{"class":163},[113,1712,167],{"class":134},[113,1714,1683],{"class":134},[113,1716,1717],{"class":130},"document",[113,1719,302],{"class":134},[113,1721,327],{"class":130},[113,1723,225],{"class":134},[113,1725,1726],{"class":138}," - ",[113,1728,1577],{"class":134},[113,1730,1646],{"class":130},[113,1732,1582],{"class":134},[113,1734,184],{"class":134},[113,1736,1737,1739,1741],{"class":115,"line":609},[113,1738,1608],{"class":163},[113,1740,167],{"class":134},[113,1742,1613],{"class":180},[113,1744,1745,1747,1749],{"class":115,"line":615},[113,1746,348],{"class":134},[113,1748,228],{"class":163},[113,1750,231],{"class":134},[113,1752,1753],{"class":115,"line":631},[113,1754,357],{"class":134},[96,1756,1758],{"id":1757},"e-commerce-spa-tracking","E-commerce SPA Tracking",[14,1760,1761],{},"For SPAs with e-commerce functionality:",[104,1763,1765],{"className":106,"code":1764,"language":108,"meta":109,"style":109},"\u002F\u002F Track product views\nfunction trackProductView(product) {\n    konektor('track', 'view_item', {\n        content_name: product.name,\n        content_ids: [product.id],\n        content_type: 'product',\n        value: product.price,\n        currency: 'IDR'\n    });\n}\n\n\u002F\u002F Track add to cart\nfunction trackAddToCart(product, quantity) {\n    konektor('track', 'add_to_cart', {\n        content_name: product.name,\n        content_ids: [product.id],\n        content_type: 'product',\n        value: product.price * quantity,\n        currency: 'IDR',\n        quantity: quantity\n    });\n}\n",[36,1766,1767,1772,1788,1813,1830,1851,1866,1882,1897,1905,1909,1913,1918,1938,1963,1977,1995,2009,2028,2042,2052,2060],{"__ignoreMap":109},[113,1768,1769],{"class":115,"line":116},[113,1770,1771],{"class":119},"\u002F\u002F Track product views\n",[113,1773,1774,1776,1779,1781,1784,1786],{"class":115,"line":123},[113,1775,254],{"class":253},[113,1777,1778],{"class":126}," trackProductView",[113,1780,131],{"class":134},[113,1782,1783],{"class":708},"product",[113,1785,228],{"class":134},[113,1787,157],{"class":134},[113,1789,1790,1792,1794,1796,1798,1800,1802,1804,1807,1809,1811],{"class":115,"line":160},[113,1791,267],{"class":126},[113,1793,131],{"class":163},[113,1795,135],{"class":134},[113,1797,274],{"class":138},[113,1799,135],{"class":134},[113,1801,144],{"class":134},[113,1803,147],{"class":134},[113,1805,1806],{"class":138},"view_item",[113,1808,135],{"class":134},[113,1810,144],{"class":134},[113,1812,157],{"class":134},[113,1814,1815,1818,1820,1823,1825,1828],{"class":115,"line":172},[113,1816,1817],{"class":163},"        content_name",[113,1819,167],{"class":134},[113,1821,1822],{"class":130}," product",[113,1824,302],{"class":134},[113,1826,1827],{"class":130},"name",[113,1829,184],{"class":134},[113,1831,1832,1835,1837,1839,1841,1843,1846,1849],{"class":115,"line":187},[113,1833,1834],{"class":163},"        content_ids",[113,1836,167],{"class":134},[113,1838,621],{"class":163},[113,1840,1783],{"class":130},[113,1842,302],{"class":134},[113,1844,1845],{"class":130},"id",[113,1847,1848],{"class":163},"]",[113,1850,184],{"class":134},[113,1852,1853,1856,1858,1860,1862,1864],{"class":115,"line":202},[113,1854,1855],{"class":163},"        content_type",[113,1857,167],{"class":134},[113,1859,147],{"class":134},[113,1861,1783],{"class":138},[113,1863,135],{"class":134},[113,1865,184],{"class":134},[113,1867,1868,1871,1873,1875,1877,1880],{"class":115,"line":216},[113,1869,1870],{"class":163},"        value",[113,1872,167],{"class":134},[113,1874,1822],{"class":130},[113,1876,302],{"class":134},[113,1878,1879],{"class":130},"price",[113,1881,184],{"class":134},[113,1883,1884,1887,1889,1891,1894],{"class":115,"line":222},[113,1885,1886],{"class":163},"        currency",[113,1888,167],{"class":134},[113,1890,147],{"class":134},[113,1892,1893],{"class":138},"IDR",[113,1895,1896],{"class":134},"'\n",[113,1898,1899,1901,1903],{"class":115,"line":360},[113,1900,348],{"class":134},[113,1902,228],{"class":163},[113,1904,231],{"class":134},[113,1906,1907],{"class":115,"line":367},[113,1908,357],{"class":134},[113,1910,1911],{"class":115,"line":373},[113,1912,364],{"emptyLinePlaceholder":363},[113,1914,1915],{"class":115,"line":567},[113,1916,1917],{"class":119},"\u002F\u002F Track add to cart\n",[113,1919,1920,1922,1925,1927,1929,1931,1934,1936],{"class":115,"line":584},[113,1921,254],{"class":253},[113,1923,1924],{"class":126}," trackAddToCart",[113,1926,131],{"class":134},[113,1928,1783],{"class":708},[113,1930,144],{"class":134},[113,1932,1933],{"class":708}," quantity",[113,1935,228],{"class":134},[113,1937,157],{"class":134},[113,1939,1940,1942,1944,1946,1948,1950,1952,1954,1957,1959,1961],{"class":115,"line":599},[113,1941,267],{"class":126},[113,1943,131],{"class":163},[113,1945,135],{"class":134},[113,1947,274],{"class":138},[113,1949,135],{"class":134},[113,1951,144],{"class":134},[113,1953,147],{"class":134},[113,1955,1956],{"class":138},"add_to_cart",[113,1958,135],{"class":134},[113,1960,144],{"class":134},[113,1962,157],{"class":134},[113,1964,1965,1967,1969,1971,1973,1975],{"class":115,"line":609},[113,1966,1817],{"class":163},[113,1968,167],{"class":134},[113,1970,1822],{"class":130},[113,1972,302],{"class":134},[113,1974,1827],{"class":130},[113,1976,184],{"class":134},[113,1978,1979,1981,1983,1985,1987,1989,1991,1993],{"class":115,"line":615},[113,1980,1834],{"class":163},[113,1982,167],{"class":134},[113,1984,621],{"class":163},[113,1986,1783],{"class":130},[113,1988,302],{"class":134},[113,1990,1845],{"class":130},[113,1992,1848],{"class":163},[113,1994,184],{"class":134},[113,1996,1997,1999,2001,2003,2005,2007],{"class":115,"line":631},[113,1998,1855],{"class":163},[113,2000,167],{"class":134},[113,2002,147],{"class":134},[113,2004,1783],{"class":138},[113,2006,135],{"class":134},[113,2008,184],{"class":134},[113,2010,2011,2013,2015,2017,2019,2021,2024,2026],{"class":115,"line":636},[113,2012,1870],{"class":163},[113,2014,167],{"class":134},[113,2016,1822],{"class":130},[113,2018,302],{"class":134},[113,2020,1879],{"class":130},[113,2022,2023],{"class":134}," *",[113,2025,1933],{"class":130},[113,2027,184],{"class":134},[113,2029,2030,2032,2034,2036,2038,2040],{"class":115,"line":652},[113,2031,1886],{"class":163},[113,2033,167],{"class":134},[113,2035,147],{"class":134},[113,2037,1893],{"class":138},[113,2039,135],{"class":134},[113,2041,184],{"class":134},[113,2043,2044,2047,2049],{"class":115,"line":1409},[113,2045,2046],{"class":163},"        quantity",[113,2048,167],{"class":134},[113,2050,2051],{"class":130}," quantity\n",[113,2053,2054,2056,2058],{"class":115,"line":1422},[113,2055,348],{"class":134},[113,2057,228],{"class":163},[113,2059,231],{"class":134},[113,2061,2062],{"class":115,"line":1453},[113,2063,357],{"class":134},[96,2065,2067],{"id":2066},"user-authentication-tracking","User Authentication Tracking",[14,2069,2070],{},"Track login\u002Flogout events in SPAs:",[104,2072,2074],{"className":106,"code":2073,"language":108,"meta":109,"style":109},"\u002F\u002F Track user login\nfunction trackLogin(userId, method) {\n    konektor('identify', userId);\n    konektor('track', 'login', {\n        method: method,\n        user_id: userId\n    });\n}\n\n\u002F\u002F Track user logout\nfunction trackLogout() {\n    konektor('track', 'logout');\n    konektor('reset'); \u002F\u002F Clear user identity\n}\n",[36,2075,2076,2081,2102,2124,2149,2160,2170,2178,2182,2186,2191,2202,2227,2248],{"__ignoreMap":109},[113,2077,2078],{"class":115,"line":116},[113,2079,2080],{"class":119},"\u002F\u002F Track user login\n",[113,2082,2083,2085,2088,2090,2093,2095,2098,2100],{"class":115,"line":123},[113,2084,254],{"class":253},[113,2086,2087],{"class":126}," trackLogin",[113,2089,131],{"class":134},[113,2091,2092],{"class":708},"userId",[113,2094,144],{"class":134},[113,2096,2097],{"class":708}," method",[113,2099,228],{"class":134},[113,2101,157],{"class":134},[113,2103,2104,2106,2108,2110,2113,2115,2117,2120,2122],{"class":115,"line":160},[113,2105,267],{"class":126},[113,2107,131],{"class":163},[113,2109,135],{"class":134},[113,2111,2112],{"class":138},"identify",[113,2114,135],{"class":134},[113,2116,144],{"class":134},[113,2118,2119],{"class":130}," userId",[113,2121,228],{"class":163},[113,2123,231],{"class":134},[113,2125,2126,2128,2130,2132,2134,2136,2138,2140,2143,2145,2147],{"class":115,"line":172},[113,2127,267],{"class":126},[113,2129,131],{"class":163},[113,2131,135],{"class":134},[113,2133,274],{"class":138},[113,2135,135],{"class":134},[113,2137,144],{"class":134},[113,2139,147],{"class":134},[113,2141,2142],{"class":138},"login",[113,2144,135],{"class":134},[113,2146,144],{"class":134},[113,2148,157],{"class":134},[113,2150,2151,2154,2156,2158],{"class":115,"line":187},[113,2152,2153],{"class":163},"        method",[113,2155,167],{"class":134},[113,2157,2097],{"class":130},[113,2159,184],{"class":134},[113,2161,2162,2165,2167],{"class":115,"line":202},[113,2163,2164],{"class":163},"        user_id",[113,2166,167],{"class":134},[113,2168,2169],{"class":130}," userId\n",[113,2171,2172,2174,2176],{"class":115,"line":216},[113,2173,348],{"class":134},[113,2175,228],{"class":163},[113,2177,231],{"class":134},[113,2179,2180],{"class":115,"line":222},[113,2181,357],{"class":134},[113,2183,2184],{"class":115,"line":360},[113,2185,364],{"emptyLinePlaceholder":363},[113,2187,2188],{"class":115,"line":367},[113,2189,2190],{"class":119},"\u002F\u002F Track user logout\n",[113,2192,2193,2195,2198,2200],{"class":115,"line":373},[113,2194,254],{"class":253},[113,2196,2197],{"class":126}," trackLogout",[113,2199,260],{"class":134},[113,2201,157],{"class":134},[113,2203,2204,2206,2208,2210,2212,2214,2216,2218,2221,2223,2225],{"class":115,"line":567},[113,2205,267],{"class":126},[113,2207,131],{"class":163},[113,2209,135],{"class":134},[113,2211,274],{"class":138},[113,2213,135],{"class":134},[113,2215,144],{"class":134},[113,2217,147],{"class":134},[113,2219,2220],{"class":138},"logout",[113,2222,135],{"class":134},[113,2224,228],{"class":163},[113,2226,231],{"class":134},[113,2228,2229,2231,2233,2235,2238,2240,2242,2245],{"class":115,"line":584},[113,2230,267],{"class":126},[113,2232,131],{"class":163},[113,2234,135],{"class":134},[113,2236,2237],{"class":138},"reset",[113,2239,135],{"class":134},[113,2241,228],{"class":163},[113,2243,2244],{"class":134},";",[113,2246,2247],{"class":119}," \u002F\u002F Clear user identity\n",[113,2249,2250],{"class":115,"line":599},[113,2251,357],{"class":134},[18,2253,2255],{"id":2254},"testing-spa-tracking","Testing SPA Tracking",[96,2257,2259],{"id":2258},"_1-manual-testing","1. Manual Testing",[2261,2262,2263,2266,2269,2272,2275],"ol",{},[29,2264,2265],{},"Navigate through your SPA using different routes",[29,2267,2268],{},"Check browser network tab for tracking requests",[29,2270,2271],{},"Verify events are sent to Konektor dashboard",[29,2273,2274],{},"Test back\u002Fforward browser buttons",[29,2276,2277],{},"Validate direct URL access tracking",[96,2279,2281],{"id":2280},"_2-automated-testing","2. Automated Testing",[14,2283,2284],{},"Create a testing script to verify SPA tracking:",[104,2286,2288],{"className":106,"code":2287,"language":108,"meta":109,"style":109},"\u002F\u002F SPA Tracking Test Script\nfunction testSPATracking() {\n    const routes = ['\u002F', '\u002Fabout', '\u002Fproducts', '\u002Fcontact'];\n\n    routes.forEach(route => {\n        \u002F\u002F Simulate navigation\n        window.history.pushState({}, '', route);\n\n        \u002F\u002F Trigger route change event\n        window.dispatchEvent(new Event('popstate'));\n\n        \u002F\u002F Check if tracking was called\n        console.log(`Testing route: ${route}`);\n    });\n}\n\ntestSPATracking();\n",[36,2289,2290,2295,2306,2354,2358,2377,2382,2412,2416,2421,2452,2456,2461,2489,2497,2501,2505],{"__ignoreMap":109},[113,2291,2292],{"class":115,"line":116},[113,2293,2294],{"class":119},"\u002F\u002F SPA Tracking Test Script\n",[113,2296,2297,2299,2302,2304],{"class":115,"line":123},[113,2298,254],{"class":253},[113,2300,2301],{"class":126}," testSPATracking",[113,2303,260],{"class":134},[113,2305,157],{"class":134},[113,2307,2308,2310,2313,2315,2317,2319,2321,2323,2325,2327,2330,2332,2334,2336,2339,2341,2343,2345,2348,2350,2352],{"class":115,"line":160},[113,2309,464],{"class":253},[113,2311,2312],{"class":130}," routes",[113,2314,470],{"class":134},[113,2316,621],{"class":163},[113,2318,135],{"class":134},[113,2320,39],{"class":138},[113,2322,135],{"class":134},[113,2324,144],{"class":134},[113,2326,147],{"class":134},[113,2328,2329],{"class":138},"\u002Fabout",[113,2331,135],{"class":134},[113,2333,144],{"class":134},[113,2335,147],{"class":134},[113,2337,2338],{"class":138},"\u002Fproducts",[113,2340,135],{"class":134},[113,2342,144],{"class":134},[113,2344,147],{"class":134},[113,2346,2347],{"class":138},"\u002Fcontact",[113,2349,135],{"class":134},[113,2351,1848],{"class":163},[113,2353,231],{"class":134},[113,2355,2356],{"class":115,"line":172},[113,2357,364],{"emptyLinePlaceholder":363},[113,2359,2360,2363,2365,2368,2370,2373,2375],{"class":115,"line":187},[113,2361,2362],{"class":130},"    routes",[113,2364,302],{"class":134},[113,2366,2367],{"class":126},"forEach",[113,2369,131],{"class":163},[113,2371,2372],{"class":708},"route",[113,2374,492],{"class":253},[113,2376,157],{"class":134},[113,2378,2379],{"class":115,"line":202},[113,2380,2381],{"class":119},"        \u002F\u002F Simulate navigation\n",[113,2383,2384,2386,2388,2391,2393,2395,2397,2400,2403,2405,2408,2410],{"class":115,"line":216},[113,2385,746],{"class":130},[113,2387,302],{"class":134},[113,2389,2390],{"class":130},"history",[113,2392,302],{"class":134},[113,2394,38],{"class":126},[113,2396,131],{"class":163},[113,2398,2399],{"class":134},"{},",[113,2401,2402],{"class":134}," ''",[113,2404,144],{"class":134},[113,2406,2407],{"class":130}," route",[113,2409,228],{"class":163},[113,2411,231],{"class":134},[113,2413,2414],{"class":115,"line":222},[113,2415,364],{"emptyLinePlaceholder":363},[113,2417,2418],{"class":115,"line":360},[113,2419,2420],{"class":119},"        \u002F\u002F Trigger route change event\n",[113,2422,2423,2425,2427,2430,2432,2435,2438,2440,2442,2445,2447,2450],{"class":115,"line":367},[113,2424,746],{"class":130},[113,2426,302],{"class":134},[113,2428,2429],{"class":126},"dispatchEvent",[113,2431,131],{"class":163},[113,2433,2434],{"class":134},"new",[113,2436,2437],{"class":126}," Event",[113,2439,131],{"class":163},[113,2441,135],{"class":134},[113,2443,2444],{"class":138},"popstate",[113,2446,135],{"class":134},[113,2448,2449],{"class":163},"))",[113,2451,231],{"class":134},[113,2453,2454],{"class":115,"line":373},[113,2455,364],{"emptyLinePlaceholder":363},[113,2457,2458],{"class":115,"line":567},[113,2459,2460],{"class":119},"        \u002F\u002F Check if tracking was called\n",[113,2462,2463,2466,2468,2471,2473,2476,2479,2481,2483,2485,2487],{"class":115,"line":584},[113,2464,2465],{"class":130},"        console",[113,2467,302],{"class":134},[113,2469,2470],{"class":126},"log",[113,2472,131],{"class":163},[113,2474,2475],{"class":134},"`",[113,2477,2478],{"class":138},"Testing route: ",[113,2480,1577],{"class":134},[113,2482,2372],{"class":130},[113,2484,1582],{"class":134},[113,2486,228],{"class":163},[113,2488,231],{"class":134},[113,2490,2491,2493,2495],{"class":115,"line":599},[113,2492,348],{"class":134},[113,2494,228],{"class":163},[113,2496,231],{"class":134},[113,2498,2499],{"class":115,"line":609},[113,2500,357],{"class":134},[113,2502,2503],{"class":115,"line":615},[113,2504,364],{"emptyLinePlaceholder":363},[113,2506,2507,2510,2512],{"class":115,"line":631},[113,2508,2509],{"class":126},"testSPATracking",[113,2511,260],{"class":130},[113,2513,231],{"class":134},[96,2515,2517],{"id":2516},"_3-monitoring-tools","3. Monitoring Tools",[14,2519,2520],{},"Use browser extensions to monitor tracking:",[26,2522,2523,2529,2535],{},[29,2524,2525,2528],{},[55,2526,2527],{},"Konektor Debug Tool",": Monitor tracking calls",[29,2530,2531,2534],{},[55,2532,2533],{},"Network Tab",": Inspect tracking requests",[29,2536,2537,2540],{},[55,2538,2539],{},"Console Logs",": Check for tracking errors",[18,2542,2544],{"id":2543},"common-spa-tracking-issues","Common SPA Tracking Issues",[96,2546,2548],{"id":2547},"route-changes-not-tracked","Route Changes Not Tracked",[14,2550,2551,2554,2555,167],{},[55,2552,2553],{},"Symptoms",": Only initial page load tracked, route changes missed\n",[55,2556,2557],{},"Solutions",[26,2559,2560,2563,2566],{},[29,2561,2562],{},"Ensure route change listeners are properly attached",[29,2564,2565],{},"Check that tracking calls are not blocked by errors",[29,2567,2568],{},"Verify framework-specific integration is correct",[96,2570,2572],{"id":2571},"duplicate-pageviews","Duplicate Pageviews",[14,2574,2575,2577,2578,167],{},[55,2576,2553],{},": Same page tracked multiple times\n",[55,2579,2557],{},[26,2581,2582,2585,2588],{},[29,2583,2584],{},"Implement proper debouncing for route changes",[29,2586,2587],{},"Check for multiple route listeners",[29,2589,2590],{},"Use navigation guards to prevent duplicate tracking",[96,2592,2594],{"id":2593},"tracking-fires-too-early","Tracking Fires Too Early",[14,2596,2597,2599,2600,167],{},[55,2598,2553],{},": Page content not loaded when tracking fires\n",[55,2601,2557],{},[26,2603,2604,2607,2618],{},[29,2605,2606],{},"Delay tracking until content is ready",[29,2608,2609,2610,2613,2614,2617],{},"Use ",[36,2611,2612],{},"nextTick"," or ",[36,2615,2616],{},"setTimeout"," for Vue\u002FReact",[29,2619,2620],{},"Wait for DOM updates before tracking",[96,2622,2624],{"id":2623},"history-api-issues","History API Issues",[14,2626,2627,2629,2630,167],{},[55,2628,2553],{},": Browser back\u002Fforward not tracked properly\n",[55,2631,2557],{},[26,2633,2634,2640,2643],{},[29,2635,2636,2637,2639],{},"Listen to ",[36,2638,2444],{}," events for browser navigation",[29,2641,2642],{},"Implement proper history change detection",[29,2644,2645],{},"Test all navigation scenarios",[18,2647,2649],{"id":2648},"performance-optimization","Performance Optimization",[96,2651,2653],{"id":2652},"efficient-tracking-implementation","Efficient Tracking Implementation",[104,2655,2657],{"className":106,"code":2656,"language":108,"meta":109,"style":109},"\u002F\u002F Debounced tracking to prevent spam\nlet trackingTimeout;\nfunction debouncedTrack(event, data) {\n    clearTimeout(trackingTimeout);\n    trackingTimeout = setTimeout(() => {\n        konektor('track', event, data);\n    }, 100);\n}\n\n\u002F\u002F Use in route changes\nrouter.afterEach(() => {\n    debouncedTrack('pageview', {\n        page: window.location.pathname,\n        title: document.title\n    });\n});\n",[36,2658,2659,2664,2674,2694,2708,2726,2751,2763,2767,2771,2776,2792,2809,2827,2839,2847],{"__ignoreMap":109},[113,2660,2661],{"class":115,"line":116},[113,2662,2663],{"class":119},"\u002F\u002F Debounced tracking to prevent spam\n",[113,2665,2666,2669,2672],{"class":115,"line":123},[113,2667,2668],{"class":253},"let",[113,2670,2671],{"class":130}," trackingTimeout",[113,2673,231],{"class":134},[113,2675,2676,2678,2681,2683,2685,2687,2690,2692],{"class":115,"line":160},[113,2677,254],{"class":253},[113,2679,2680],{"class":126}," debouncedTrack",[113,2682,131],{"class":134},[113,2684,980],{"class":708},[113,2686,144],{"class":134},[113,2688,2689],{"class":708}," data",[113,2691,228],{"class":134},[113,2693,157],{"class":134},[113,2695,2696,2699,2701,2704,2706],{"class":115,"line":172},[113,2697,2698],{"class":126},"    clearTimeout",[113,2700,131],{"class":163},[113,2702,2703],{"class":130},"trackingTimeout",[113,2705,228],{"class":163},[113,2707,231],{"class":134},[113,2709,2710,2713,2715,2718,2720,2722,2724],{"class":115,"line":187},[113,2711,2712],{"class":130},"    trackingTimeout",[113,2714,470],{"class":134},[113,2716,2717],{"class":126}," setTimeout",[113,2719,131],{"class":163},[113,2721,260],{"class":134},[113,2723,492],{"class":253},[113,2725,157],{"class":134},[113,2727,2728,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749],{"class":115,"line":202},[113,2729,2730],{"class":126},"        konektor",[113,2732,131],{"class":163},[113,2734,135],{"class":134},[113,2736,274],{"class":138},[113,2738,135],{"class":134},[113,2740,144],{"class":134},[113,2742,985],{"class":130},[113,2744,144],{"class":134},[113,2746,2689],{"class":130},[113,2748,228],{"class":163},[113,2750,231],{"class":134},[113,2752,2753,2755,2759,2761],{"class":115,"line":216},[113,2754,618],{"class":134},[113,2756,2758],{"class":2757},"sbssI"," 100",[113,2760,228],{"class":163},[113,2762,231],{"class":134},[113,2764,2765],{"class":115,"line":222},[113,2766,357],{"class":134},[113,2768,2769],{"class":115,"line":360},[113,2770,364],{"emptyLinePlaceholder":363},[113,2772,2773],{"class":115,"line":367},[113,2774,2775],{"class":119},"\u002F\u002F Use in route changes\n",[113,2777,2778,2780,2782,2784,2786,2788,2790],{"class":115,"line":373},[113,2779,696],{"class":130},[113,2781,302],{"class":134},[113,2783,701],{"class":126},[113,2785,131],{"class":130},[113,2787,260],{"class":134},[113,2789,492],{"class":253},[113,2791,157],{"class":134},[113,2793,2794,2797,2799,2801,2803,2805,2807],{"class":115,"line":567},[113,2795,2796],{"class":126},"    debouncedTrack",[113,2798,131],{"class":163},[113,2800,135],{"class":134},[113,2802,283],{"class":138},[113,2804,135],{"class":134},[113,2806,144],{"class":134},[113,2808,157],{"class":134},[113,2810,2811,2813,2815,2817,2819,2821,2823,2825],{"class":115,"line":584},[113,2812,294],{"class":163},[113,2814,167],{"class":134},[113,2816,299],{"class":130},[113,2818,302],{"class":134},[113,2820,305],{"class":130},[113,2822,302],{"class":134},[113,2824,310],{"class":130},[113,2826,184],{"class":134},[113,2828,2829,2831,2833,2835,2837],{"class":115,"line":599},[113,2830,317],{"class":163},[113,2832,167],{"class":134},[113,2834,322],{"class":130},[113,2836,302],{"class":134},[113,2838,596],{"class":130},[113,2840,2841,2843,2845],{"class":115,"line":609},[113,2842,348],{"class":134},[113,2844,228],{"class":163},[113,2846,231],{"class":134},[113,2848,2849,2851,2853],{"class":115,"line":615},[113,2850,225],{"class":134},[113,2852,228],{"class":130},[113,2854,231],{"class":134},[96,2856,2858],{"id":2857},"lazy-loading-considerations","Lazy Loading Considerations",[14,2860,2861],{},"For SPAs with lazy-loaded routes:",[104,2863,2865],{"className":106,"code":2864,"language":108,"meta":109,"style":109},"\u002F\u002F Track lazy-loaded components\nconst LazyComponent = lazy(() => import('.\u002FMyComponent'));\n\nfunction App() {\n    return (\n        \u003CSuspense fallback={\u003Cdiv>Loading...\u003C\u002Fdiv>}>\n            \u003CLazyComponent \u002F>\n        \u003C\u002FSuspense>\n    );\n}\n\n\u002F\u002F Track in lazy component\nuseEffect(() => {\n    konektor('track', 'component_load', {\n        component: 'MyComponent'\n    });\n}, []);\n",[36,2866,2867,2872,2908,2912,2922,2929,2960,2971,2981,2988,2992,2996,3001,3014,3039,3053,3061],{"__ignoreMap":109},[113,2868,2869],{"class":115,"line":116},[113,2870,2871],{"class":119},"\u002F\u002F Track lazy-loaded components\n",[113,2873,2874,2877,2880,2883,2886,2888,2890,2892,2895,2897,2899,2902,2904,2906],{"class":115,"line":123},[113,2875,2876],{"class":253},"const",[113,2878,2879],{"class":130}," LazyComponent ",[113,2881,2882],{"class":134},"=",[113,2884,2885],{"class":126}," lazy",[113,2887,131],{"class":130},[113,2889,260],{"class":134},[113,2891,492],{"class":253},[113,2893,2894],{"class":134}," import",[113,2896,131],{"class":130},[113,2898,135],{"class":134},[113,2900,2901],{"class":138},".\u002FMyComponent",[113,2903,135],{"class":134},[113,2905,2449],{"class":130},[113,2907,231],{"class":134},[113,2909,2910],{"class":115,"line":160},[113,2911,364],{"emptyLinePlaceholder":363},[113,2913,2914,2916,2918,2920],{"class":115,"line":172},[113,2915,254],{"class":253},[113,2917,455],{"class":126},[113,2919,260],{"class":134},[113,2921,157],{"class":134},[113,2923,2924,2926],{"class":115,"line":187},[113,2925,639],{"class":400},[113,2927,2928],{"class":163}," (\n",[113,2930,2931,2934,2937,2940,2943,2946,2949,2952,2955,2957],{"class":115,"line":202},[113,2932,2933],{"class":134},"        \u003C",[113,2935,2936],{"class":645},"Suspense",[113,2938,2939],{"class":253}," fallback",[113,2941,2942],{"class":134},"={\u003C",[113,2944,2945],{"class":163},"div",[113,2947,2948],{"class":134},">",[113,2950,2951],{"class":130},"Loading...",[113,2953,2954],{"class":134},"\u003C\u002F",[113,2956,2945],{"class":163},[113,2958,2959],{"class":134},">}>\n",[113,2961,2962,2965,2968],{"class":115,"line":216},[113,2963,2964],{"class":134},"            \u003C",[113,2966,2967],{"class":645},"LazyComponent",[113,2969,2970],{"class":134}," \u002F>\n",[113,2972,2973,2976,2978],{"class":115,"line":222},[113,2974,2975],{"class":134},"        \u003C\u002F",[113,2977,2936],{"class":645},[113,2979,2980],{"class":134},">\n",[113,2982,2983,2986],{"class":115,"line":360},[113,2984,2985],{"class":163},"    )",[113,2987,231],{"class":134},[113,2989,2990],{"class":115,"line":367},[113,2991,357],{"class":134},[113,2993,2994],{"class":115,"line":373},[113,2995,364],{"emptyLinePlaceholder":363},[113,2997,2998],{"class":115,"line":567},[113,2999,3000],{"class":119},"\u002F\u002F Track in lazy component\n",[113,3002,3003,3006,3008,3010,3012],{"class":115,"line":584},[113,3004,3005],{"class":126},"useEffect",[113,3007,131],{"class":130},[113,3009,260],{"class":134},[113,3011,492],{"class":253},[113,3013,157],{"class":134},[113,3015,3016,3018,3020,3022,3024,3026,3028,3030,3033,3035,3037],{"class":115,"line":599},[113,3017,267],{"class":126},[113,3019,131],{"class":163},[113,3021,135],{"class":134},[113,3023,274],{"class":138},[113,3025,135],{"class":134},[113,3027,144],{"class":134},[113,3029,147],{"class":134},[113,3031,3032],{"class":138},"component_load",[113,3034,135],{"class":134},[113,3036,144],{"class":134},[113,3038,157],{"class":134},[113,3040,3041,3044,3046,3048,3051],{"class":115,"line":609},[113,3042,3043],{"class":163},"        component",[113,3045,167],{"class":134},[113,3047,147],{"class":134},[113,3049,3050],{"class":138},"MyComponent",[113,3052,1896],{"class":134},[113,3054,3055,3057,3059],{"class":115,"line":615},[113,3056,348],{"class":134},[113,3058,228],{"class":163},[113,3060,231],{"class":134},[113,3062,3063,3066,3069],{"class":115,"line":631},[113,3064,3065],{"class":134},"},",[113,3067,3068],{"class":130}," [])",[113,3070,231],{"class":134},[18,3072,3074],{"id":3073},"best-practices","Best Practices",[96,3076,3078],{"id":3077},"_1-consistent-implementation","1. Consistent Implementation",[26,3080,3081,3084,3087],{},[29,3082,3083],{},"Use the same tracking pattern across all routes",[29,3085,3086],{},"Maintain consistent event naming conventions",[29,3088,3089],{},"Standardize data structure for all events",[96,3091,3093],{"id":3092},"_2-error-handling","2. Error Handling",[26,3095,3096,3099,3102],{},[29,3097,3098],{},"Implement try-catch blocks around tracking calls",[29,3100,3101],{},"Gracefully handle cases where tracking fails",[29,3103,3104],{},"Log tracking errors for debugging",[96,3106,3108],{"id":3107},"_3-privacy-compliance","3. Privacy Compliance",[26,3110,3111,3114,3117],{},[29,3112,3113],{},"Respect user consent for tracking",[29,3115,3116],{},"Implement proper data sanitization",[29,3118,3119],{},"Comply with privacy regulations (GDPR, CCPA)",[96,3121,3123],{"id":3122},"_4-performance-monitoring","4. Performance Monitoring",[26,3125,3126,3129,3132],{},[29,3127,3128],{},"Monitor tracking call response times",[29,3130,3131],{},"Track tracking failure rates",[29,3133,3134],{},"Optimize bundle size impact",[18,3136,3138],{"id":3137},"framework-comparison","Framework Comparison",[3140,3141,3142,3161],"table",{},[3143,3144,3145],"thead",{},[3146,3147,3148,3152,3155,3158],"tr",{},[3149,3150,3151],"th",{},"Framework",[3149,3153,3154],{},"Integration Method",[3149,3156,3157],{},"Complexity",[3149,3159,3160],{},"Best For",[3162,3163,3164,3181,3195,3208,3221],"tbody",{},[3146,3165,3166,3170,3175,3178],{},[3167,3168,3169],"td",{},"React",[3167,3171,3172,3174],{},[36,3173,3005],{}," + router events",[3167,3176,3177],{},"Medium",[3167,3179,3180],{},"Component-based apps",[3146,3182,3183,3186,3189,3192],{},[3167,3184,3185],{},"Vue.js",[3167,3187,3188],{},"Router navigation guards",[3167,3190,3191],{},"Easy",[3167,3193,3194],{},"Progressive enhancement",[3146,3196,3197,3200,3203,3205],{},[3167,3198,3199],{},"Angular",[3167,3201,3202],{},"Router events observable",[3167,3204,3177],{},[3167,3206,3207],{},"Enterprise applications",[3146,3209,3210,3213,3216,3218],{},[3167,3211,3212],{},"Next.js",[3167,3214,3215],{},"Router events",[3167,3217,3191],{},[3167,3219,3220],{},"Hybrid SSR\u002FSPA apps",[3146,3222,3223,3226,3229,3231],{},[3167,3224,3225],{},"Nuxt.js",[3167,3227,3228],{},"Router middleware",[3167,3230,3191],{},[3167,3232,3233],{},"Vue ecosystem",[18,3235,3237],{"id":3236},"support-resources","Support Resources",[96,3239,3241],{"id":3240},"documentation","Documentation",[26,3243,3244,3251,3257],{},[29,3245,3246],{},[3247,3248,3250],"a",{"href":3249},"\u002Fdocs\u002Fapi\u002Fspa","Konektor SPA API Reference",[29,3252,3253],{},[3247,3254,3256],{"href":3255},"\u002Fdocs\u002Fframeworks\u002Freact","React Router Integration",[29,3258,3259],{},[3247,3260,3262],{"href":3261},"\u002Fdocs\u002Fframeworks\u002Fvue","Vue Router Integration",[96,3264,3266],{"id":3265},"getting-help","Getting Help",[26,3268,3269,3279,3285],{},[29,3270,3271,3274,3275],{},[55,3272,3273],{},"Technical Support",": ",[3247,3276,3278],{"href":3277},"mailto:support@konektor.id","support@konektor.id",[29,3280,3281,3284],{},[55,3282,3283],{},"Framework Examples",": GitHub repository",[29,3286,3287,3290],{},[55,3288,3289],{},"Community Forum",": Discuss with other developers",[14,3292,3293],{},":::info Pro Tip\nStart with basic route tracking, test thoroughly, then add virtual pageviews and advanced e-commerce tracking as needed.\n:::",[14,3295,3296],{},":::warning Important\nSPA tracking requires testing all navigation scenarios - direct URL access, browser navigation, and programmatic routing.\n:::",[3298,3299,3300],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":109,"searchDepth":123,"depth":123,"links":3302},[3303,3304,3308,3314,3319,3324,3330,3334,3340,3341],{"id":20,"depth":123,"text":21},{"id":93,"depth":123,"text":94,"children":3305},[3306,3307],{"id":98,"depth":160,"text":99},{"id":234,"depth":160,"text":235},{"id":383,"depth":123,"text":384,"children":3309},[3310,3311,3312,3313],{"id":387,"depth":160,"text":388},{"id":657,"depth":160,"text":658},{"id":855,"depth":160,"text":856},{"id":1145,"depth":160,"text":1146},{"id":1504,"depth":123,"text":1505,"children":3315},[3316,3317,3318],{"id":1508,"depth":160,"text":1509},{"id":1757,"depth":160,"text":1758},{"id":2066,"depth":160,"text":2067},{"id":2254,"depth":123,"text":2255,"children":3320},[3321,3322,3323],{"id":2258,"depth":160,"text":2259},{"id":2280,"depth":160,"text":2281},{"id":2516,"depth":160,"text":2517},{"id":2543,"depth":123,"text":2544,"children":3325},[3326,3327,3328,3329],{"id":2547,"depth":160,"text":2548},{"id":2571,"depth":160,"text":2572},{"id":2593,"depth":160,"text":2594},{"id":2623,"depth":160,"text":2624},{"id":2648,"depth":123,"text":2649,"children":3331},[3332,3333],{"id":2652,"depth":160,"text":2653},{"id":2857,"depth":160,"text":2858},{"id":3073,"depth":123,"text":3074,"children":3335},[3336,3337,3338,3339],{"id":3077,"depth":160,"text":3078},{"id":3092,"depth":160,"text":3093},{"id":3107,"depth":160,"text":3108},{"id":3122,"depth":160,"text":3123},{"id":3137,"depth":123,"text":3138},{"id":3236,"depth":123,"text":3237,"children":3342},[3343,3344],{"id":3240,"depth":160,"text":3241},{"id":3265,"depth":160,"text":3266},"implementation",null,"Learn how to properly implement tracking for Single Page Applications (SPAs) where page navigation doesn't trigger full page reloads.","md",{},"\u002Fen\u002Fdocs\u002Fspa",{"title":5,"description":3347},{"loc":3350,"lastmod":3353},"2026-01-24","en\u002Fdocs\u002Fspa",[],"x8eM1wyfJqILBo4gEYNnjg0Jg3eov1nVAgvFznjsYY4"]