"use strict";(globalThis.webpackChunkgtm_kit_settings=globalThis.webpackChunkgtm_kit_settings||[]).push([[508],{6327:(t,e,i)=>{i.d(e,{A:()=>r});var a=i(6427),n=i(6087),o=i(5280),s=i(790);const r=(0,n.memo)((({title:t,options:e,help:i,className:n="gtmkit-settings-field-wrap gtmkit-py-4",optionGroup:r="general",optionName:m,disabled:l})=>{const[g,d]=(0,o.G)(r,m);return(0,s.jsx)(a.RadioControl,{label:t,options:e,help:i,className:n,selected:parseInt(g),onChange:d,disabled:l})}))},3903:(t,e,i)=>{i.d(e,{A:()=>m});var a=i(6427),n=i(6087),o=i(5280),s=i(1835),r=i(790);const m=(0,n.memo)((({title:t,placeholder:e,help:i,className:n="gtmkit-settings-field-wrap gtmkit-py-4 gtmkit-max-w-md",optionGroup:m="general",optionName:l,isDisabled:g,notificationId:d="",onBlur:c,transform:k})=>{const[h,p]=(0,o.G)(m,l),{removeNotification:_}=(0,s.h)();return(0,r.jsx)(a.TextControl,{label:t,placeholder:e,help:i,className:n,value:h||"",onChange:t=>{p(t),d&&_(d)},onBlur:t=>{const e=t.target.value;if(k){const t=k(e);t!==e&&p(t)}c&&c(e)},disabled:g})}))},6992:(t,e,i)=>{i.d(e,{A:()=>m});var a=i(6427),n=i(6087),o=i(5280),s=i(1835),r=i(790);const m=(0,n.memo)((({title:t,label:e,optionGroup:i="general",optionName:m,disabled:l=!1,narrow:g=!1,premium:d=!1,notificationId:c=""})=>{const k=(0,n.useId)(),[h,p]=(0,o.G)(i,m),{removeNotification:_}=(0,s.h)(),u="gtmkit-settings-field-wrap "+(g?"gtmkit-py-2":"gtmkit-py-4");return(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("div",{className:u,children:(0,r.jsx)(a.BaseControl,{label:d?(0,r.jsxs)(r.Fragment,{children:[t,(0,r.jsx)("span",{className:"gtmkit-text-xs gtmkit-text-white gtmkit-font-normal gtmkit-rounded-full gtmkit-py-0.5 gtmkit-px-2 gtmkit-h-5 gtmkit-leading-5 gtmkit-bg-color-success gtmkit-ml-6",children:"Premium"})]}):t,id:k,children:(0,r.jsx)(a.ToggleControl,{label:e,checked:!l&&Boolean(h),onChange:()=>{p(!Boolean(h)),c&&_(c)},disabled:l})})})})}))},237:(t,e,i)=>{i.d(e,{A:()=>m});var a=i(6087),n=i(790);const o=(0,a.memo)((({as:t="h3",title:e="",children:i,className:a="",...o})=>(0,n.jsxs)(t,{...o,className:"gtmkit-font-bold gtmkit-text-lg gtmkit-px-8 gtmkit-py-4 gtmkit-border-b gtmkit-border-color-grey gtmkit-flex gtmkit-items-center "+a,children:[e,i]}))),s=(0,a.memo)((({as:t="div",children:e,className:i="",...a})=>(0,n.jsx)(t,{...a,className:"gtmkit-px-8 gtmkit-py-6 "+i,children:e}))),r=(0,a.forwardRef)((({children:t,className:e="",disabled:i=!1,...a},o)=>(0,n.jsx)("div",{...a,className:"gtmkit-mb-12 gtmkit-border gtmkit-bg-white gtmkit-max-w-screen-lg gtmkit-border-color-grey gtmkit-rounded "+e+(i?"gtmkit-opacity-60":""),ref:o,children:t})));r.Header=o,r.Content=s;const m=r},7508:(t,e,i)=>{i.r(e),i.d(e,{default:()=>j});var a=i(6087),n=i(7723),o=i(7767),s=i(3903),r=i(6992),m=i(6327),l=i(6427),g=i(5280),d=i(790);const c=(0,a.memo)((({title:t,help:e,items:i=[],optionGroup:n="general",optionName:o,disabled:s=!1})=>{const r=(0,a.useId)(),[m,c]=(0,g.G)(n,o),k=Array.isArray(m)?m:[];return(0,d.jsx)(d.Fragment,{children:(0,d.jsx)("div",{className:"gtmkit-settings-field-wrap gtmkit-py-4",children:(0,d.jsx)(l.BaseControl,{label:t,help:e,id:r,children:i.map((t=>(0,d.jsx)(l.CheckboxControl,{label:t.name,disabled:s,checked:k.includes(t.role),onChange:e=>((t,e)=>{let i;i=t?[...k,e]:k.filter((t=>t!==e)),c(i)})(e,t.role)},t.role)))})})})}));var k=i(237),h=i(5573),p=(0,d.jsx)(h.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,d.jsx)(h.Path,{d:"M12 4a8 8 0 1 1 .001 16.001A8 8 0 0 1 12 4Zm0 1.5a6.5 6.5 0 1 0-.001 13.001A6.5 6.5 0 0 0 12 5.5Zm.75 11h-1.5V15h1.5v1.5Zm-.445-9.234a3 3 0 0 1 .445 5.89V14h-1.5v-1.25c0-.57.452-.958.917-1.01A1.5 1.5 0 0 0 12 8.75a1.5 1.5 0 0 0-1.5 1.5H9a3 3 0 0 1 3.305-2.984Z"})}),_=i(8621);const u=(0,a.memo)((()=>{const[t,e]=(0,a.useState)(!1);return(0,d.jsxs)("div",{className:"gtmkit-inline-block",children:[(0,d.jsx)(l.Button,{icon:p,onClick:()=>e(!t),"aria-label":(0,n.__)("Help finding GTM Container ID","gtm-kit"),className:"gtmkit-help-button"}),t&&(0,d.jsx)(l.Popover,{position:"middle right",onClose:()=>e(!1),className:"gtmkit-help-popover",children:(0,d.jsxs)("div",{className:"gtmkit-p-4 gtmkit-max-w-[90vw] gtmkit-w-[600px] gtmkit-min-w-[600px]",children:[(0,d.jsx)("h3",{className:"gtmkit-font-bold gtmkit-text-base gtmkit-mb-3",children:(0,n.__)("Where to find your GTM Container ID","gtm-kit")}),(0,d.jsx)("p",{className:"gtmkit-mb-4 gtmkit-text-sm gtmkit-text-color-grey",children:(0,n.__)("You can find your GTM Container ID in Google Tag Manager at the top of your workspace. It looks like GTM-XXXXXXX.","gtm-kit")}),(0,d.jsx)("img",{src:`${_.A.getPluginUrl()}/assets/images/gtm-id-location.png`,alt:(0,n.__)("GTM Container ID location in Google Tag Manager","gtm-kit"),className:"gtmkit-w-full gtmkit-h-auto gtmkit-border gtmkit-rounded"}),(0,d.jsx)("p",{className:"gtmkit-mt-4 gtmkit-text-sm",children:(0,d.jsx)("a",{href:"https://tagmanager.google.com/",target:"_blank",rel:"noreferrer",className:"gtmkit-text-color-primary gtmkit-underline",children:(0,n.__)("Open Google Tag Manager","gtm-kit")})})]})})]})}));var x=i(3951),f=i(9730);const b=t=>{return t?((t,e)=>{if(!t||"string"!=typeof t)return e;const i=t.trim();return i.startsWith(e)?i:e+i})((e=t)&&"string"==typeof e?e.trim().toUpperCase():"","GTM-"):"";var e},j=()=>{const{settings:t}=(0,a.useContext)(x.ph),{useUserRoles:e}=(0,a.useContext)(f.p6),i=!(t.general.sgtm_domain&&t.general.sgtm_domain.trim()&&t.general.sgtm_container_identifier&&t.general.sgtm_container_identifier.trim()),l=(0,o.zy)();return(0,a.useEffect)((()=>{const t=new URLSearchParams(l.search).get("focus");if(t){const e=document.getElementById(t);e&&e.scrollIntoView()}}),[l]),(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)("h2",{className:"gtmkit-text-2xl gtmkit-font-bold gtmkit-text-color-heading gtmkit-mb-8",children:(0,n.__)("Google Tag Manager container","gtm-kit")}),(0,d.jsxs)(k.A,{children:[(0,d.jsx)(k.A.Header,{title:(0,n.__)("General Container Settings","gtm-kit")}),(0,d.jsxs)(k.A.Content,{children:[(0,d.jsx)("p",{className:"gtmkit-mb-4",children:(0,n.__)("To start collecting data with Google Tag manager you must register the Container ID of your Google Tag Manager container.","gtm-kit")}),(0,d.jsx)(s.A,{title:(0,n.__)("GTM Container ID:","gtm-kit"),optionName:"gtm_id",placeholder:(0,n.__)("Enter GTM Container ID","gtm-kit"),notificationId:"gtmkit-container-injection",transform:b,help:(0,d.jsxs)("div",{className:"gtmkit-inline-flex gtmkit-items-center gtmkit-gap-1",children:[(0,d.jsx)("span",{children:(0,n.__)("Find your Container ID in Google Tag Manager","gtm-kit")}),(0,d.jsx)(u,{})]})}),(0,d.jsx)(r.A,{title:(0,n.__)("Inject Container Code","gtm-kit"),label:(0,n.__)("Setting this to Off will remove the Google Tag Manager container code but the data layer will remain.","gtm-kit"),optionName:"container_active",notificationId:"gtmkit-container-injection"}),(0,d.jsx)(r.A,{title:(0,n.__)("Just the container","gtm-kit"),label:(0,n.__)("Setting this to On will reduce the functionality to just the GTM container code. No additional data will be pushed to the datalayer regardless of any other settings.","gtm-kit"),optionName:"just_the_container"}),(0,d.jsx)(s.A,{title:(0,n.__)("dataLayer variable name:","gtm-kit"),optionName:"datalayer_name",placeholder:"dataLayer",help:(0,n.__)("The default name of the data layer object is dataLayer. If you prefer to use a different name for your data layer, you may do so.","gtm-kit")})]})]}),(0,d.jsx)("div",{id:"sgtm"}),(0,d.jsxs)(k.A,{children:[(0,d.jsx)(k.A.Header,{title:(0,n.__)("Server-side Tagging (sGTM)","gtm-kit")}),(0,d.jsxs)("div",{className:"gtmkit-grid gtmkit-grid-cols-2 gtmkit-gap-4",children:[(0,d.jsxs)(k.A.Content,{children:[(0,d.jsx)(s.A,{title:(0,n.__)("sGTM Container Domain:","gtm-kit"),optionName:"sgtm_domain",placeholder:(0,n.__)("Enter domain","gtm-kit"),help:(0,n.__)("Enter your custom domain name if you are using a custom server side GTM container for tracking.","gtm-kit")}),(0,d.jsx)(s.A,{title:(0,n.__)("sGTM container identifier:","gtm-kit"),optionName:"sgtm_container_identifier",placeholder:(0,n.__)("Enter loader name","gtm-kit"),help:(0,n.__)("Only use if you are using a custom loader.","gtm-kit")}),(0,d.jsx)(r.A,{title:(0,n.__)("Cookie Keeper (for Stape users only)","gtm-kit"),label:(0,n.__)("Prolong cookie lifetime in Safari and other browsers with ITP. This only works if you use Stape sGTM hosting and have set up the Cookie Keeper power up.","gtm-kit"),optionName:"sgtm_cookie_keeper",disabled:i})]}),(0,d.jsx)("div",{className:"gtmkit-px-8 gtmkit-py-6",children:(0,d.jsxs)("div",{className:"gtmkit-border-2 gtmkit-px-4 gtmkit-mt-3",children:[(0,d.jsx)("h4",{className:"gtmkit-pt-3 gtmkit-mb-4 gtmkit-text-lg gtmkit-font-bold",children:(0,n.__)("Google Tag Manager Server-side Tagging","gtm-kit")}),(0,d.jsxs)("p",{className:"gtmkit-mb-4",children:[(0,n.__)("Server-side tagging is a silver bullet that gives you improved data accuracy, performance, privacy, and flexibility.","gtm-kit")," ",(0,d.jsx)("a",{href:"https://gtmkit.com/guides/google-tag-manager-server-side-tagging/#utm_source=gtmkit-plugin&utm_medium=software&utm_term=sgtm&utm_content=dashboard-container",className:"gtmkit-text-color-primary gtmkit-font-semibold hover:gtmkit-underline",target:"_blank",rel:"noreferrer",children:(0,n.__)("Learn more","gtm-kit")})]}),(0,d.jsx)("h4",{className:"gtmkit-pt-4 gtmkit-mb-4 gtmkit-text-lg gtmkit-font-bold",children:(0,n.__)("Hosting server-side GTM containers","gtm-kit")}),(0,d.jsx)("p",{className:"gtmkit-mb-4",children:(0,n.__)("Setting up server-side tracking can be challenging and costly but there is an easy and cheap solution.","gtm-kit")}),(0,d.jsxs)("p",{className:"gtmkit-mb-4",children:[(0,n.__)("Stape.io is a solution for hosting server-side Google Tag Manager containers, offering a simplified approach that demands less technical expertise than solutions like Google Cloud Platform.","gtm-kit")," ",(0,n.__)("Additionally, it provides valuable add-ons for enhanced functionality.","gtm-kit")]}),(0,d.jsx)("p",{className:"gtmkit-mb-4",children:(0,d.jsx)("a",{href:"https://jump.gtmkit.com/link/1-AC1E5",className:"gtmkit-text-color-primary gtmkit-font-semibold hover:gtmkit-underline",target:"_blank",rel:"noreferrer",children:(0,n.__)("Learn more about Stape.io","gtm-kit")})})]})})]})]}),(0,d.jsxs)(k.A,{children:[(0,d.jsx)(k.A.Header,{title:(0,n.__)("Page Speed Optimization","gtm-kit")}),(0,d.jsxs)("div",{className:"gtmkit-grid gtmkit-grid-cols-2 gtmkit-gap-4",children:[(0,d.jsx)(k.A.Content,{children:(0,d.jsx)(r.A,{title:(0,n.__)("load_delayed_js event","gtm-kit"),label:(0,n.__)("Setting this to On will push the event 'load_delayed_js' on page load.","gtm-kit"),optionName:"load_js_event"})}),(0,d.jsx)("div",{className:"gtmkit-px-8 gtmkit-py-6",children:(0,d.jsxs)("div",{className:"gtmkit-border-2 gtmkit-px-4 gtmkit-mt-3",children:[(0,d.jsx)("h4",{className:"gtmkit-pt-3 gtmkit-mb-4 gtmkit-text-lg gtmkit-font-bold",children:(0,n.__)("Delay JavaScript execution","gtm-kit")}),(0,d.jsxs)("p",{className:"gtmkit-mb-4",children:[(0,n.__)("Page optimization plugins can delay the 'load_delayed_js' event and this can be used to delay the triggering og tags in Google Tag Manager.","gtm-kit")," ",(0,d.jsx)("a",{href:"https://gtmkit.com/guides/delay-javascript-execution-in-gtm/#utm_source=gtmkit-plugin&utm_medium=software&utm_term=delay-js&utm_content=dashboard-container",className:"gtmkit-text-color-primary gtmkit-font-semibold hover:gtmkit-underline",target:"_blank",rel:"noreferrer",children:(0,n.__)("Learn more","gtm-kit")})]})]})})]})]}),(0,d.jsxs)(k.A,{children:[(0,d.jsx)(k.A.Header,{title:(0,n.__)("Google Tag Manager Environment","gtm-kit")}),(0,d.jsxs)("div",{className:"gtmkit-grid gtmkit-grid-cols-2 gtmkit-gap-4",children:[(0,d.jsxs)(k.A.Content,{children:[(0,d.jsx)(s.A,{title:(0,n.__)("gtm_auth:","gtm-kit"),optionName:"gtm_auth",placeholder:(0,n.__)("Enter gtm_auth code","gtm-kit"),help:(0,n.__)("Enter the gtm_auth code for your GTM environment.","gtm-kit")}),(0,d.jsx)(s.A,{title:(0,n.__)("gtm_preview:","gtm-kit"),optionName:"gtm_preview",placeholder:(0,n.__)("Enter gtm_preview code","gtm-kit"),help:(0,n.__)("Enter the gtm_preview code for your GTM environment.","gtm-kit")})]}),(0,d.jsx)("div",{className:"gtmkit-px-8 gtmkit-py-6",children:(0,d.jsxs)("div",{className:"gtmkit-border-2 gtmkit-px-4 gtmkit-mt-3",children:[(0,d.jsx)("h4",{className:"gtmkit-pt-3 gtmkit-mb-4 gtmkit-text-lg gtmkit-font-bold",children:(0,n.__)("Environments","gtm-kit")}),(0,d.jsxs)("p",{className:"gtmkit-mb-4",children:[(0,n.__)("In Google Tag Manager you can define different environments like Live, Dev and QA.","gtm-kit")," ",(0,n.__)('To use a specific environment in GTM Kit you must enter the "gtm_auth" and "gtm_preview" codes for that environment.',"gtm-kit")," ",(0,n.__)("If left empty the default environment will be used.","gtm-kit")]}),(0,d.jsx)("h4",{className:"gtmkit-pt-4 gtmkit-mb-4 gtmkit-text-lg gtmkit-font-bold",children:(0,n.__)("Override settings in wp-config.php","gtm-kit")}),(0,d.jsxs)("p",{className:"gtmkit-mb-4",children:[(0,n.__)("You can override the values by using constants in wp-config.php, which is a very useful for setting the value in your development and staging environments.","gtm-kit")," ",(0,d.jsx)("a",{href:"https://gtmkit.com/documentation/settings-actions-and-filters-for-developers/#utm_source=gtmkit-plugin&utm_medium=software&utm_term=container-settings&utm_content=dashboard-container",className:"gtmkit-text-color-primary gtmkit-font-semibold hover:gtmkit-underline",target:"_blank",rel:"noreferrer",children:(0,n.__)("Learn more","gtm-kit")})]})]})})]})]}),(0,d.jsxs)(k.A,{children:[(0,d.jsx)(k.A.Header,{title:(0,n.__)("Exclude User Roles","gtm-kit")}),(0,d.jsxs)("div",{className:"gtmkit-grid gtmkit-grid-cols-2 gtmkit-gap-4",children:[(0,d.jsx)(k.A.Content,{children:(0,d.jsx)(c,{title:(0,n.__)("Exclude user roles","gtm-kit"),help:(0,n.__)("Select the roles that you want to exclude from tracking.","gtm-kit"),items:e,optionName:"exclude_user_roles"})}),(0,d.jsx)("div",{className:"gtmkit-px-8 gtmkit-py-6",children:(0,d.jsxs)("div",{className:"gtmkit-border-2 gtmkit-px-4 gtmkit-mt-3",children:[(0,d.jsx)("h4",{className:"gtmkit-pt-3 gtmkit-mb-4 gtmkit-text-lg gtmkit-font-bold gtmkit-text-red-600",children:(0,n.__)("Warning!","gtm-kit")}),(0,d.jsx)("p",{className:"gtmkit-mb-4",children:(0,n.__)("Excluding user roles is not compatible with all full-page cache solutions. Some full-page cache solutions may cache the page identically for all users, regardless of their user role. This could result in users being excluded who should not be.","gtm-kit")}),(0,d.jsx)("p",{className:"gtmkit-mb-4",children:(0,n.__)("Please ensure thorough and proper testing of this.","gtm-kit")})]})})]})]}),(0,d.jsxs)(k.A,{children:[(0,d.jsx)(k.A.Header,{title:(0,n.__)("Container Code Implementation","gtm-kit")}),(0,d.jsxs)(k.A.Content,{children:[(0,d.jsx)(m.A,{title:(0,n.__)("Container code implementation:","gtm-kit"),options:[{label:(0,n.__)("Standard implementation as recommended by Google (no delay)","gtm-kit"),value:0},{label:(0,n.__)("Load container when the browser is idle (requestIdleCallback)","gtm-kit"),value:1}],help:(0,n.__)("Depending on how you use Google Tag Manager you can delay the loading of the container script until the browser is idle.","gtm-kit"),optionName:"script_implementation"}),(0,d.jsx)(m.A,{title:(0,n.__)("Container code noscript implementation:","gtm-kit"),options:[{label:(0,n.__)("Just after the opening <body> tag","gtm-kit"),value:0},{label:(0,n.__)("Footer of the page (not recommended by Google)","gtm-kit"),value:1},{label:(0,n.__)("Custom (insert function in your template)","gtm-kit"),value:2},{label:(0,n.__)("Disable <noscript> implementation","gtm-kit"),value:3}],help:(0,n.__)('The preferred method to implement the <noscript> container code is just after the opening <body> tag. This requires that your theme uses the "body_open" hook. If your theme does not support this the script can be injected in the footer or you can use the function below.',"gtm-kit"),optionName:"noscript_implementation"}),(0,d.jsx)("p",{className:"gtmkit-mb-4",children:(0,d.jsx)("code",{children:"<?php if ( function_exists( 'gtmkit_the_noscript_tag' ) ) { gtmkit_the_noscript_tag(); } ?>"})})]})]})]})}},1835:(t,e,i)=>{i.d(e,{h:()=>o});var a=i(6087),n=i(282);const o=()=>{var t,e;const{notifications:i,setNotificationStatus:o,isUpdatingNotifications:s}=(0,a.useContext)(n.V2),r=(0,a.useCallback)((t=>o(t,"dismiss")),[o]),m=(0,a.useCallback)((t=>o(t,"remove")),[o]),l=null!==(t=i?.metrics?.total)&&void 0!==t?t:0,g=null!==(e=i?.metrics?.problem)&&void 0!==e?e:0;return{notifications:i,dismissNotification:r,removeNotification:m,isUpdatingNotifications:s,totalNotifications:l,problemNotifications:g,hasProblems:g>0,hasNotifications:l>0}}},5280:(t,e,i)=>{i.d(e,{G:()=>o});var a=i(6087),n=i(3951);const o=(t,e)=>{const{settings:i,updateStateSettings:o}=(0,a.useContext)(n.ph),s=i?.[t]?.[e];return[s,(0,a.useCallback)((i=>{o(t,e,i)}),[t,e,o])]}}}]);