"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "In digital marketing and performance analysis, tracking parameters like UTM parameters and Click IDs play a critical role in better understanding website visitors. In this article, I will discuss how we can store parameters visible in the address bar during a visitor's first visit and use them later. I will share the complete script at the end of the article, but my recommendation is to generate your own code with the help of AI. Small details might be overlooked, but this way, it will be easier for you to grasp the logic." }), "\n", _jsx(_components.h2, { children: "What is the Purpose of This Script?" }), "\n", _jsxs(_components.p, { children: ["This script's main purpose is to capture tracking parameters (e.g., ", _jsx(_components.code, { children: "utm_source" }), ", ", _jsx(_components.code, { children: "utm_medium" }), ", ", _jsx(_components.code, { children: "gclid" }), ", ", _jsx(_components.code, { children: "fbclid" }), ") brought with the URL during a visitor's first visit and store them in local storage and session storage. This way, these data do not get lost as the user navigates your site and can be used when needed. Otherwise, tracking parameters appearing in the address bar on the first page visit will be lost on subsequent page visits."] }), "\n", _jsx(_components.h2, { children: "How Does the Script Work?" }), "\n", _jsx(_components.h3, { children: "1. Defining Which Parameters We Want to Track" }), "\n", _jsx(_components.p, { children: "At the beginning of the code, you define an array of parameters:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "const TRACKED_PARAMS = [\n 'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'gclid', 'fbclid'\n];\n" }) }), "\n", _jsxs(_components.p, { children: ["Here, we have chosen the primary UTM parameters and the two most frequently used ad click IDs. You can include as many parameters as you wish. It's up to you which queries within the URL you want to collect. Let's say you add a parameter ", _jsx(_components.code, { children: "adgroup=generic" }), " to your ad campaign. By adding ", _jsx(_components.code, { children: "'adgroup'" }), " to the array above, you will also store the value corresponding to this query."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "gclid" }), " = Google Click ID"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "fbclid" }), " = Facebook Click ID"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "2. Capture the Parameters" }), "\n", _jsx(_components.p, { children: "When a user arrives at the site from a link, the script searches for these parameters in the URL and collects what it finds into an object. Afterwards, we can store them in two different ways and track separate sources." }), "\n", _jsx(_components.h3, { children: "3. Store with Local Storage for 30 Days" }), "\n", _jsxs(_components.p, { children: ["During the first visit, these parameters are stored in ", _jsx(_components.code, { children: "localStorage" }), " for 30 days. This means that when a user enters the site via a campaign link, this information is not lost. After 30 days, it is automatically cleared. If we were to remove this 30-day limit, these parameters would remain in the browser until the user clears their browser data, but since most ad platforms have an attribution window of 28-30 days, keeping them for this period is beneficial."] }), "\n", _jsx(_components.p, { children: "In the script I shared, you can update the line below to determine the storage duration in local storage." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "const EXPIRY_DAYS = 30; // Enter the storage duration in days here.\nconst LS_EXPIRY_MS = EXPIRY_DAYS * 24 * 60 * 60 * 1000;\n// Calculated in milliseconds in total. Do not make any changes in the 2nd line.\n" }) }), "\n", _jsx(_components.h3, { children: "4. Store with Session Storage for the Duration of the Session" }), "\n", _jsxs(_components.p, { children: ["Additionally, parameters are also written to ", _jsx(_components.code, { children: "sessionStorage" }), ". This allows parameters to be easily accessible until the user closes the tab. In each new session, the initially found parameters are stored again. Here, you can set up a special tracking system to compare the first and last sessions."] }), "\n", _jsx(_components.h3, { children: "5. Easy Access with JavaScript" }), "\n", _jsxs(_components.p, { children: ["If you wish, you can access the captured parameters from other scripts via ", _jsx(_components.code, { children: "window.trackingParams" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "console.log(window.trackingParams);\n" }) }), "\n", _jsx(_components.h2, { children: "Where Can You Use This Script?" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Pre-filling forms:" }), " You can automatically fill in campaign information belonging to the user in registration or contact forms. I will share an article on this soon."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Analytics integration:" }), " You can use it to send your own tracking parameters to tools like Google Analytics, Facebook Pixel."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Personalized content:" }), " You can display personalized content on your website based on the user's traffic source or campaign parameters. Thanks to A/B testing, personalization, and CRO (Conversion Rate Optimization) tools, it is possible to offer special messages and campaign offers to each visitor. This way, you can improve the user experience and increase your conversion rates."] }), "\n"] }), "\n", _jsxs(_components.h2, { children: ["The complete code to add inside ", _jsx(_components.code, { children: "…" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.h2, { children: "Custom HTML code you can use in Google Tag Manager:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "See you in the next article." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };