ECE Chat - Google Analytics Example
- chat-google-analytics.html
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--Manually set chatStatus for testing purposes (and disable chatStatus.php lookup)--> <!-- <script> var chatStatus = 'open'; var chatBusyReason = ""; var chatTimer = "5000"; </script> --> <!-- Custom PHP Javascript using Cisco ECE & CCE APIs to check opening hours - which returns variable 'chatStatus' Make sure to pass in a valid BusinessHour and Chat EntryPoint ID Example Response: var chatStatus = 'busy'; var chatBusyReason = 'MinAgentCount'; var chatTimer = '10000'; --> <script type="text/javascript" src="http://nas2.home.purplepi.ie/chat/chatStatus.php?chatEntryId=1001&businessHoursId=5001"></script> <script> if (chatStatus == null) { var chatStatus = 'closed'; var chatTimer = '0'; var chatBusyReason = 'out of service'; } </script> <!--Google GA Chat productClick --> <script> function ga_chat(productObj) { dataLayer.push({ 'event': 'productClick', 'ecommerce': { 'click': { 'actionField': { 'list': 'Search Results' }, 'products': [{ 'name': 'SalesChat', 'id': '5001', 'brand': 'Cisco', 'category': productObj.category, 'variant': productObj.variant }] } }, 'eventCallback': function() { if (productObj.category == 'Chat') { //alert('Chat Selected!'); //document.location = 'http://example.com' egainChat.openHelp(); } if (productObj.category != 'Chat') { //alert('ChatCategory: ' + productObj.category + ', ChatVariant: ' + productObj.variant); } } }); } </script> <!-- Google Tag Manager --> <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-54J4MFN'); </script> <!-- End Google Tag Manager --> <!-- Optional JavaScript from Bootstrap--> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>--> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Simple Chat Page with Proactive Chat</title> <!-- Cisco Provided ECE JavaScript --> <script language=javascript> var egainChat = egainChat || {}; /*eGain Chat server */ egainChat.serverURL = "http://ucce-ece-db-12.lab2.purplepi.ie/system"; /*eGain Chat Entry Point*/ egainChat.EntryPointId = "1001"; /*eGain Chat Locale*/ egainChat.Locale = "en-US"; /*eGain template name*/ //egainChat.Template = "purplepi-anon"; egainChat.Template = "purplepi-nameonly"; /*Set to true to enable posting attributes to templates*/ egainChat.PostChatAttributes = false; egainChat.CustomerContextParameters = {}; egainChat.openHelp = function() { var domainRegex = /^((?:http?:\/\/)?(?:www\.)?([^\/]+))/i; try { if (egainChat.eglvchathandle != null && egainChat.eglvchathandle.closed == false) { egainChat.eglvchathandle.focus(); return; } } catch (err) {} var refererName = ""; refererName = encodeURIComponent(refererName); var refererurl = encodeURIComponent(document.location.href); var hashIndex = refererurl.lastIndexOf('#'); if (hashIndex != -1) { refererurl = refererurl.substring(0, hashIndex); } var eglvcaseid = (/eglvcaseid=[0-9]*/gi).exec(window.location.search); var vhtIds = ''; if (typeof EGAINCLOUD != 'undefined' && EGAINCLOUD.Account.getAllIds) { var ids = EGAINCLOUD.Account.getAllIds(); vhtIds = '&aId=' + ids.a + '&sId=' + ids.s + '&uId=' + ids.u; } var EG_CALL_Q = window.EG_CALL_Q || []; EG_CALL_Q.push(['enableTracker', true]); var eGainChatUrl = egainChat.serverURL + '/templates/chat/' + egainChat.Template + '/index.html?subActivity=Chat&entryPointId=' + egainChat.EntryPointId; eGainChatUrl += '' + '&templateName=' + egainChat.Template + '&locale=' + egainChat.Locale + '&ver=v11'; eGainChatUrl += '&postChatAttributes=' + egainChat.PostChatAttributes + '&eglvrefname=' + refererName + '&' + eglvcaseid + vhtIds; var domain = domainRegex.exec(eGainChatUrl)[0]; if ((eGainChatUrl + refererurl).length <= 2000) eGainChatUrl += '&referer=' + refererurl; var params = 'height=650,width=450,resizable=yes,scrollbars=yes,toolbar=no'; window.addEventListener('message', function(event) { try { var message = JSON.parse(event.data); if (event.origin === domain && message.Caller.indexOf('EGLV_DOCK') !== -1) { if (message.Key === 'X-egain-session') { var response = { value: window.sessionStorage.getItem('X-egain-session'), caller: message.Caller }; event.source.postMessage(JSON.stringify(response), event.origin); } } } catch (e) {} }); if (egainChat.PostChatAttributes) { if (window.navigator.userAgent.indexOf("Trident") != -1 || window.navigator.userAgent.indexOf("Edge") != -1) { var win = document.getElementById('egainChatDomainFrame'); win.contentWindow.postMessage(JSON.stringify(egainChat.CustomerContextParameters), domain); } else { window.addEventListener('message', function(event) { try { var message = JSON.parse(event.data); if (event.origin === domain && message.Caller.indexOf('EGLV_DOCK') !== -1) { if (message.Key === 'EgainChatParameter') { var response = { value: egainChat.CustomerContextParameters, caller: message.Caller }; event.source.postMessage(JSON.stringify(response), event.origin); } } } catch (e) {} }); } } egainChat.eglvchathandle = window.open(eGainChatUrl, '', params); }; /*To be called by client website. All the parameters specified in application-chat-defaults must be set here.*/ egainChat.SetCustomerParameters = function(egainAttributeName, attributeValue) { egainChat.CustomerContextParameters[egainAttributeName] = attributeValue; }; egainChat.writeIframeIfRequired = function() { if (egainChat.PostChatAttributes && (window.navigator.userAgent.indexOf("Trident") != -1 || window.navigator.userAgent.indexOf("Edge") != -1)) { var iframe = document.createElement('iframe'); iframe.src = egainChat.serverURL + '/web/view/live/customer/storeparams.html?wsname=' + window.location.protocol + '//' + window.location.host; iframe.style.display = 'none'; iframe.name = 'egainChatDomainFrame'; iframe.id = 'egainChatDomainFrame'; if (typeof document.body !== 'undefined' && document.body !== null) { document.body.appendChild(iframe); } else { setTimeout(egainChat.writeIframeIfRequired, 100); } } } egainChat.writeIframeIfRequired(); </script> </head> <body> <!-- Google Tag Manager (noscript) --> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-54J4MFN" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <!-- End Google Tag Manager (noscript) --> <!-- Proactive Chat (hidden) which using Bootstrap's Modal feature --> <div class="modal fade" id="chatModal" tabindex="-1" role="dialog" aria-labelledby="chatModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="chatModalLabel">Proactive Chat Demo</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Hello, one of our assistents is available to assist you now. <p>Do you want to chat? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" onclick="$('#chatModal').modal('hide');ga_chat({category: 'Chat', variant: 'Proactive'})" ">Chat Now!</button> </div> </div> </div> </div> <div class="d-flex justify-content-center "> <h1>Very Simple Chat Example<h1> </div> <div class="d-flex justify-content-center "> <h2>Includes Proactive Chat!<h2> </div> <!--Chat Options to display to end user - open / closed / busy --> <!--Chat Open--> <div id="mychatOn" align="center" style="display: none "> <!--<button type="button" class="btn btn-primary" onclick="egainChat.openHelp(); ">Chat Now!</button>--> <div> <button type="button" class="btn btn-primary" onclick="disableProactiveChat();ga_chat({category: 'Chat', variant: 'Standard'}) ">Chat Now!</button> </div> </div> <!--Chat Closed / Off --> <div id="mychatOff" align="center" style="display: none "> <h2>We are closed.</h2> </div> <!--Chat Busy--> <div id="mychatBusy" align="center" style="display: none "> <h2>Sorry, we are busy.</h2> <h3>Busy Reason: <script type="text/javascript ">document.write(chatBusyReason)</script></h3> </div> <!-- Custom Cisco ECE JavaScript for Show or Hide the open / closed / busy Chat option based on var 'chatStatus' value--> <script type="text/javascript "> if (chatStatus == 'closed') { $('#mychatOff').show(); $('#mychatOn').hide(); $('#mychatBusy').hide(); ga_chat({category: 'Chat-Status', variant: 'Closed'}) } if (chatStatus == 'open') { $('#mychatOn').show(); $('#mychatOff').hide(); $('#mychatBusy').hide(); ga_chat({category: 'Chat-Status', variant: 'Open'}) //Proactive Chat setTimeout(function() { if (chatTimer != 0) { $('#chatModal').modal(); ga_chat({category: 'Chat-offer', variant: 'Proactive'}); } }, chatTimer); } if (chatStatus == 'busy') { $('#mychatBusy').show(); $('#mychatOff').hide(); $('#mychatOn').hide(); ga_chat({category: 'Chat-Status', variant: 'Busy'}) } function disableProactiveChat() { window.chatTimer = 0; console.log('chatTimer: 0'); } console.log('Source: displaychat.js chatStatus: ' + chatStatus); console.log('Source: displaychat.js chatTimer: ' + chatTimer); </script> </body> </html>
