https://bambuser.com/docs/assets/js/43245cbc.3b3c8dd4.js

1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[4559],{30586(e,t,a){a.r(t),a.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"integrate-gtm","title":"Install with Google Tag Manager","description":"Install Chat widget loader via Google Tag Manager Custom HTML tag on All Pages; wire Shopper Events (Product View, Purchase, Basket Add/Remove, Search) as tags.","source":"@site/chat/chatGTM.mdx","sourceDirName":".","slug":"/integrate-chat-with-gtm","permalink":"/docs/chat/integrate-chat-with-gtm","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"integrate-gtm","title":"Install with Google Tag Manager","description":"Install Chat widget loader via Google Tag Manager Custom HTML tag on All Pages; wire Shopper Events (Product View, Purchase, Basket Add/Remove, Search) as tags.","sidebar_label":"Install with GTM","slug":"/integrate-chat-with-gtm"},"sidebar":"someSidebars","previous":{"title":"Extend Bambuser Chat","permalink":"/docs/chat/extend-chat"},"next":{"title":"Redirect to Customer Service","permalink":"/docs/chat/customer-service"}}');var r=a(74848),i=a(28453),s=(a(4865),a(19365),a(86025));const l={id:"integrate-gtm",title:"Install with Google Tag Manager",description:"Install Chat widget loader via Google Tag Manager Custom HTML tag on All Pages; wire Shopper Events (Product View, Purchase, Basket Add/Remove, Search) as tags.",sidebar_label:"Install with GTM",slug:"/integrate-chat-with-gtm"},o=void 0,c={},u=[{value:"Installation",id:"installation",level:2},{value:"1. Add a new tag",id:"1-add-a-new-tag",level:3},{value:"2. Edit the tag configuration",id:"2-edit-the-tag-configuration",level:3},{value:"3. Choose "Custom HTML" for the tag type",id:"3-choose-custom-html-for-the-tag-type",level:3},{value:"4. Paste loader script in the "HTML" field",id:"4-paste-loader-script-in-the-html-field",level:3},{value:"5. Add a trigger to make this tag fire",id:"5-add-a-trigger-to-make-this-tag-fire",level:3},{value:"6. Select the "All Pages" on the Page View type",id:"6-select-the-all-pages-on-the-page-view-type",level:3},{value:"7. Preview and test",id:"7-preview-and-test",level:3},{value:"8. Add the tracking events",id:"8-add-the-tracking-events",level:3}];function d(e){const t={a:"a",admonition:"admonition",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"This guide assumes that your site already has Google Tag Manager installed. The difficulty of installing Google Tag Manager on your website may vary depending on platform."})}),"\n",(0,r.jsxs)(t.p,{children:["The fastest way to get started with the Bambuser Chat integration is to use our Google Tag Manager. However, for more advanced features like full product tracking experience and cart integrations, you need to follow our ",(0,r.jsx)(t.a,{href:"/chat/bam-chat-integration",children:"general implementation guide"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsx)(t.h3,{id:"1-add-a-new-tag",children:"1. Add a new tag"}),"\n",(0,r.jsx)("img",{src:(0,s.Ay)("/img/GTMtag.png")}),"\n",(0,r.jsx)(t.h3,{id:"2-edit-the-tag-configuration",children:"2. Edit the tag configuration"}),"\n",(0,r.jsx)("img",{src:(0,s.Ay)("/img/GTMtag2.png")}),"\n",(0,r.jsx)(t.h3,{id:"3-choose-custom-html-for-the-tag-type",children:'3. Choose "Custom HTML" for the tag type'}),"\n",(0,r.jsx)("img",{src:(0,s.Ay)("/img/GTMtag3.png")}),"\n",(0,r.jsx)(t.h3,{id:"4-paste-loader-script-in-the-html-field",children:'4. Paste loader script in the "HTML" field'}),"\n",(0,r.jsx)("img",{src:(0,s.Ay)("/img/GTMtag4.png")}),"\n",(0,r.jsx)(t.h3,{id:"5-add-a-trigger-to-make-this-tag-fire",children:"5. Add a trigger to make this tag fire"}),"\n",(0,r.jsx)("img",{src:(0,s.Ay)("/img/GTMtag5.png")}),"\n",(0,r.jsx)(t.h3,{id:"6-select-the-all-pages-on-the-page-view-type",children:'6. Select the "All Pages" on the Page View type'}),"\n",(0,r.jsx)("img",{src:(0,s.Ay)("/img/GTMtag6.png")}),"\n",(0,r.jsx)(t.h3,{id:"7-preview-and-test",children:"7. Preview and test"}),"\n",(0,r.jsx)(t.p,{children:"Google tag Manager has a preview feature that you can now use to test the integration before putt

1ing it live on your website."}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Click the preview button on the top right corner in Google Tag Manager\n",(0,r.jsx)(t.img,{alt:"img",src:a(44802).A+"",width:"794",height:"118"})]}),"\n",(0,r.jsxs)(t.li,{children:["Enter your website url where you already have this GTM container installed\n",(0,r.jsx)(t.img,{alt:"img",src:a(94299).A+"",width:"1310",height:"1060"})]}),"\n",(0,r.jsxs)(t.li,{children:["GTM will now open your website with this extra tag assistant box that indicates you are in preview mode and not your actual live website\n",(0,r.jsx)(t.img,{alt:"img",src:a(36135).A+"",width:"918",height:"428"})]}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"8-add-the-tracking-events",children:"8. Add the tracking events"}),"\n",(0,r.jsx)(t.p,{children:"In order to have the tracking events available you must match the object details in the script with the ones available in the website."}),"\n",(0,r.jsx)("img",{src:(0,s.Ay)("/img/GTMtag7.png")}),"\n",(0,r.jsx)(t.p,{children:"And trigger on the specific page"}),"\n",(0,r.jsx)("img",{src:(0,s.Ay)("/img/GTMtag8.png")}),"\n",(0,r.jsx)(t.p,{children:"These actions must be followed on all of the tracking events available for the Chat:"}),"\n",(0,r.jsxs)("ul",{children:[(0,r.jsx)("li",{children:"Product View"}),(0,r.jsx)("li",{children:"Purchase"}),(0,r.jsx)("li",{children:"Basket Add"}),(0,r.jsx)("li",{children:"Basket Remove"}),(0,r.jsx)("li",{children:"Category View"}),(0,r.jsx)("li",{children:"Search"})]})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},19365(e,t,a){a.d(t,{A:()=>o});a(96540);var n=a(18215),r=a(47751);const i="tabItem_Ymn6";var s=a(74848);function l({children:e,className:t,hidden:a}){return(0,s.jsx)("div",{role:"tabpanel",className:(0,n.A)(i,t),hidden:a,children:e})}function o({children:e,className:t,value:a}){const{selectedValue:n,lazy:i}=(0,r.uc)(),o=a===n;return!o&&i?null:(0,s.jsx)(l,{className:t,hidden:!o,children:e})}},4865(e,t,a){a.d(t,{A:()=>p});a(96540);var n=a(18215),r=a(17559),i=a(47751),s=a(23104),l=a(92303);const o="tabList__CuJ",c="tabItem_LNqP";var u=a(74848);function d({className:e}){const{selectedValue:t,selectValue:a,tabValues:r,block:l}=(0,i.uc)(),o=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.a_)(),h=e=>{const n=e.currentTarget,i=o.indexOf(n),s=r[i].value;s!==t&&(d(n),a(s))},g=e=>{let t=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{const a=o.indexOf(e.currentTarget)+1;t=o[a]??o[0];break}case"ArrowLeft":{const a=o.indexOf(e.currentTarget)-1;t=o[a]??o[o.length-1];break}}t?.focus()};return(0,u.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,n.A)("tabs",{"tabs--block":l},e),children:r.map(({value:e,label:a,attributes:r})=>(0,u.jsx)("li",{role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,ref:e=>{o.push(e)},onKeyDown:g,onClick:h,...r,className:(0,n.A)("tabs__item",c,r?.className,{"tabs__item--active":t===e}),children:a??e},e))})}function h({children:e}){return(0,u.jsx)("div",{className:"margin-top--md",children:e})}function g({className:e,children:t}){return(0,u.jsxs)("div",{className:(0,n.A)(r.G.tabs.container,"tabs-container",o),children:[(0,u.jsx)(d,{className:e}),(0,u.jsx)(h,{children:t})]})}function p(e){const t=(0,l.A)(),a=(0,i.OC)(e);return(0,u.jsx)(i.O_,{value:a,children:(0,u.jsx)(g,{className:e.className,children:(0,i.vT)(e.children)})},String(t))}},47751(e,t,a){a.d(t,{OC:()=>p,O_:()=>v,uc:()=>f,vT:()=>u});var n=a(96540),r=a(90612),i=a(205),s=a(57485),l=a(70679),o=a(31682),c=a(74848);function u(e){return n.Children.toArray(e).filter(e=>"\n"!==e)}function d(e){const{values:t,children:a}=e;return(0,n.useMemo)(()=>{const e=t??function(e){return n.Children.toArray(e).flatMap(e=>{if(!e)return[];if((0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return[e];const t="string"==typeof e.type?e.type:e.type.name;throw new Error(`Docusaurus error: Bad <Tabs> child <${t}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.\nIf you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:t,attributes:a,default:n}})=>({value:e,label:t,attributes:a,default:n}))}(a);return function(e){const t=(0,o.XI)(e,(e,t)=>e.value===t.value);if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[t,a])}function h({value:e,tabValues:t}){return t.some(t=>t.value===e)}function g({queryString:e=!1,groupId:t}){const a=(0,r.W6)(),i=function({queryString:e=!1,groupId:t}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:e,groupId:t});return[(0,s.aZ)(i),(0,n.useCallback)(e=>{if(!i)return;const t=new URLSearchParams(a.location.search);t.set(i,e),a.replace({...a.location,search:t.toString()})},[i,a])]}function p(e){const{defaultValue:t,queryString:a=!1,groupId:r}

1=e,s=d(e),[o,c]=(0,n.useState)(()=>function({defaultValue:e,tabValues:t}){if(0===t.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!h({value:e,tabValues:t}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const a=t.find(e=>e.default)??t[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:t,tabValues:s})),[u,p]=g({queryString:a,groupId:r}),[m,f]=function({groupId:e}){const t=function(e){return e?`docusaurus.tab.${e}`:null}(e),[a,r]=(0,l.Dv)(t);return[a,(0,n.useCallback)(e=>{t&&r.set(e)},[t,r])]}({groupId:r}),v=(()=>{const e=u??m;return h({value:e,tabValues:s})?e:null})();(0,i.A)(()=>{v&&c(v)},[v]);return{selectedValue:o,selectValue:(0,n.useCallback)(e=>{if(!h({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);c(e),p(e),f(e)},[p,f,s]),tabValues:s,lazy:e.lazy??!1,block:e.block??!1}}const m=(0,n.createContext)(null);function f(){const e=n.useContext(m);if(!e)throw new Error("useTabsContext() must be used within a Tabs component");return e}function v(e){return(0,c.jsx)(m.Provider,{value:e.value,children:e.children})}},44802(e,t,a){const n=a.p+"assets/images/preview-button-300421c87b4d18122d4712a0cf05e748.png";a.d(t,["A",0,n])},36135(e,t,a){const n=a.p+"assets/images/preview-tag-assistant-1e2405154f70145e7d57c7923b94870f.png";a.d(t,["A",0,n])},94299(e,t,a){const n=a.p+"assets/images/preview-website-url-91f5334dd7b722e020ffd498041bc4d9.png";a.d(t,["A",0,n])},28453(e,t,a){a.d(t,{R:()=>s,x:()=>l});var n=a(96540);const r={},i=n.createContext(r);function s(e){const t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]);