1"use strict";(self["webpackChunkappwork_vue_starter"]=self["webpackChunkappwork_vue_starter"]||[]).push([[8774],{9925:function(t,e,i){i.r(e),i.d(e,{default:function(){return H}});var s=function(){var t=this,e=t._self._c;return e("div",[e("div",{staticClass:"row flex-nowrap"},t._l(t.views,function(i,s){return e("field-metrics",{key:i,staticClass:"col field-metrics-item",style:{width:(100/t.views).toPrecision(2)+"%"},attrs:{compare:{index:s,dateAdded:i,add:t.add,remove:t.remove,length:t.length},"data-name":"fieldMetrics"}})}),1)])},a=[],r=i(2566),o=function(){var t=this,e=t._self._c;return e("div",[e("div",{staticClass:"mb-3 d-flex justify-content-between align-items-end"},[e("h4",{staticClass:"font-weight-bold m-0",class:{invisible:!!t.compare.index}},[e("span",{staticClass:"text-muted font-weight-light"},[t._v("Insights")]),t._v(" "),e("span",{staticClass:"material-icons md-14 arrow-east"},[t._v("east")]),t._v(" Field metrics\n ")]),t._v(" "),t.data&&t.data.period&&t.data.period.length>0?e("div",[e("div",{staticClass:"text-primary font-weight-bold cursor-pointer",on:{click:function(e){return t.compare.add(t.compare.index)}}},[t._v("\n compare form \n "),t._m(0)]),t._v(" "),t.compare.length()>1?e("div",{staticClass:"position-absolute cursor-pointer",staticStyle:{right:"15px",top:"40px","z-index":"1024"},on:{click:function(e){return t.compare.remove(t.compare.index)}}},[e("span",{staticClass:"material-icons",staticStyle:{color:"var(--secondary)","font-size":"20px"}},[t._v("close")])]):t._e()]):t._e()]),t._v(" "),e("filters",{ref:"filters",attrs:{dimensions:t.dimensions},on:{input:t.reload,dateChange:function(e){return t.loadDimensions(!0)},formChange:function(e){return t.loadDimensions(!0)}},scopedSlots:t._u([{key:"buttons",fn:function(){return[(t.$root.hasRole("admin.internal")||t.$root.hasRole("ai.analysis"))&&t.data&&t.data.form&&t.data.form[0]&&t.$root.client&&t.$refs.filters&&t.$refs.filters.dates?e("AiAnalysisButton",{attrs:{client:t.$root.client,form:t.data.formData[0],from:t.$refs.filters.dates.from,to:t.$refs.filters.dates.to}}):t._e()]},proxy:!0}])}),t._v(" "),t.data&&t.fieldMetricsData&&t.fieldMetricsData.length>0?[e("div",{ref:"fieldMetrics",staticClass:"card mb-3 metrics-table",attrs:{id:"fieldMetrics","data-name":"fieldMetricsSection"}},[e("div",{staticStyle:{"background-size":"100% 100%","background-repeat":"no-repeat","min-width":"1700px",width:"100%",height:"236px",position:"absolute",left:"0",top:"0"},style:{"background-image":`url('${t.bgImage2point(1,(t.fieldMetricsData[0].interactions-(t.fieldMetricsData[0].interactions-t.data.form[0].starts)/2)/t.data.form[0][t.toggleStarts?"starts":"sessions"])}')`}}),t._v(" "),e("div",{staticClass:"d-flex p-3",staticStyle:{position:"relative",height:"236px"}},[e("div",{staticClass:"flex-fill"},[e("i",{staticClass:"material-icons display-4 text-primary"},[t._v("timeline")]),t._v(" "),e("div",{staticClass:"font-weight-bold"},[t._v("Sessions "),t.filtersApplied?e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"material-icons filter",attrs:{title:"Not all data is shown as there are one or more filters applied"}},[t._v("filter_alt")]):t._e()]),t._v(" "),e("div",{staticClass:"font-weight-bolder letter-spacing-1px text-primary text-xlarge"},[t._v(t._s(t._f("numeral")(t.data.form[0].sessions)))]),t._v(" "),t.data.form[0].start_rate<100?e("div",{staticStyle:{color:"#AEAEAE"}},[t._v(t._s(t._f("numeral")(t.data.form[0].starts))+" visitors or "+t._s(t.data.form[0].start_rate)+"% started"),e("br"),t._v("interacting with the form")]):e("div",{staticStyle:{color:"#AEAEAE"}},[t._v("All visitors started interacting with the form")])]),t._v(" "),e("div",{staticClass:"text-center pt-4 pb-5",staticStyle:{width:"250px"}},[e("span",{staticClass:"badge badge-pill text-white bg-primary text-uppercase",staticStyle:{transform:"scale(0.8)"}},[t._v("initial abandoners")]),t._v(" "),e("div",{staticClass:"font-weight-bolder letter-spacing-1px text-primary text-xlarge"},[e("i",{staticClass:"material-icons",staticStyle:{"font-size":"18px","vertical-align":"middle"}},[t._v("south")]),t._v("\n "+t._s(t._f("numeral")((t.data.form[0].sessions-t.data.form[0].starts)/t.data.form[0].sessions,"0,0.0%"))+"\n ")]),t._v(" "),e("span",{staticStyle:{color:"#AEAEAE"}},[t._v("\n "+t._s(t._f("numeral")(t.data.form[0].sessions-t.data.form[0].starts))+" visitors left the page"),e("br"),t._v("without interacting with the form\n ")]),t._v(" "),t.isOverflown()?e("div",{staticClass:"mt-3 small text-primary text-right al
1ign-text-bottom"},[t._v("Scroll right for more insights "),e("span",{staticClass:"material-icons md-14 arrow-east"},[t._v("east")])]):t._e()])]),t._v(" "),e("div",{ref:"fieldMetricsHeaderAnchor",staticClass:"fieldMetricsHeaderAnchor"}),t._v(" "),e("div",{ref:"fieldMetricsHeader",staticClass:"fieldMetricsHeader",class:{"fieldMetricsHeader--fixed":t.stickyHeader.isActive,"fieldMetricsFirstColumn--scrolled":t.fieldMetricsHasHorizontalScroll},staticStyle:{"font-size":"10.4px","margin-top":"-24px",color:"#AEAEAE","white-space":"nowrap","min-width":"max-content"},style:t.fieldMetricsHeaderStyle},[e("div",{staticClass:"d-flex font-weight-bold text-center p-1 fieldMetricsHeaderContent fieldMetricsRow",class:{"fieldMetricsFirstColumn--scrolled":t.fieldMetricsHasHorizontalScroll},staticStyle:{"padding-left":"0 !important"},style:t.fieldMetricsHeaderContentStyle},[e("div",{staticClass:"flex-fill text-right fieldMetricsFirstColumn fieldMetricsHeaderFirstColumn pr-2",class:{"fieldMetricsFirstColumn--scrolled":t.fieldMetricsHasHorizontalScroll},staticStyle:{"min-width":"300px"},style:t.fieldMetricsHeaderFirstColumnStyle},[e("span",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],attrs:{title:"Fields are displayed in the order how the average user fills in your form"}},[t._v("FORM FIELD")])]),t._v(" "),"undefined"!==typeof t.$route.query.verbosity?e("div",{staticStyle:{"min-width":"200px"}},[t._v("\n FIELD INFO\n ")]):t._e(),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticStyle:{"min-width":"150px"},attrs:{title:"An interaction is defined as starting to fill out your form (fill a field, change a checkbox/dropbown/etc). Selecting or moving between fields without changing its data is not considered as a start-activity."}},[t._v("\n INTERACTIONS\n ")]),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticStyle:{"min-width":"150px"},attrs:{title:"The last field that was changed by a visitor that did not convert."}},[t._v("\n DROPOFFS\n ")]),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticStyle:{"min-width":"150px"},attrs:{title:"The average amount of time that visitors need to fill-in and correct your field."}},[t._v("\n INTERACTION TIME\n ")]),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticStyle:{"min-width":"150px"},attrs:{title:"The average amount of time that visitors spend on your form before moving on without filling out the field(s). This includes any hesitation, searching for what to do next, etc."}},[t._v("\n HESITATION TIME\n ")]),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticStyle:{"min-width":"150px"},attrs:{title:"A correction is only considered valid when a visitor revisits a field after making an initial change."}},[t._v("\n CORRECTIONS\n ")]),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticStyle:{"min-width":"150px"},attrs:{title:"The amount of visitors that received an error on this field."}},[t._v("\n ERRORS\n ")]),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticStyle:{"min-width":"150px"},attrs:{title:"The amount of times autofill or autocomplete was used for filling in your field."}},[t._v("\n AUTOFILLS\n ")]),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticStyle:{"min-width":"150px"},attrs:{title:"The amount of visitors that rage clicked this field."}},[t._v("\n RAGE CLICKS\n ")]),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticStyle:{"min-width":"150px"},attrs:{title:"The amount of times visitors ignored or skipped your field by not interacting with it."}},[t._v("\n BLANKS\n ")]),t._v(" "),e("div",{staticStyle:{"min-width":"50px"}},[t._v("\n  \n ")])])]),t._v(" "),t.stickyHeader.isActive?e("div",{staticClass:"fieldMetricsHeaderSpacer",style:{height:`${t.stickyHeader.spacerHeight}px`}}):t._e(),t._v(" "),t._l(t.fieldMetricsData,function(i,s){return e("div",{key:s,staticClass:"metrics-rows",class:i.isGroup?"isGroup":""}
1,[e("div",{ref:`field-${i.element.id}`,refInFor:!0,staticClass:"d-flex text-center cursor-pointer fieldMetricsRow",staticStyle:{"background-size":"100% 100%","background-repeat":"no-repeat"},style:{"background-image":`url('${t.bgImage3point((i.prev.interactions-(i.prev.interactions-i.interactions)/2)/t.data.form[0][t.toggleStarts?"starts":"sessions"],i.interactions/t.data.form[0][t.toggleStarts?"starts":"sessions"],(i.next.interactions-(i.next.interactions-i.interactions)/2)/t.data.form[0][t.toggleStarts?"starts":"sessions"])}')`},on:{click:function(e){!i.isGroup&&(t.details.expanded=t.details.expanded!==s?s:null)||i.isGroup&&t.toggleElementGroup(i.form_element_group_hash)}}},[e("div",{staticClass:"flex-fill text-right text-primary font-weight-bolder letter-spacing-1px fieldMetricsFirstColumn",class:{"fieldMetricsFirstColumn--scrolled":t.fieldMetricsHasHorizontalScroll,"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{height:"68px"},style:{minWidth:"300px"}},[!1===i.collapsed?e("div",{staticClass:"position-absolute",staticStyle:{width:"4px",height:"68px",left:"0",top:"0"},style:{"background-color":i.rowBorderColor}}):t._e(),t._v(" "),e("div",{staticClass:"metrics-rows-item"},[e("span",{staticClass:"ellide-name",style:!i.isGroup&&i.form_element_group_hash?"font-size: 0.75rem; padding-right: 2rem;":""},[i.isGroup||"ACTIVE"===i.element?.status?t._e():e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"ion ion-md-eye-off text-secondary",attrs:{title:"Field was hidden during form setup"}}),t._v(" "),e("span",{class:{"text-secondary":!i.isGroup&&"ACTIVE"!==i.element?.status},attrs:{id:i.element?.id??i.element?.name}},[t._v("\n "+t._s(i.element?i.element.display_name:"")+"\n ")]),t._v(" "),e("span",{staticClass:"pr-2"},[i.isGroup?e("button",{staticClass:"btn btn-create btn-sm pointer-events-disabled",staticStyle:{padding:"0 2px","line-height":"0.65rem","vertical-align":"text-top",width:"16px",height:"16px","margin-right":"1px"}},[e("span",{staticClass:"font-weight-light"},[t._v(t._s(i.collapsed?"+":"-"))])]):e("span",[e("img",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip",value:{delay:250},expression:"{ delay: 250 }"}],staticStyle:{"vertical-align":"bottom"},style:"ACTIVE"!==i.element?.status?"filter: grayscale(1);":"",attrs:{width:"24",height:"24",src:t.elementTypes[i.element.form_element_type_hash]?.logo_url||t.elementTypePlaceholder,alt:t.elementTypes[i.element.form_element_type_hash]?.display_name||"",title:t.elementTypes[i.element.form_element_type_hash]?.description||""}})])])]),t._v(" "),i.isGroup?t._e():e("b-tooltip",{attrs:{target:i.element?.id??i.element?.name,placement:"left",triggers:"hover"}},[t._v("\n Fields are displayed in the order how the average user fills in your form\n ")])],1),t._v(" "),s===t.fieldMetricsData.length-1&&(t.hiddenFields.length||t.showHiddenFields)?e("div",{staticClass:"cursor-pointer small text-secondary",staticStyle:{position:"absolute",bottom:"-28px",right:"0"},on:{click:function(e){e.stopPropagation(),t.showHiddenFields=!t.showHiddenFields}}},[e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"ion ion-md-eye-off text-secondary",staticStyle:{color:"var(--secondary) !important"},attrs:{title:"Field was hidden during form setup"}}),t._v("\n "+t._s(t.showHiddenFields?"Hide":"Show")+" "+t._s(t.hiddenFields.length)+" hidden "+t._s(t.hiddenFields.length>1?"fields":"field")+"\n ")]):t._e()]),t._v(" "),"undefined"!==typeof t.$route.query.verbosity?e("div",{staticClass:"d-flex flex-column justify-content-center small",class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"200px",height:"68px"}},[e("div",[e("b",[t._v("Type:")]),t._v(" "+t._s(t.elementTypes[i.element.form_element_type_hash]?.name||""))]),t._v(" "),i.element.category?e("div",[e("b",[t._v("Categorisation:")]),t._v(" "+t._s(i.element.category?.name))]):t._e()]):t._e(),t._v(" "),e("div",{class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"150px",height:"68px"}},[e("div",{staticClass:"metrics-rows-item"},[e("b",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip",value:t.data.form[0][t.toggleStarts?"starts":"sessions"]&&t.$options.filters.numeral(i.interactions/t.data.form[0][t.toggleStarts?"starts":"sessions"],"0,0.0%"),expression:"data.form[0][toggleStarts ? 'starts' : 'sessions'] && $options.filters.numeral(item.interactions / data.form[0][toggleStarts ? 'starts' : 'sessions'], '0,0.0%')"}]},[t._v(t._s(i.interactions))])])]),t._v(" "),e("div",{class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"150px",height:"68px"}},[e("div",{staticClass:"metrics-rows-item"},[e("div",{staticClass:"letter-spacing-1px font-weight-bolder letter-spacing-1px"},[i.dropoffs&&t.getSessionRecordingsForElement(i.element)?e("router-link",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip",value:{delay:600},expression:"{ delay: 600 }"}],attrs:{to:t.$refs.filters.routeBuilder({name:"session-replays-for-form",params:{id:t.$refs.filters.item.id},query:{filters:{dropoff_elements:[i.element?.name??i.element?.identifier]}}}),title:"Session replays available"},nativeOn:{click:function(t){return t.stopPropagation()}}},[e("span",{staticClass:"material-symbols-outlined filled cursor-pointer",class:t.hasDropoff(i,.1)?"text-danger":"text-secondary",staticStyle:{"font-size":"0.85rem","vertical-align":"middle"}},[t._v("videocam")])]):e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"material-icons text-secondary d-inline-block",staticStyle:{"font-size":"0.85rem","vertical-align":"middle"},attrs:{title:i.dropoffs+" dropoff"+(i.dropoffs>1||!i.dropoffs?"s":"")}},[t._v("\n logout\n ")]),t._v(" "),e("span",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],attrs:{title:i.dropoffs+" dropoff"+(i.dropoffs>1||!i.dropoffs?"s":"")}},[t._v("\n "+t._s(t._f("numeral")(i.dropoffs/i.interactions,"0,0.0%"))+"\n ")])],1),t._v(" "),i.dropoffs?e("span",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip",value:{delay:600},expression:"{ delay: 600 }"}],staticClass:"small",attrs:{title:i.dropoffs+" visitor"+(i.dropoffs>1?"s":"")+" abandoned the form after changing this field."}},[t._v(t._s(i.dropoffs)+" visitor"+t._s(i.dropoffs>1?"s":"")+" dropped off")]):t._e()])]),t._v(" "),e("div",{staticClass:"font-weight-bolder letter-spacing-1px",class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"150px",height:"68px"}},[e("div",{staticClass:"metrics-rows-item"},[e("i",{staticClass:"material-icons text-secondary d-inline-block",staticStyle:{"font-size":"0.85rem","vertical-align":"middle"}},[t._v("schedule")]),t._v("\n "+t._s(t._f("timeSeconds")(i.interaction_time))+"\n ")])]),t._v(" "),e("div",{staticClass:"font-weight-bolder letter-spacing-1px",class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"150px",height:"68px"}},[e("div",{staticClass:"metrics-rows-item"},[e("i",{staticClass:"material-icons text-secondary d-inline-block",staticStyle:{"font-size":"0.85rem","vertical-align":"middle"}},[t._v("more_time")]),t._v("\n "+t._s(t._f("timeSeconds")(i.hesitation_time))+"\n ")])]),t._v(" "),e("div",{staticClass:"font-weight-bolder letter-spacing-1px",class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"150px",height:"68px"}},[e("div",{staticClass:"metrics-rows-item",class:{"text-danger":i.corrections/i.interactions>.25}},[i.corrections&&t.getSessionRecordingsForElement(i.element)?e("router-link",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip",value:{delay:600},expression:"{ delay: 600 }"}],attrs:{to:t.$refs.filters.routeBuilder({name:"session-replays-for-form",params:{id:t.$refs.filters.item.id},query:{filters:{elements:[i.element?.name??i.element?.identifier],sort_by:[{column:"correction_rate",direction:"DESC",hide_zeroes:!0}]}}}),title:"Session replays available"},nativeOn:{click:function(t){return t.stopPropagation()}}},[e("span",{staticClass:"material-symbols-outlined filled cursor-pointer",class:t.hasDropoff(i,.1)?"text-danger":"text-secondary",staticStyle:{"font-size":"0.85rem","vertical-align":"middle"}},[t._v("videocam")])]):e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"material-icons text-secondary d-inline-block",class:{"text-danger":i.corrections/i.interactions>.25},staticStyle:{"font-size":"0.85rem","vertical-align":"middle"},attrs:{title:i.corrections+" correction"+(i.corrections>1||!i.corrections?"s":"")}},[t._v("\n restart_alt\n ")]),t._v(" "),t.togglePercentages?[t._v(t._s(i.corrections)+" "),e("small",[t._v("of "+t._s(i.interactions))])]:e("span",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],attrs:{title:i.corrections+" correction"+(i.corrections>1||!i.corrections?"s":"")}},[t._v("\n "+t._s(t._f("numeral")(i.corrections/i.interactions,"0,0.0%"))+"\n ")])],2)]),t._v(" "),e("div",{staticClass:"font-weight-bolder letter-spacing-1px",class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"150px",height:"68px"}},[e("div",{staticClass:"metrics-rows-item",class:{"text-danger":i.errors/i.interactions>.25}},[i.errors&&t.getSessionRecordingsForElement(i.element)?e("router-link",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip",value:{delay:600},expression:"{ delay: 600 }"}],attrs:{to:t.$refs.filters.routeBuilder({name:"session-replays-for-form",params:{id:t.$refs.filters.item.id},query:{filters:{elements:[i.element?.name??i.element?.identifier],sort_by:[{column:"error_rate",direction:"DESC",hide_zeroes:!0}]}}}),title:"Session replays available"},nativeOn:{click:function(t){return t.stopPropagation()}}},[e("span",{staticClass:"material-icons cursor-pointer",class:t.hasDropoff(i,.1)||i.errors/i.interactions>.25?"text-danger":"text-secondary",staticStyle:{"font-size":"0.85rem","vertical-align":"middle"}},[t._v("videocam")])]):e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"material-icons text-secondary d-inline-block",class:{"text-danger":i.errors/i.interactions>.25},staticStyle:{"font-size":"0.85rem","vertical-align":"middle"},attrs:{title:i.errors+" error"+(i.errors>1||!i.errors?"s":"")}},[t._v("highlight_off")]),t._v(" "),t.togglePercentages?[t._v(t._s(i.errors)+" "),e("small",[t._v("of "+t._s(i.interactions))])]:e("span",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],attrs:{title:i.errors+" error"+(i.errors>1||!i.errors?"s":"")}},[t._v("\n "+t._s(t._f("numeral")(i.errors?i.errors/i.interactions:"0","0,0.0%"))+"\n ")])],2)]),t._v(" "),e("div",{staticClass:"font-weight-bolder letter-spacing-1px",class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"150px",height:"68px"}},[e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"metrics-rows-item",attrs:{title:i.autofills+" autofill"+(i.autofills>1||!i.autofills?"s":"")}},[e("i",{staticClass:"material-icons text-secondary d-inline-block",staticStyle:{"font-size":"0.85rem","vertical-align":"middle"}}
1,[t._v("auto_fix_high")]),t._v(" "),t.togglePercentages?[t._v(t._s(i.autofills)+" "),e("small",[t._v("of "+t._s(i.interactions))])]:[t._v(t._s(t._f("numeral")(i.autofills/i.interactions,"0,0.0%")))]],2)]),t._v(" "),e("div",{staticClass:"font-weight-bolder letter-spacing-1px",class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"150px",height:"68px"}},[e("div",{staticClass:"metrics-rows-item",class:{"text-danger":i.rage_clicks/i.interactions>.25}},[i.rage_clicks&&t.getSessionRecordingsForElement(i.element)?e("router-link",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip",value:{delay:600},expression:"{ delay: 600 }"}],attrs:{to:t.$refs.filters.routeBuilder({name:"session-replays-for-form",params:{id:t.$refs.filters.item.id},query:{filters:{elements:[i.element?.name??i.element?.identifier],sort_by:[{column:"field_rage_clicks_rate",direction:"DESC",hide_zeroes:!0}]}}}),title:"Session replays available"},nativeOn:{click:function(t){return t.stopPropagation()}}},[e("span",{staticClass:"material-icons cursor-pointer",class:t.hasDropoff(i,.1)||i.rage_clicks/i.interactions>.25?"text-danger":"text-secondary",staticStyle:{"font-size":"0.85rem","vertical-align":"middle"}},[t._v("videocam")])]):e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"material-icons text-secondary d-inline-block",class:{"text-danger":i.rage_clicks/i.interactions>.25},staticStyle:{"font-size":"0.85rem","vertical-align":"middle"},attrs:{title:i.rage_clicks+" rage click"+(i.rage_clicks>1||!i.rage_clicks?"s":"")}},[t._v("ads_click")]),t._v(" "),t.togglePercentages?[t._v(t._s(i.rage_clicks)+" "),e("small",[t._v("of "+t._s(i.interactions))])]:e("span",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],attrs:{title:i.rage_clicks+" rage click"+(i.rage_clicks>1||!i.rage_clicks?"s":"")}},[t._v("\n "+t._s(t._f("numeral")(i.rage_clicks?i.rage_clicks/i.interactions:"0","0,0.0%"))+"\n ")])],2)]),t._v(" "),e("div",{staticClass:"font-weight-bolder letter-spacing-1px",class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"150px",height:"68px"}},[e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"metrics-rows-item",attrs:{title:i.blanks+" blank"+(i.blanks>1||!i.blanks?"s":"")}},[e("i",{staticClass:"material-icons text-secondary d-inline-block",staticStyle:{"font-size":"0.85rem","vertical-align":"middle"}},[t._v("skip_next")]),t._v(" "),t.togglePercentages?[t._v(t._s(i.blanks)+" "),e("small",[t._v("of "+t._s(t.data.form[0].starts))])]:[t._v(t._s(t._f("numeral")(i.blank_rate,"0,0.0%")))]],2)]),t._v(" "),e("div",{class:{"has-dropoff-light":t.hasDropoff(i,.1),"has-dropoff":t.hasDropoff(i,.25),"text-danger":t.hasDropoff(i,.1)},staticStyle:{"min-width":"50px",height:"68px"}},[e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip",value:{delay:600},expression:"{ delay: 600 }"}],staticClass:"metrics-rows-item",attrs:{title:"Detailed trend metrics"}},[e("i",{staticClass:"material-symbols-outlined text-secondary d-inline-block",staticStyle:{"vertical-align":"middle"}},[t._v("monitoring")])])])]),t._v(" "),t.details.expanded===s?e("field-metrics-details",{key:s,staticClass:"metrics-rows-item-details",style:{"border-left":!1===i.collapsed?"4px solid "+i.rowBorderColor:"0"},attrs:{field:i.element,"filters-applied":t.filtersApplied,query:t.details.query,"toggle-starts":t.toggleStarts,"data-name":"fieldMetricsDetailsSection","data-id":i.element.id}}):t._e()],1)}),t._v(" "),e("div",{staticClass:"position-relative"},[e("div",{staticStyle:{"background-size":"100% 100%","background-repeat":"no-repeat",position:"absolute",left:"0",top:"0",height:"203px","min-width":"1700px",width:"100%"},style:{"background-image":`url('${t.bgImage2point((t.fieldMetricsData[t.fieldMetricsData.length-1].interactions-(t.fieldMetricsData[t.fieldMetricsData.length-1].interactions-t.data.form[0].conversions)/2)/t.data.form[0][t.toggleStarts?"starts":"sessions"],t.data.form[0].conversions/t.data.form[0][t.toggleStarts?"starts":"sessions"])}')`}}),t._v(" "),e("div",{staticClass:"d-flex justify-content-between p-3 pt-5",staticStyle:{height:"203px",position:"relative"}}
1,[e("div",[e("i",{staticClass:"material-icons text-primary display-4"},[t._v(t._s(t.nextForm?"keyboard_double_arrow_right":"check"))]),t._v(" "),e("div",{staticClass:"font-weight-bold"},[t._v(t._s(t.nextForm?"Continued to next step":"Conversions")+" "),t.filtersApplied?e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"material-icons filter",attrs:{title:"Not all data is shown as there are one or more filters applied"}},[t._v("filter_alt")]):t._e()]),t._v(" "),e("div",[e("span",{staticClass:"font-weight-bolder letter-spacing-1px text-primary text-xlarge"},[t._v(t._s(t._f("numeral")(t.data.form[0].conversions)))]),t._v(" "),"undefined"!==typeof t.$route.query.verbosity?e("span",{staticClass:"text-secondary",staticStyle:{"font-size":"small","letter-spacing":"normal","font-weight":"normal"}},[t._v("\n or "+t._s(t._f("numeral")(t.data.form[0].conversions/t.data.form[0][t.toggleStarts?"starts":"sessions"],"0,0.0%"))+"\n ")]):t._e()]),t._v(" "),e("div",{staticStyle:{color:"#AEAEAE"}},[t._v("\n "+t._s(t._f("numeral")(t.data.form[0].abandoners))+" abandoned or "+t._s(t.data.form[0].abandonment_rate)+"%"),e("br"),t._v("after starting the form\n "),t.data.form[0].abandoners+t.data.form[0].conversions>t.data.form[0][t.toggleStarts?"starts":"sessions"]?e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"material-icons info",attrs:{title:"Some visitors started filling out the form but left before submitting it. Later in their session they returned and converted."}},[t._v("info")]):t._e()])]),t._v(" "),e("div",{staticClass:"text-left"},[e("span",{staticClass:"material-icons text-primary mt-2 mb-2"},[t._v("highlight_off")]),t._v(" "),e("div",{staticClass:"font-weight-bold"},[t._v("Failed submissions "),t.filtersApplied?e("i",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"material-icons filter",attrs:{title:"Not all data is shown as there are one or more filters applied"}},[t._v("filter_alt")]):t._e()]),t._v(" "),e("div",[e("span",{staticClass:"font-weight-bolder letter-spacing-1px text-primary text-xlarge"},[t._v(t._s(t._f("numeral")(t.data.form[0].submits_failed)))]),t._v(" "),"undefined"!==typeof t.$route.query.verbosity?e("span",{staticClass:"text-secondary",staticStyle:{"font-size":"small","letter-spacing":"normal","font-weight":"normal"}},[t._v("\n or "+t._s(t._f("numeral")(t.data.form[0].submits_failed/t.data.form[0]["starts"],"0,0.0%"))+"\n ")]):t._e()]),t._v(" "),t._m(1)])])])],2),t._v(" "),e("div",{staticClass:"d-flex justify-content-end text-secondary mt-3 mb-2"},[e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"mr-3",attrs:{title:"Shows actual numbers instead of percentages for the 'Browser usage' and 'Device types' insights."}},[e("span",{attrs:{role:"button"},on:{click:function(e){t.togglePercentages=!t.togglePercentages}}},[t._v("Toggle percentages "),e("span",{staticClass:"material-icons",staticStyle:{"font-size":"16px","vertical-align":"sub"}},[t._v("tune")])])]),t._v(" "),e("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],attrs:{title:"Calculates the conversion rate based on starts instead of sessions. This is useful for analysing situations where we have a high amount of sessions but a low amount of starts. For example homepages or pages where the form is hidden by default."}},[e("label",{attrs:{for:"toggleStarts"+t.$props.compare.index,role:"button"}},[t._v("Conversion rate based on starts")]),t._v(" "),e("label",{staticClass:"switcher switcher-sm switcher-success ml-1 mr-0"},[e("input",{directives:[{name:"model",rawName:"v-model",value:t.toggleStarts,expression:"toggleStarts"}],staticClass:"switcher-input",attrs:{type:"checkbox",id:"toggleStarts"+t.$props.compare.index},domProps:{checked:Array.isArray(t.toggleStarts)?t._i(t.toggleStarts,null)>-1:t.toggleStarts},on:{change:[function(e){var i=t.toggleStarts,s=e.target,a=!!s.checked;if(Array.isArray(i)){var r=null,o=t._i(i,r);s.checked?o<0&&(t.toggleStarts=i.concat([r])):o>
1-1&&(t.toggleStarts=i.slice(0,o).concat(i.slice(o+1)))}else t.toggleStarts=a},t.persistToggleStarts]}}),t._v(" "),t._m(2)])])]),t._v(" "),e("div",{staticClass:"text-right"},[t._m(3),t._v(" "),t.data?e("b-dropdown",{staticClass:"m-1 dropdown-menu-right",attrs:{split:"",id:"download",text:"Download",variant:"create"},on:{click:function(e){return t.download("xlsx")}}},[e("b-dropdown-header",[t._v("Field metrics")]),t._v(" "),e("b-dropdown-item",{staticClass:"cursor-pointer",on:{click:function(e){return t.download("xlsx")}}},[e("span",{staticClass:"icon-xlsx-file",staticStyle:{"vertical-align":"text-bottom"}},[t._v("Â ")]),t._v(" Standard dimensions")]),t._v(" "),e("b-dropdown-item",{staticClass:"cursor-pointer",on:{click:function(e){return t.download("xlsx-browser-device-country")}}},[e("span",{staticClass:"icon-xlsx-file",staticStyle:{"vertical-align":"text-bottom"}},[t._v("Â ")]),t._v(" With browser, device and country dimensions")]),t._v(" "),e("b-dropdown-item",{staticClass:"cursor-pointer",on:{click:function(e){return t.download("csv")}}},[e("i",{staticClass:"material-icons",staticStyle:{"font-size":"18px","vertical-align":"sub"}},[t._v("download")]),t._v(" CSV")]),t._v(" "),e("b-dropdown-header",[t._v("Form and field metrics")]),t._v(" "),e("b-dropdown-item",{staticClass:"cursor-pointer",on:{click:function(e){return t.download("xlsx-form-and-field")}}},[e("span",{staticClass:"icon-xlsx-file",staticStyle:{"vertical-align":"text-bottom"}},[t._v("Â ")]),t._v(" Standard dimensions")]),t._v(" "),e("b-dropdown-item",{staticClass:"cursor-pointer",on:{click:function(e){return t.download("xlsx-form-and-field-browser-device-country")}}},[e("span",{staticClass:"icon-xlsx-file",staticStyle:{"vertical-align":"text-bottom"}},[t._v("Â ")]),t._v(" With browser, device and country dimensions")])],1):t._e()],1)]:!1===t.loading?e("div",{staticClass:"card"},[e("div",{staticClass:"card-body"},[t.filtersApplied?e("div",{staticClass:"m-2 text-muted"},[t._v("\n No form starts for the selected filters\n ")]):e("div",{staticClass:"m-2 text-muted"},[t.data&&t.data?.form?[t._v("No insights found for the selected timeframe.")]:t.data?.form?t._e():[t._v("No forms found. To continue, "),e("a",{attrs:{href:"/setup/forms/add"}},[t._v("add")]),t._v(" one now.")]],2)])]):t._e()],2)},l=[function(){var t=this,e=t._self._c;return e("div",{staticClass:"position-absolute",staticStyle:{right:"-9px",top:"3px"}},[e("span",{staticClass:"material-icons",staticStyle:{color:"var(--primary)",rotate:"90deg","font-size":"24px"}},[t._v("turn_right")])])},function(){var t=this,e=t._self._c;return e("div",{staticStyle:{color:"#AEAEAE"}},[t._v("visitors submitted the form"),e("br"),t._v("but did not fill all fields correctly")])},function(){var t=this,e=t._self._c;return e("span",{staticClass:"switcher-indicator"},[e("span",{staticClass:"switcher-yes"}),e("span",{staticClass:"switcher-no"})])},function(){var t=this,e=t._self._c;return e("span",{staticClass:"spinner-border text-primary d-none mr-3",staticStyle:{"vertical-align":"middle",width:"1.5rem",height:"1.5rem"},attrs:{role:"status"}},[e("span",{staticClass:"sr-only"},[t._v("Loading")])])}],n=(i(44114),i(18111),i(22489),i(20116),i(7588),i(61701),i(18237),i(64979),i(67883)),d=function(){var t=this,e=t._self._c;return e("div",{staticClass:"bg-white p-3"},[t.data.fieldDaily&&t.data.fieldDaily.length>0?e("div",{attrs:{"data-name":"fieldMetricsDetailsInteractionsAndTimingsSection"}},[e("div",{staticClass:"row"},[e("div",{staticClass:"col mb-3"},[e("div",{staticClass:"card card-body d-block",attrs:{"data-name":"fieldMetricsDetailsInteractionsSection"}},[e("i",{staticClass:"material-symbols-outlined display-4 text-primary d-block mb-1"},[t._v("timeline")]),t._v(" "),e("h5",{staticClass:"mb-1"},[t._v("Interaction trends")]),t._v("\n How do visitors interact or use your "),e("code",{staticClass:"inline"},[t._v(t._s(t.$props.field.display_name))]),t._v(" field\n "),e("line-chart",{staticClass:"flex-fill overflow-hidden mt-2 mb-2",attrs:{"chart-options":t.lineChartOptionsRates,"chart-data":t.charts.rates,height:250,"data-name":"fieldMetricsDetailsInteractionsGraph"}})],1)]),t._v(" "),e("div",{staticClass:"col mb-3"},[e("div",{staticClass:"card card-body d-block",attrs:{"data-name":"fieldMetricsDetailsTimingsSection"}},[e("i",{staticClass:"material-symbols-outlined display-4 text-primary d-block mb-1"},[t._v("timer")]),t._v(" "),e("h5",{staticClass:"mb-1"},[t._v("Timing trends")]),t._v("\n Time your visitors spend filling out the "),e("code",{staticClass:"inline"},[t._v(t._s(t.$props.field.display_name))]),t._v(" field\n "),e("line-chart",{staticClass:"flex-fill overflow-hidden mt-2 mb-2",attrs:{"chart
1-options":t.lineChartOptionsTimings,"chart-data":t.charts.timings,height:250,"data-name":"fieldMetricsDetailsTimingsGraph"}})],1)])]),t._v(" "),e("ErrorDetails",{attrs:{query:t.query,field:t.field}})],1):t.loading?e("div",{staticClass:"card card-body small text-secondary text-center mb-3"},[t._v("\n Loading trend and error details...\n ")]):t._e(),t._v(" "),e("div",{staticClass:"card"},[e("div",{staticClass:"card-body"},[e("i",{staticClass:"material-symbols-outlined display-4 text-primary d-block mb-1"},[t._v("code_blocks")]),t._v(" "),e("h5",{staticClass:"mb-1"},[t._v("Field information")]),t._v(" "),e("table",{staticClass:"tableTechInfo"},[e("tr",[e("td",[t._v("HTML name")]),t._v(" "),e("td",{on:{click:function(e){return t.$copyText(t.field.name||"-")}}},[e("code",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"inline cursor-pointer",attrs:{title:"Click to copy"}},[t._v(t._s(t.field.name||"-"))])])]),t._v(" "),e("tr",[e("td",[t._v("HTML identifier")]),t._v(" "),e("td",{on:{click:function(e){return t.$copyText(t.field.identifier||"-")}}},[e("code",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"inline cursor-pointer",attrs:{title:"Click to copy"}},[t._v(t._s(t.field.identifier||"-"))])])]),t._v(" "),e("tr",[e("td",[t._v("HTML location")]),t._v(" "),e("td",{on:{click:function(e){return t.$copyText(t.field.qs_identifier||"-")}}},[e("code",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"inline cursor-pointer",attrs:{title:"Click to copy"}},[t._v(t._s(t.field.qs_identifier||"-"))])])]),t._v(" "),e("tr",[e("td",[t._v("Updated date")]),t._v(" "),e("td",{on:{click:function(e){return t.$copyText(t.field.updated_at|t.datetime)}}},[e("code",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"inline cursor-pointer",attrs:{title:"Click to copy"}},[t._v(t._s(t._f("datetime")(t.field.updated_at)))])])]),t._v(" "),e("tr",[e("td",[t._v("ID")]),t._v(" "),e("td",{on:{click:function(e){return t.$copyText(t.field.id)}}},[e("code",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip"}],staticClass:"inline cursor-pointer",attrs:{title:"Click to copy"}},[t._v(t._s(t.field.id))]),t._v(" "),t.canEdit?e("router-link",{staticClass:"btn btn-iso-create mb-1",staticStyle:{"font-size":"0.60rem","vertical-align":"text-top"},attrs:{to:{name:"forms-edit",params:{id:t.$props.field.form_hash}}}},[t._v("\n EDIT FORM\n ")]):t._e()],1)])])])])])},c=[],f=(i(71678),i(37317)),m=i(57237),p=i(77400),h=(i(1036),i(87005));m.t1.register(...m.$L),m.t1.defaults.elements.line.tension=.15,m.t1.defaults.elements.line.borderWidth=2,m.t1.defaults.elements.point.radius=0,m.t1.defaults.scale.grid.drawBorder=!1,m.t1.defaults.animation.duration=window.location.href.includes("src=grafo")?0:1e3;var v={name:"FieldMetricsDetails",components:{LineChart:f.N1,ErrorDetails:p.A},props:["field","filtersApplied","query","toggleStarts","formSessions"],data(){return{data:{loading:!1,fieldDaily:null,formDaily:null}}},computed:{canEdit(){return this.$root.hasRole("admin.internal")||this.$root.hasRole("admin.company")||this.$root.hasRole("configuration.modify")},lineChartOptionsRates(){const t=this.lineChartOptionsDefaults();return t.scales.y.title={display:!0,text:"Rate %"},t.scales.y1.title={display:!0,text:"Interaction rate %"},t.plugins.tooltip.callbacks.label=function(t){var e=t.dataset.label||"";return e.length&&(e+=": "),null!==t.parsed.y&&(e+=t.parsed.y+"%"),e},t},lineChartOptionsTimings(){const t=this.lineChartOptionsDefaults();return t.scales.y.title={display:!0,text:"Seconds"},delete t.scales.y1,t.plugins.tooltip.callbacks.label=function(t){var e=t.dataset.label||"";return e.length&&(e+=": "),null!==t.parsed.y&&(e+=t.parsed.y+"s"),e},t},charts(){return this.data.fieldDaily?{timings:{datasets:[{yAxisID:"y",label:"Interaction time",data:this.data.fieldDaily.map(t=>({x:t.day,y:t.interaction_time})),borderColor:"#007dfd",backgroundColor:"#007dfd",type:"LineWithSharedTooltip",pointHitRadius:25,fill:!1},{yAxisID:"y",label:"Hesitation time",data:this.data.fieldDaily.map(t=>({x:t.day,y:t.hesitation_time})),borderColor:"#FFCC66",backgroundColor:"#FFCC66",type:"LineWithSharedTooltip",pointHitRadius:25,fill:!1}]},rates:{datasets:[{label:"Interaction rate",yAxisID:"y1",data:this.data.fieldDaily.map(t=>({x:t.day,y:Number(t.interactions/(this.formMetric(t.day).sessions||1)*100).toFixed(2)})),borderColor:"#007dfd",backgroundColor:"#007dfd",type:"LineWithSharedTooltip",pointHitRadius:25,fill:!1},{label:"Autofill rate",data:this.data.fieldDaily.map(t=>({x:t.day,y:t.autofill_rate})),borderColor:"#48d8c0",backgroundColor:"#48d8c0",type:"LineWithSharedTooltip",pointHitRadius:25,fill:!1},{label:"Correction rate",data:this.data.fieldDaily.map(t=>({x:t.day,y:t.correction_rate})),borderColor:"#FFCC66",backgroundColor:"#FFCC66",type:"LineWithSharedTooltip",pointHitRadius:25,fill:!1},{label:"Dropoff rate",data:this.data.fieldDaily.map(t=>({x:t.day,y:t.dropoff_rate})),borderColor:"#2E3237",backgroundColor:"#2E3237",type:"LineWithSharedTooltip",pointHitRadius:25,fill:!1},{label:"Error rate",data:this.data.fieldDaily.map(t=>({x:t.day,y:t.error_rate})),borderColor:"#ea8383",backgroundColor:"#ea8383",type:"LineWithSharedTooltip",pointHitRadius:25,fill:!1},{label:"Rage click rate",data:this.data.fieldDaily.map(t=>({x:t.day,y:t.rage_click_rate})),borderColor:"#e83e8c",backgroundColor:"#e83e8c",type:"LineWithSharedTooltip",pointHitRadius:25,fill:!1},{label:"Blank rate",data:this.data.fieldDaily.map(t=>({x:t.day,y:t.blank_rate})),borderColor:"#6610f2",backgroundColor:"#6610f2",type:"LineWithSharedTooltip",pointHitRadius:25,fill:!1}]}}:null}},methods:{lineChartOptionsDefaults(){const t={responsive:!0,maintainAspectRatio:!1,scales:{x:{grid:{display:!1},type:"time",offset:!0,time:{unit:"day",tooltipFormat:"DD"},ticks:{padding:8}},y:{grid:{display:!0},ticks:{suggestedMin:0,color:"#A7A7A7",autoSkipPadding:30}},y1:{position:"right",id:"right-axis",grid:{display:!1},ticks:{suggestedMin:0,color:"#A7A7A7",autoSkipPadding:30}}},plugins:{legend:{position:"bottom",align:"start",labels:{boxWidth:12}},tooltip:{mode:"index",backgroundColor:"rgb(46, 50, 55)",padding:16,cornerRadius:0,caretSize:16,boxPadding:6,bodySpacing:4,titleMarginBottom:12,titleFont:{size:16},callbacks:{}},annotation:{annotations:[]}}},e=structuredClone(t);return e.scales.x.ticks.color=t=>{const e=new Date(t.tick.value).getDay();return 0===e||6===e?"#D7D7D7":"#A7A7A7"},e},formMetric(t){if(!this.data.formDaily?.length)return;if("undefined"===typeof t||!t)return;const e=this.data.formDaily.filter(e=>e.day===t);return e.length?e[0]:{}}},beforeDestroy(){(0,h.n)()},watch:{query:{immediate:!0,async handler(){this.loading=!0;let t=null,e=null;[t,e]=await Promise.all([this.$api.post("/metrics/fields",this.query,this.$root.client.client_hash),this.$api.post("/metrics/forms",this.query,this.$root.client.client_hash)]),this.loading=!1,this.data.formDaily=e.data.metrics,this.data.fieldDaily=t.data.metrics.filter(t=>t.element_name===this.field.name||t.element_name===this.field.identifier).map(t=>{const e=this.formMetric(t.day)?.starts??t.interactions;return{...t,blanks:e-t.interactions,blank_rate:Math.round((e-t.interactions)/(e||1)*1e4)/100}})}}}},u=v,g=i(81656),_=(0,g.A)(u,d,c,!1,null,"1092b5d0",null),y=_.exports,b=i(2854),x=i(28097),w={name:"FieldMetrics",metaInfo:{title:"Field metrics"}
1,components:{FieldMetricsDetails:y,Filters:n.A,AiAnalysisButton:b.A},props:{compare:{type:Object,index:0}},data(){return{data:{formHash:null,form:null,formData:null,period:null,sessionRecordingDimensions:null},fieldMetricsRaw:null,dimensions:{},filtersApplied:!1,formElements:null,loading:!0,details:{expanded:null,query:{}},togglePercentages:!1,toggleStarts:!1,dateFormatter:null,elementGroups:[],elementTypes:{},elementTypePlaceholder:"https://assets.exatom.io/form-element-icons/icon-placeholder.svg",showHiddenFields:!1,stickyHeader:{isActive:!1,left:0,width:0,contentWidth:0,scrollLeft:0,height:0,spacerHeight:0},fieldMetricsScrollElement:null}},computed:{fieldMetricsHasHorizontalScroll(){return this.stickyHeader.scrollLeft>0},fieldMetricsHeaderStyle(){return this.stickyHeader.isActive?{left:`${this.stickyHeader.left}px`,top:"0px",width:`${this.stickyHeader.width}px`}:{}},fieldMetricsHeaderContentStyle(){return this.stickyHeader.isActive?{width:`${this.stickyHeader.width}px`,transform:`translateX(-${this.stickyHeader.scrollLeft}px)`}:{}},fieldMetricsHeaderFirstColumnStyle(){return this.stickyHeader.isActive?{transform:`translateX(${this.stickyHeader.scrollLeft}px)`}:{}},fieldMetricsData(){return this.data.period?.filter(t=>!0===t?.isGroup||this.showHiddenFields||null!==t.element&&"ACTIVE"===t.element.status).filter(t=>"undefined"===typeof t.collapsed||!0===t?.isGroup||!1===t.collapsed).map(this.recalculatePrevNextFn)},hiddenFields(){return this.fieldMetricsRaw.filter(t=>{const e=this.getElement(t.element_name);return!e?.id||"ACTIVE"!==e?.status})??[]},nextForm(){return this.$refs?.filters?.item?.next_form?this.$refs.filters.item.next_form:null}},methods:{bgImage2point(t,e){return"data:image/svg+xml;base64,"+btoa(`<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100" class="graph-svg">\n <polygon points="${100*t} 0, ${100*e} 100, 0 100, 0 0" fill="#D4FDF6" />\n </svg>`)},bgImage3point(t,e,i){return"data:image/svg+xml;base64,"+btoa(`<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100" class="graph-svg">\n <polygon points="${100*t} 0, ${100*e} 50, ${100*i} 100, 0 100, 0 0" fill="#D4FDF6" />\n </svg>`)},hasDropoff(t,e){return t.dropoffs/t.interactions>=e},async download(t){const e={from:x.c9.fromISO(this.$refs.filters.dates.from).toFormat("yyyy-LL-dd"),to:x.c9.fromISO(this.$refs.filters.dates.to).toFormat("yyyy-LL-dd"),forms:[this.$refs.filters.item.id],filters:this.$refs.filters.dimensionFilters};switch(t){case"csv":await(0,r.RG)(await this.$api.post("/metrics/fields",{...e,format:"csv"},this.$root.client.client_hash,{responseType:"blob"}));break;case"xlsx":await(0,r.RG)(await this.$api.post("/metrics/fields",{...e,format:"xlsx"},this.$root.client.client_hash,{responseType:"blob"}));break;case"xlsx-browser-device-country":await(0,r.RG)(await this.$api.post("/metrics/fields",{...e,format:"xlsx",dimensions:["browser_family","device_type","country_code"]},this.$root.client.client_hash,{responseType:"blob"}));break;case"xlsx-form-and-field":await(0,r.RG)(await this.$api.post("/metrics/full-export",{...e,format:"xlsx"},this.$root.client.client_hash,{responseType:"blob"}));break;case"xlsx-form-and-field-browser-device-country":await(0,r.RG)(await this.$api.post("/metrics/full-export",{...e,format:"xlsx",dimensions:["browser_family","device_type","country_code"]},this.$root.client.client_hash,{responseType:"blob"}));break;case"xlsx-form-and-field-custom-dimensions":break}},getElement(t){const e={form_hash:this.data.formHash,form_element_group_hash:null,name:t,label:t,display_name:t};if(!this.formElements)return e;const i=this.formElements.find(e=>e.name==t||e.identifier==t)||e;return i.category=this.$refs.filters.item.elements.find(t=>t.id===i.id)?.category,i},isOverflown(){if(this.$refs.fieldMetrics)return this.$refs.fieldMetrics.scrollHeight>this.$refs.fieldMetrics.clientHeight||this.$refs.fieldMetrics.scrollWidth>this.$refs.fieldMetrics.clientWidth},syncFieldMetricsScrollListener(){this.fieldMetricsScrollElement&&(this.fieldMetricsScrollElement.removeEventListener("scroll",this.updateStickyHeader),this.fieldMetricsScrollElement=null),this.$refs.fieldMetrics&&(this.fieldMetricsScrollElement=this.$refs.fieldMetrics,this.fieldMetricsScrollElement.addEventListener("scroll",this.updateStickyHeader,{passive:!0}))},updateStickyHeader(){const t=this.$refs.fieldMetrics,e=this.$refs.fieldMetricsHeader,i=this.$refs.fieldMetricsHeaderAnchor;if(!t||!e||!i)return this.stickyHeader.isActive=!1,void(this.stickyHeader.scrollLeft=0);const s=t.getBoundingClientRect(),a=i.getBoundingClientRect(),r=e.offsetHeight,o=a.top<=0&&s.bottom>r;this.stickyHeader.scrollLeft=t.scrollLeft,this.stickyHeader.height=r,this.stickyHeader.spacerHeight=Math.max(0,r-24),o?(this.stickyHeader.isActive=!0,this.stickyHeader.left=s.left,this.stickyHeader.width=s.width,this.stickyHeader.contentWidth=t.scrollWidth):this.stickyHeader.isActive=!1},persistToggleStarts(){(window.localStorage||{})[`toggleStarts_${this.data.formHash}`]=this.toggleStarts?"1":"0"},recalculatePrevNextFn(t,e,i){if(this.data?.form)return{...t,prev:e?i[e-1]:{interactions:this.data.form[0].starts},next:e!==i.length-1?i[e+1]:{interactions:this.data.form[0].conversions},fill_in_order_user_friendly:e+1}},toggleElementGroup(t){t&&this.data.period.filter(e=>"undefined"!==typeof e.collapsed&&e.form_element_group_hash===t).forEach(t=>{t.collapsed=!t.collapsed})},async loadDimensions(t=!1){if(this.$refs.filters?.dates&&this.data.form&&!window.location.href.includes("src=grafo")&&(t||!Object.keys(this.dimensions??{}).length)){const t={from:x.c9.fromISO(this.$refs.filters.dates.from).toFormat("yyyy-LL-dd"),to:x.c9.fromISO(this.$refs.filters.dates.to).toFormat("yyyy-LL-dd"),forms:[this.$refs.filters.item.id],filters:this.$refs.filters.dimensionFilters};let e=await this.$api.post("/metrics/forms",{...t,dimensions:["country_code","browser_family","device_type"],time_group:"PERIOD"},this.$root.client.client_hash);e=e.data.metrics;const i=(0,r.vV)(e,"starts"),s=(0,r.vV)(e,"errors"),a=(0,r.vV)(e,"autofills");this.dimensions={countries:Object.entries((0,r.bP)(e,"country_code",this.toggleStarts?"starts":"sessions")).map(t=>({value:t[0],count:t[1]})),devices:Object.entries((0,r.bP)(e,"device_type",this.toggleStarts?"starts":"sessions")).map(t=>({value:t[0],count:t[1]})),browsers:Object.entries((0,r.bP)(e,"browser_family",this.toggleStarts?"starts":"sessions")).map(t=>({value:t[0],count:t[1]})),errors:[{label:"Yes",value:!0,count:s},{label:"No",value:!1,count:i-s}],autofills:[{label:"Used",value:!0,count:a},{label:"Not used",value:!1,count:i-a}],conversion_path:[{value:"initial_abandoners",count:(0,r.vV)(e,"initial_abandoners")},{value:"submits_failed",count:(0,r.vV)(e,"submits_abandon")+(0,r.vV)(e,"resubmits_success")},{value:"initial_submit_but_abandoned",count:(0,r.vV)(e,"submits_abandon")},{value:"resubmit_success",count:(0,r.vV)(e,"resubmits_success")},{value:"converters",count:(0,r.vV)(e,"conversions")}]}}},async loadSessionRecordings(){if(window.location.href.includes("src=grafo"))return;if(!this.$root.sessionReplayIsAvailable())return;const t={from:x.c9.fromISO(this.$refs.filters.dates.from).toFormat("yyyy-LL-dd"),to:x.c9.fromISO(this.$refs.filters.dates.to).toFormat("yyyy-LL-dd"),time_group:"period",dimensions:["dropoff_element"],forms:[this.$refs.filters.item.id],filters:this.$refs.filters.dimensionFilters,page:1,per_page:1e5};let e=await this.$api.post("/metrics/session-recordings",t,this.$root.client.client_hash);e=e.data.metrics,this.data.sessionRecordingDimensions=(0,r.bP)(e,"dropoff_element",this.toggleStarts?"starts":"sessions"),this.$forceUpdate()},getSessionRecordingsForElement(t){if(!this.data.sessionRecordingDimensions||!Object.keys(this.data.sessionRecordingDimensions).length)return!1;if(!0===t?.isGroup)return!1;if("undefined"!==typeof this.data.sessionRecordingDimensions[t.name])return this.data.sessionRecordingDimensions[t.name];if("undefined"!==typeof this.data.sessionRecordingDimensions[t.identifier])return this.data.sessionRecordingDimensions[t.identifier];function e(t){if("undefined"===typeof t||!t)return;let e=t.replaceAll("*","§");return e=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),e=e.replaceAll("§",".*?"),e}
1const i=new RegExp(e(t.name),"i"),s=new RegExp(e(t.identifier),"i"),a=Object.keys(this.data.sessionRecordingDimensions).find(e=>!(!t.name?.trim().length||!i.test(e))||(!(!t.identifier?.trim().length||!s.test(e))||void 0));return!(!a||!a.length)&&a[0]},async reload(t){if(this.loading=!0,t.form){const e={from:x.c9.fromISO(t.dates.from).toFormat("yyyy-LL-dd"),to:x.c9.fromISO(t.dates.to).toFormat("yyyy-LL-dd"),forms:[t.form.id],filters:t.dimensions};this.details={expanded:null,query:e},this.filtersApplied=t.applied,this.toggleStarts="1"===(window.localStorage||{})[`toggleStarts_${t.form.id}`];let i=null,s=null;[this.formElements,this.elementGroups,this.elementTypes,i,s]=await Promise.all([this.$api.get("/forms/"+t.form.id+"/elements",this.$root.client.client_hash),this.$api.get("/forms/"+t.form.id+"/elements/groups",this.$root.client.client_hash),this.$api.get("/form-element-types",this.$root.client.client_hash),this.$api.post("/metrics/forms",{...e,time_group:"PERIOD"},this.$root.client.client_hash),this.$api.post("/metrics/fields",{...e,time_group:"PERIOD"},this.$root.client.client_hash)]),this.formElements=this.formElements.data,this.elementGroups=this.elementGroups.data.sort((t,e)=>t.order-e.order),this.elementTypes=this.elementTypes.data.reduce((t,e)=>({...t,[e.id]:e}),{}),i=i.data.metrics,s=s.data.metrics,this.fieldMetricsRaw=s,this.data={form:i};const a={formHash:t.form.id,form:i,formData:[t.form],period:s.map((e,s,a)=>({...e,form_display_name:t.form.display_name,element:this.getElement(e.element_name),element_display_name:this.getElement(e.element_name)?.display_name??e.element_name+" (NEW)",form_element_group_hash:this.getElement(e.element_name)?.form_element_group_hash,prev:s?a[s-1]:{interactions:this.data.form[0].starts},next:s!==a.length-1?a[s+1]:{interactions:this.data.form[0].conversions},fill_in_order_user_friendly:s+1,blanks:i[0].starts-e.interactions,blank_rate:Math.round((i[0].starts-e.interactions)/i[0].starts*1e4)/1e4}))},r=a.period.filter(t=>null!==t.form_element_group_hash);a.period=a.period.filter(t=>null===t.form_element_group_hash);const o=function*(){const t=["var(--indigo)","var(--cyan)","var(--orange)","var(--purple)","var(--pink)"];let e=[];while(1)e.length||(e=t),yield e.shift()},l=o();for(let t=0;t<this.elementGroups.length;t++){const e=this.elementGroups[t];if(e.fieldMetrics=r.filter(t=>t.form_element_group_hash===e.id),!e.fieldMetrics.length)continue;const s=Math.max(...e.fieldMetrics.map(t=>t.interactions));e.groupMetrics={rowBorderColor:l.next().value,isGroup:!0,collapsed:!("undefined"!==typeof this.$route.query.element),form_element_group_hash:e.id,element_name:e.name,element_display_name:e.name,element:{id:e.id,display_name:e.name,isGroup:!0},prev:0===t?a.period[a.period.length-1]:this.elementGroups[t-1],next:t<this.elementGroups.length-1?this.elementGroups[t+1]:{interactions:i[0].conversions},interactions:s,interaction_time:e.fieldMetrics.map(t=>t.interaction_time).reduce((t,e)=>t+e,0),hesitation_time:e.fieldMetrics.map(t=>t.hesitation_time).reduce((t,e)=>t+e,0),total_time:e.fieldMetrics.map(t=>t.total_time).reduce((t,e)=>t+e,0),dropoffs:e.fieldMetrics.map(t=>t.dropoffs).reduce((t,e)=>t+e,0),corrections:Math.max(...e.fieldMetrics.map(t=>t.corrections)),correction_rate:Math.max(...e.fieldMetrics.map(t=>t.corrections))/s,autofills:Math.max(...e.fieldMetrics.map(t=>t.autofills)),autofill_rate:Math.max(...e.fieldMetrics.map(t=>t.autofills))/s,errors:Math.max(...e.fieldMetrics.map(t=>t.errors)),rage_clicks:Math.max(...e.fieldMetrics.map(t=>t.rage_clicks)),error_rate:Math.max(...e.fieldMetrics.map(t=>t.errors))/s},a.period.push(e.groupMetrics);for(const t of e.fieldMetrics)a.period.push({...t,collapsed:!("undefined"!==typeof this.$route.query.element),rowBorderColor:e.groupMetrics.rowBorderColor})}this.data=a,this.loadDimensions(),this.loadSessionRecordings(),this.syncAiChatMetadata()}else this.data=null;setTimeout(()=>{if("undefined"!==typeof this.$route.query.element){const t=this.getElement(this.$route.query.element);this.$refs[`field-${t.id}`]?.length?this.$refs[`field-${t.id}`][0].click():console.error("Field cannot be found for expanding",this.$route.query.element)}}),this.loading=!1,this.$nextTick(()=>{this.syncFieldMetricsScrollListener(),this.updateStickyHeader()})},syncAiChatMetadata(){this.$refs.filters?.dates&&this.$root.setAiChatMetadata({suggestionsEnabled:!0,maxSuggestions:4,pageType:"field-metrics",formHash:this.$route.params.formHash||this.data.formHash,dateRange:{from:this.$refs.filters.dates.from,to:this.$refs.filters.dates.to},filtersApplied:this.filtersApplied,selectedDimensions:this.$refs.filters.dimensionFilters||{},suggestionButtons:[{label:"Explain Field Metrics",prompt:"Explain the meaning of each field metric."},{label:"Optimise Field Setup",prompt:"Suggest best practices for improving individual field performance, such as label clarity, field order, and autofill configuration."},{label:"Find Problematic Fields",prompt:"Identify which form fields have the highest hesitation, error, or correction rates, and explain how they affect overall conversions."},{label:"Recommend Field Improvements",prompt:"Based on the field metrics data, recommend concrete optimisations to reduce drop-offs and improve c
1ompletion rates."}]})}},mounted(){this.syncAiChatMetadata(),window.addEventListener("scroll",this.updateStickyHeader,{passive:!0}),window.addEventListener("resize",this.updateStickyHeader,{passive:!0}),this.$nextTick(()=>{this.syncFieldMetricsScrollListener(),this.updateStickyHeader()})},beforeDestroy(){window.removeEventListener("scroll",this.updateStickyHeader),window.removeEventListener("resize",this.updateStickyHeader),this.fieldMetricsScrollElement?.removeEventListener("scroll",this.updateStickyHeader)}},C=w,S=(0,g.A)(C,o,l,!1,null,"6d04782e",null),k=S.exports,D={name:"FieldMetricsWrapper",metaInfo:{title:"Field metrics"},components:{FieldMetrics:k},data(){return{views:[(new Date).toISOString()]}},mounted(){},computed:{comparisonViews(){return[...this.views].sort((t,e)=>new Date(t)-new Date(e))}},methods:{cloneDeep:r.mg,add(t=0){this.views.splice(t+1,0,(new Date).toISOString()),this.$forceUpdate()},remove(t){this.views.splice(t,1)},length(){return this.views.length}}},$=D,M=(0,g.A)($,s,a,!1,null,null,null),H=M.exports}}]); 2//# sourceMappingURL=8774.3b4eacb0.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.