{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"This page contains a guide on how to integrate the Overlay with analytics platforms such as GA or GTM.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Instructions for version 1.4","type":"text","marks":[{"type":"link","attrs":{"href":"https://searchbroker.atlassian.net/wiki/pages/resumedraft.action?draftId=78026117#GoogleAnalyticsandGoogleTagManagerIntegration-1.4"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Instructions for version 1.3","type":"text","marks":[{"type":"link","attrs":{"href":"https://searchbroker.atlassian.net/wiki/pages/resumedraft.action?draftId=78026117#GoogleAnalyticsandGoogleTagManagerIntegration-1.2"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Instructions for version 1.2","type":"text","marks":[{"type":"link","attrs":{"href":"https://searchbroker.atlassian.net/wiki/pages/resumedraft.action?draftId=78026117#GoogleAnalyticsandGoogleTagManagerIntegration-1.2"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Instructions for version 1.1","type":"text","marks":[{"type":"link","attrs":{"href":"https://searchbroker.atlassian.net/wiki/pages/resumedraft.action?draftId=78026117#GoogleAnalyticsandGoogleTagManagerIntegration-1.1"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Interface X integration","type":"text","marks":[{"type":"link","attrs":{"href":"https://searchbroker.atlassian.net/wiki/spaces/EBKB/pages/edit-v2/78026117#X-interface-archetype-integration-into-an-existing-website"}}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Step-by-step guide","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"1.4"},"legacyAnchorId":{"value":"GoogleAnalyticsandGoogleTagManagerIntegration-1.4"}},"macroMetadata":{"macroId":{"value":"3c04737e-2720-4e35-aefd-098f5ee38b35"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"d90728f2-f5b5-40ad-adab-b36ae17e2082"}},{"text":"Instructions for version 1.4","type":"text"}]},{"type":"paragraph","content":[{"text":"Version 1.4 introduces a new way to manage custom events that requires a few changes in the Overlay integration snippet. By default, the Overlay provides callbacks to measure the following user events:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Query","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add to cart","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Opening the Overlay","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Closing the Overlay","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"And it also provides a callback to run custom code every time a change in the results set happens.","type":"text"}]},{"type":"paragraph","content":[{"text":"First of all, please initialize the GA or GTM service (it's just a sample, please use the right parameters for your implementation). This piece of code must be in all the pages that contain the search bar. You can find more detailed instructions in these guides:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"https://developers.google.com/analytics/devguides/collection/analyticsjs/","type":"text","marks":[{"type":"link","attrs":{"href":"https://developers.google.com/analytics/devguides/collection/analyticsjs/"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"https://support.google.com/tagmanager/answer/6103696","type":"text","marks":[{"type":"link","attrs":{"href":"https://support.google.com/tagmanager/answer/6103696"}}]},{"type":"hardBreak"},{"type":"hardBreak"}]}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"GA Code","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"\n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"For GTM there are two options: adding this code in the HTML head tag or adding this code just before the Google Tag Manager code:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"GTM Code – Single Tag (Recommended)","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n \n \n ...\n ","type":"text"}]},{"type":"paragraph","content":[{"text":"Finally, you can start defining custom callback functions for each type of event.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"1. Search tracking","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"The data object received by the function contains, at least, the following information:","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"95d3d87f-5262-4c40-b5d8-fae10a34f53e"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Parameter","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"q","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"The query typed by the user","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"page","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Page number for grabbing pagination data","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"totalHits","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Number of results returned by the query","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"scope","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"The scope that has been set up in the Overlay configuration","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"lang","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"The language that has been set up in the Overlay configuration","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"origin","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Component of the Overlay where the query was originated. The possible values are:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"default (search input)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"empathize_term (click on a term without category in the Empathize)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"empathize_category (click on a term with category in the Empathize)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"partial (click on a partial results suggested query)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"history (click on a user query history entry)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"spellcheck (click on a spellchecked query)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"linked (load a URL that already contains a query)","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"originalQuery","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Original query sent to the API, useful for spellcheck situations","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"Any other parameter returned by Search&Tagging for your instance will also be part of this object, so our recommendation is to explore all the information it contains using the console.","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Search Callback Sample - GA","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function searchCallback(data) {\n ga('set', 'page', 'http://site.com/overlay?q=' + data.q);\n ga('send', 'pageview');\n ga('send', 'event', 'EmpathyOverlay', 'search', data.q, data.totalHits);\n // it's just a sample, you can define the GA metric with other parameters\n}","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Search Callback Sample - Single GTM Tag","type":"text"}]},{"type":"paragraph","content":[{"text":"This option uses different pieces of code for each event, one Google Analytics trigger, multiple Google Analytics variables, and one Google Analytics tag. The piece of code in the callbacks will be different for different data tracking. If you want to track different data, Google Tag Manager configuration will be the same, and each change must be done in the code.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function searchCallback(data) {\n dataLayer.push({'eventCategory':'EmpathyOverlay', 'eventAction':'search', 'eventLabel':data.q, 'eventValue':1, 'event':'gaEvent'});\n // The chosen keys and values can be different. The keys must have the same name in the code and in Google Tag Manager\n}","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Search Callback Sample - Multiple GTM Tags","type":"text"}]},{"type":"paragraph","content":[{"text":"This option uses different pieces of code for each event, different Google Analytics events and different Google Analytics tags. The piece of code in the callbacks will always be the same. If you want to change the data for Google Analytics tracking, each change must be done from Google Tag Manager.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function searchCallback(data) {\n dataLayer.push({'data': data});\n dataLayer.push({'event': 'searchCallback'});\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"2. Product related events tracking (click and add to cart)","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"The data object received by the function contains, at least, the following information:","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"1cf2f73b-344f-4d15-8b88-053fb22f2d3f"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Parameter","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"productId","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Unique identifier of the product where the event was triggered","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"q","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"The query typed by the user","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"page","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Page number for grabbing pagination data","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"title","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Title of the product where the event was triggered","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"url","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Product page URL","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"scope","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"The scope that has been set up in the Overlay configuration","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"follow","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Whether the user was automatically redirected to the product page after tracking the event (redirection though EmpathyBroker's Stats API)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"lang","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"The language that has been set up in the Overlay configuration","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Product Event Callback Sample - GA","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function clickCallback(data) {\n ga('send', 'event', 'EmpathyOverlay', 'click', data.q);\n // it's just a sample, you can define the GA metric with other parameters\n}","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Product Event Callback Sample - Single GTM Tag","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function clickCallback(data) {\n dataLayer.push({'eventCategory':'EmpathyOverlay', 'eventAction':'click', 'eventLabel':data.q, 'eventValue':1, 'event':'gaEvent'});\n // The chosen keys and values can be different. The keys must have the same name in the code and in Google Tag Manager \n}","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Search Callback Sample - Multiple GTM Tags","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function clickCallback(data) {\n dataLayer.push({'data': data});\n dataLayer.push({'event': 'clickCallback'});\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"3. Other events","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"The rest of the events don't provide any additional data to the callback functions and can be tracked in the same way as the above.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"4. Update the Overlay initialization snippet using these functions","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"type":"hardBreak"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"Please note that this Overlay feature can be used to run custom code of any other nature, not necessarily related with analytics.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"5. Next steps (GTM only)","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Single GTM Tag","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to Google Tag Manager to continue with the integration process. No more code changes are needed.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In Google Tag Manager you have to add triggers. To do it:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to Triggers","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click on New","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Name: gaEvent","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Choose Event: Custom Event","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Fire On:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Event name: gaEvent","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create Trigger","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Then, you have to create variables for received data in each event. The variables will always be the same, and they must have the dataLayer key names (In this case: eventCategory, eventAction, eventLabel and eventValue). For each of those variables repeat this process:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to Variables","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"At the bottom of the page, in the User-Defined Variables section, click New","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Name: One of the dataLayer key names (eventCategory, eventAction, eventLabel and eventValue)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Choose Type: Data Layer Variable","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Configure Variable:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Data Layer Variable Name: Same name as the one in point c.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Data Layer Version: Version 2","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create Variable","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Finally, a Google Analytics tag must be created. To do it:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to Tags","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click on New","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Name: gaEvent","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Choose Product: Google Analytics","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Choose a Tag Type: Google Analytics option you are using","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Configure Tag:","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph"},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Tracking ID: Tracking ID de Google Analytics (","type":"text"},{"text":"UA-XXXXXXXX-X)","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Track Type: Event","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Category: {{eventCategory}} //Variable created on point 5","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Action: {{eventAction}} //Variable created on point 5","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Label: {{eventLabel}} //Variable created on point 5","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Value: {{eventValue}} //Variable created on point 5","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Fire On: More > Choose from existing Triggers: gaEvent","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create Tag","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Multiple GTM tags","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to Google Tag Manager to continue with the integration process. No more code changes are needed.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In Google Tag Manager you have to add triggers. The next process has to be done for each event:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to Triggers","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click on New","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Name: Event Name (ebClickCallback, ebSearchCallback or ebConversionCallback)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Choose Event: Custom Event","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Fire On:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Event name: The same name of c step.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create Trigger","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Then, you have to create variables for received data in each event. The next process has to be done for each data:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to Variables","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"At the bottom of the page, in the User-Defined Variables section, click New","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Name: It should identify the data it represents. For example: Product Name","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Choose Type: Data Layer Variable","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Configure Variable:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Data Layer Variable Name: One of the Data column values of available data table.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Data Layer Version: Version 2","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create Variable","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Finally, Google Analytics tags must be created. These tags depends on the chosen Google Analytics metrics, so the next process describes a general example to track a product click:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to Tags","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Click on New","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Name: GA Overlay Product Click","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Choose Product: Google Analytics","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Choose a Tag Type: Google Analytics option you are using","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Configure Tag:","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph"},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Tracking ID: Tracking ID de Google Analytics (","type":"text"},{"text":"UA-XXXXXXXX-X)","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Track Type: Event","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Category: Overlay","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Action: {{Event}}","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Label: {{Product Name}} (Variable created in Variables section. It represents the product name)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Value: Empty","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Fire On: More > Choose from existing Triggers: ebClickCallback","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Create Tag","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"With this tag, when a user clicks in a product, an event in Google Analytics is created with these values:","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph"},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Event Category: Overlay","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Event Action: ebClickCallback","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Event Label: Clicked products' name","type":"text"}]}]}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"1.2"},"legacyAnchorId":{"value":"GoogleAnalyticsandGoogleTagManagerIntegration-1.2"}},"macroMetadata":{"macroId":{"value":"a5bfe45f-d5d9-4cde-9e50-383acf344257"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"07383ecf-14a3-42f1-9263-29bb5735a71c"}},{"text":"Instructions for versions 1.2 and 1.3","type":"text"}]},{"type":"paragraph","content":[{"text":"Note:","type":"text","marks":[{"type":"strong"}]},{"text":" GTM instructions for these versions live in ","type":"text"},{"text":"this separate page","type":"text","marks":[{"type":"link","attrs":{"href":"https://searchbroker.atlassian.net/wiki/spaces/EBKB/pages/78182731"}}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"By default, the Overlay provides callbacks to measure queries and clicks using the GA API in addition to EmpathyBroker Tagging. Simply you should define two functions, one for sending query information to GA and another one for sending clicks information.","type":"text"}]},{"type":"paragraph","content":[{"text":"First of all, please initialize the GA service (it's just a sample, please use the right parameters for your implementation). You can find more information in ","type":"text"},{"text":"this guide","type":"text","marks":[{"type":"link","attrs":{"href":"https://developers.google.com/analytics/devguides/collection/analyticsjs/"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"GA Code","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"\n\n","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"1. Search tracking","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"The data object received by the function will contain:","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"d6f72160-6f17-4e0e-bd4b-d48395f38407"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Parameter","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"q","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"The query typed by the user","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"page","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Page number for grabbing pagination data","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"totalHits","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Number of results returned by the query","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Sample (the function name can be modified)","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function searchCallback(data) {\n // ga('set', 'page', 'http://site.com/overlay?q=' + data.q);\n // ga('send', 'pageview');\n // ga('send', 'event', 'Search-Overlay', 'search', data.q, data.totalHits);\n // it's just a sample, you can define the GA metric with other parameters\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"2. Product click tracking","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Let us know what data you want to receive in your custom function, by default the title of the clicked resource will be included.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"ac733747-af58-4406-86e5-7a875726d343"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Parameter","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"q","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"The query typed by the user","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"page","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Page number for grabbing pagination data","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"totalHits","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Number of results returned by the query","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"title","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Title of clicked resource","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Sample (the function name can be modified)","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function productClickCallback(data) {\n // ga('send', 'event', 'Search-Overlay', 'click', data.q);\n // it's just a sample, you can define the GA metric with other parameters\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"3. Update the Overlay creation using these functions","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"type":"hardBreak"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"\n\n\n \n","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"1.1"},"legacyAnchorId":{"value":"GoogleAnalyticsandGoogleTagManagerIntegration-1.1"}},"macroMetadata":{"macroId":{"value":"6bb1723ff08222a0165e691d9ff3fd84d79e46a55e5c87285b48e60bfd7be611"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"2b78dce7-1b51-4326-8147-52d3d3f91789"}},{"text":"Instructions for version 1.1","type":"text","marks":[{"type":"textColor","attrs":{"color":"#414649"}}]}]},{"type":"paragraph","content":[{"text":"Note:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#414649"}},{"type":"strong"}]},{"text":" GTM instructions for these versions live in ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#414649"}}]},{"text":"this separate page","type":"text","marks":[{"type":"textColor","attrs":{"color":"#414649"}},{"type":"link","attrs":{"href":"https://searchbroker.atlassian.net/wiki/spaces/EBKB/pages/78182731"}}]},{"text":".","type":"text","marks":[{"type":"textColor","attrs":{"color":"#414649"}}]},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"By default, the Overlay provides callbacks to measure queries and clicks using the GA API in addition to EmpathyBroker Tagging. Simply you should define two functions, one for sending query information to GA and another one for sending clicks information.","type":"text"}]},{"type":"paragraph","content":[{"text":"First of all, please initialize the GA service (it's just a sample, please use the right parameters for your implementation). You can find more information in ","type":"text"},{"text":"this guide","type":"text","marks":[{"type":"link","attrs":{"href":"https://developers.google.com/analytics/devguides/collection/analyticsjs/"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"GA Code","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"\n\n","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"1. Search tracking","type":"text"}]},{"type":"paragraph","content":[{"text":"The data object received by the function will contain:","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":378.0,"localId":"bf80ba24-eb4a-4297-8093-7dab832ccded"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[90.0]},"content":[{"type":"paragraph","content":[{"text":"Parameter","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[288.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[90.0]},"content":[{"type":"paragraph","content":[{"text":"term","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[288.0]},"content":[{"type":"paragraph","content":[{"text":"The query typed by the user","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[90.0]},"content":[{"type":"paragraph","content":[{"text":"page","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[288.0]},"content":[{"type":"paragraph","content":[{"text":"Page number for grabbing pagination data","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[90.0]},"content":[{"type":"paragraph","content":[{"text":"numFound","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[288.0]},"content":[{"type":"paragraph","content":[{"text":"Number of results returned by the query","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Sample (the function name can be modified)","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function searchCallback(data) {\n // ga('set', 'page', 'http://site.com/overlay?q=' + data.term);\n // ga('send', 'pageview');\n // ga('send', 'event', 'Search-Overlay', 'search', data.term, data.numFound);\n // it's just a sample, you can define the GA metric with other parameters\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"2. Product click tracking","type":"text"}]},{"type":"paragraph","content":[{"text":"Let us know what data you want to receive in your custom function, by default the title of the clicked resource will be included.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"9dc00fb1-8bc5-4579-988f-0698b7057de4"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Parameter","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"name","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Document name or title","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Sample (the function name can be modified)","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function productClickCallback(data) {\n // ga('send', 'event', 'Search-Overlay', 'click', data.term);\n // it's just a sample, you can define the GA metric with other parameters\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"3. Update the Overlay creation using these functions","type":"text"}]},{"type":"paragraph"},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"\n\n\n \n ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Do you need additional GA metrics to be applied into the Overlay?","type":"text"}]},{"type":"paragraph","content":[{"text":"Please contact ","type":"text"},{"text":"EmpathyBroker Support","type":"text","marks":[{"type":"link","attrs":{"href":"http://support.empathybroker.com/"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Interface X archetype integration","type":"text"}]},{"type":"paragraph","content":[{"text":"To integrate the Interface X Archetype layer in a commerce store, ","type":"text"},{"text":"load","type":"text","marks":[{"type":"strong"}]},{"text":" the generated Interface X JavaScript file and ","type":"text"},{"text":"initialize","type":"text","marks":[{"type":"strong"}]},{"text":" it.","type":"text"}]},{"type":"paragraph","content":[{"text":"Depending on your business needs, Interface X supports two initialisation types:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Automatic initialisation","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"On-demand initialisation","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Initializing the Interface X project automatically","type":"text"}]},{"type":"paragraph","content":[{"text":"Steps to initialize the project automatically:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Configure the JavaScript snippet","type":"text","marks":[{"type":"strong"}]},{"text":" to define either an initialization object or a function.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Load and initialize","type":"text","marks":[{"type":"strong"}]},{"text":" the Interface X script.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Configuring the snippet","type":"text"}]},{"type":"paragraph","content":[{"text":"First, add the JavaScript snippet configuration to define multiple initialization options, i.e. the API to use, the language or currency to display, or even the tagging parameters to collect search-related data to generate conversational search features and analytics.","type":"text"}]},{"type":"paragraph","content":[{"text":"Depending on whether you are retrieving ","type":"text"},{"text":"static or dynamic configuration values","type":"text","marks":[{"type":"strong"}]},{"text":" in your snippet configuration, you define an ","type":"text"},{"text":"object","type":"text","marks":[{"type":"strong"}]},{"text":" or a ","type":"text"},{"text":"function","type":"text","marks":[{"type":"strong"}]},{"text":" to initialize Interface X:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To retrieve ","type":"text"},{"text":"static","type":"text","marks":[{"type":"strong"}]},{"text":" configuration values, define an initialization object as follows:","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"window.initX = {\n instance: 'my-store',\n scope: 'desktop',\n lang: 'en',\n currency: 'EUR',\n consent: false\n};","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To retrieve configuration values ","type":"text"},{"text":"dynamically","type":"text","marks":[{"type":"strong"}]},{"text":", use an initialization function:","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"window.initX = function () {\n return {\n instance: 'my-store',\n env: location.href.includes('.pre.') ? 'staging' : undefined,\n scope: 'web',\n lang: localStorage.get('lang'),\n currency: localStorage.get('currency'),\n consent: localStorage.get('consent')\n };\n};","type":"text"}]},{"type":"heading","attrs":{"level":6},"content":[{"text":"NOTE:","type":"text"}]},{"type":"paragraph","content":[{"text":"You can change the snippet configuration values once the project is deployed. Use the","type":"text","marks":[{"type":"em"}]},{"text":" ","type":"text"},{"text":"/x-archetype/public/snippet-script.js","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"},{"text":"file to perform hot changes for the snippet parameters. For more information on the supported parameters, check out Snippet configuration.","type":"text","marks":[{"type":"em"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Loading the script","type":"text"}]},{"type":"paragraph","content":[{"text":"Once the snippet configuration is ready, add the Interface X script to your webpage. The script is hosted in a URL with the following syntax:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Production","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"https://x.empathy.co/{INSTANCE}/app.js","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Staging","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"https://x.staging.empathy.co/{INSTANCE}/app.js","type":"text","marks":[{"type":"code"}]}]}]}]},{"type":"paragraph","content":[{"text":"For example, to load the production version script for the instance ","type":"text"},{"text":"my-store","type":"text","marks":[{"type":"em"}]},{"text":", you need to add the following scripts to your HTML:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n","type":"text"}]},{"type":"paragraph","content":[{"text":"In the case you want to load the script for the staging environment, you just modify the script attribute ","type":"text"},{"text":"src","type":"text","marks":[{"type":"code"}]},{"text":" so that it points to the staging environment as follows:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n","type":"text"}]},{"type":"paragraph","content":[{"text":"Thus, when the Interface X JavaScript file is loaded, it retrieves the configuration from the defined object or function.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Initializing the Interface X project on demand","type":"text"}]},{"type":"paragraph","content":[{"text":"On-demand initialization allows you to control when Interface X is loaded.","type":"text"}]},{"type":"paragraph","content":[{"text":"Steps to initialize the project on demand","type":"text","marks":[{"type":"strong"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Load","type":"text","marks":[{"type":"strong"}]},{"text":" the Interface X script.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Initialize","type":"text","marks":[{"type":"strong"}]},{"text":" Interface X.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Loading the script","type":"text"}]},{"type":"paragraph","content":[{"text":"Add the Interface X script hosted in a URL with the following syntax:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Production","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"https://x.empathy.co/{INSTANCE}/app.js","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Staging","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"https://x.staging.empathy.co/{INSTANCE}/app.js","type":"text","marks":[{"type":"code"}]}]}]}]},{"type":"paragraph","content":[{"text":"For example, to load the production version script for the instance ","type":"text"},{"text":"my-store","type":"text","marks":[{"type":"em"}]},{"text":", you need to add the following script to your HTML:","type":"text"}]},{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"In the case you want to load the script for the staging environment, you just modify the script attribute ","type":"text"},{"text":"src","type":"text","marks":[{"type":"code"}]},{"text":" so that it points to the staging environment as follows:","type":"text"}]},{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"code"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Initializing Interface X","type":"text"}]},{"type":"paragraph","content":[{"text":"Since no initialization configuration is defined when loading the script, you need to ","type":"text"},{"text":"invoke the initialization function","type":"text","marks":[{"type":"strong"}]},{"text":" created automatically in the ","type":"text"},{"text":"X API (opens new window)","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/empathyco/x/blob/main/packages/x-components/src/x-installer/api/base-api.ts"}}]},{"text":"object to provide the initialization options:","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n","type":"text"}]},{"type":"paragraph","content":[{"text":"For this example, the initialization function is called immediately after loading the script, but it can be called at any time. Note that you need to call this function only ","type":"text"},{"text":"once","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"paragraph"}],"version":1}

Browser not supported