{"id":60908,"date":"2024-06-20T13:10:06","date_gmt":"2024-06-20T07:40:06","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=60908"},"modified":"2025-08-01T14:37:17","modified_gmt":"2025-08-01T09:07:17","slug":"streamlining-analytics-leveraging-listvars-in-aep-web-sdk","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/streamlining-analytics-leveraging-listvars-in-aep-web-sdk\/","title":{"rendered":"Streamlining Analytics: Leveraging ListVars in AEP Web-SDK"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">ListVar is the most powerful variable in Adobe Analytics. So, we have eVars and props as well to store the data but due to their character limit 100 char for prop and 250 char for eVar,\u00a0 there might be chances of value truncation in case of large data.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ListVars are custom variables that you can use however you\u2019d like. They work similarly to eVars, except they can contain multiple values separated by a delimiter (commonly pipe symbol \u201c|\u201d) in the same hit. List variables can hold 250 delimited values at one time for each visitor, each value of which can hold up to 255 bytes. That\u2019s like 250 eVars put together in a single variable separated by a delimiter!!<\/span><\/p>\n<h2><strong>Example:<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">If on home page we\u2019re collecting A1,B1,C1 as values in listVar1 and on next page or say event we\u2019re collecting values like A2,B2,C2 and followed by X1,Y1,Z1 on next event then overall allocation for listVar1 for that particular Visitor will be (A1,B1,C1,A2,B2,C2,X1,Y1,Z1).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Being such a powerful variable, we have a limited number of listVars, i.e., only 3 <\/span><span style=\"font-weight: 400;\">(ListVar1\/ListVar2\/ListVar3)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To collect data in ListVars via Web-SDK we need to follow only 2 steps:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Configure ListVars in <a href=\"https:\/\/www.tothenew.com\/adobe-analytics\"><strong>Adobe Analytics<\/strong><\/a> Admin Console.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Map ListVars in your data collection via custom code or direct allocation.<\/span><\/li>\n<\/ul>\n<h2><b>Configure ListVars in Adobe Analytics Admin Console<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Admin &gt; Report Suite &gt; Select desired RS &gt; Edit Settings &gt; Conversion Variables &gt; List Variables<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60607 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/ListVars.png\" alt=\"\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/03\/ListVars.png 850w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/ListVars-300x127.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/ListVars-768x325.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/ListVars-624x264.png 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/>\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Configure each list variable based on the requirement. Every field is editable. <\/span><span style=\"font-weight: 400;\">Once we have configured everything here, and enabled desired listVars, Click Save and Exit.<\/span><\/p>\n<h2><b>Map ListVars in your Data collection<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Open Data Collection &gt; Select Desired property &gt; Data Elements &gt; Select Master XDM Data Element &gt; Edit<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60606 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/mapping.png\" alt=\"\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/03\/mapping.png 850w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/mapping-300x127.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/mapping-768x325.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/mapping-624x264.png 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the list Field, map three different data elements which are configured as below and eventually those values get mapped with listVar1\/listVar2\/listVar3 respectively.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Example code for data elements \u201cdl.modifiedValueForList1\u201d to be mapped here, use similar format for other two data elements as well say\u00a0 \u201cdl.modifiedValueForList2\u201d\/ \u201cdl.modifiedValueForList3\u201d.\u00a0\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60906 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/formating.png\" alt=\"\" width=\"426\" height=\"198\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/03\/formating.png 426w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/formating-300x139.png 300w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Code for \u201cdl.valueForList1\u201d is mentioned below, use similar format for other two data elements (dl.valueForList2\/dl.valueForList3) as well.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60610 size-medium\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1-300x127.png\" alt=\"\" width=\"300\" height=\"127\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1-300x127.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1-768x325.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1-624x264.png 624w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1.png 850w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<h2><b>Custom Implementation<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Map below code in Master XDM Data Element which is used to trigger event like \u201cpage view\/ from submit\/ CTA click\u201d<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60608 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE1-1.png\" alt=\"\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE1-1.png 850w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE1-1-300x127.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE1-1-768x325.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE1-1-624x264.png 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><strong>NOTE:<\/strong> Here \u201cvalueForList1\/valueForList2\/valueForList3\u201d are data elements that fetch value from data layer and break each value based on delimiter and assign it into an array.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Code for \u201cvalueForList1\u201d is mentioned below, use similar format for other two data elements as well.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-60610\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1-300x127.png\" alt=\"\" width=\"300\" height=\"127\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1-300x127.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1-768x325.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1-624x264.png 624w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/DE-1.png 850w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Create a function in \u201c_experience (websdk)\u201d or similar data element to map values.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60907 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/formated2-1.png\" alt=\"\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/03\/formated2-1.png 850w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/formated2-1-300x127.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/formated2-1-768x325.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/03\/formated2-1-624x264.png 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<h2>Conclusion<\/h2>\n<p><span style=\"font-weight: 400;\">Using above-mentioned code and mapping strategy, we can collect data in listVars wherever we want to, be it page view\/ form Submit\/ Click to action events or any other. <\/span><span style=\"font-weight: 400;\">So in any rule wherever your master XDM data element is mapped, based on that rule\u2019s condition listVar\u2019s data is being collected.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep following us for more such updates. Happy Tagging!\u00a0<\/span><\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>ListVar is the most powerful variable in Adobe Analytics. So, we have eVars and props as well to store the data but due to their character limit 100 char for prop and 250 char for eVar,\u00a0 there might be chances of value truncation in case of large data.\u00a0 ListVars are custom variables that you can [&hellip;]<\/p>\n","protected":false},"author":1728,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":102},"categories":[5868],"tags":[5409,5990,4942,5722,5546,2913],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60908"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1728"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=60908"}],"version-history":[{"count":6,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60908\/revisions"}],"predecessor-version":[{"id":73805,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60908\/revisions\/73805"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=60908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=60908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=60908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}