ECE Chat - Google Analytics Example

<!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>
 
    <script>
        ga_chat_backup = function() {
            dataLayer.push({
                'event': 'productClick',
                'ecommerce': {
                    'click': {
                        'actionField': {
                            'list': 'Search Results'
                        },
                        'products': [{
                            'name': 'SalesChat',
                            'id': '5001',
                            'brand': 'Cisco',
                            'category': 'Chat',
                            'variant': 'standard',
                        }]
                    }
                },
                'eventCallback': function() {
                    alert('ALL tags which fire on {{event}} equals fireTags have now fired');
                    //document.location = 'http://purplepi.ie'
                    //egainChat.openHelp();
                }
            });
        }
    </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">&times;</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>
    &nbsp;
    <div class="d-flex justify-content-center ">
		<h2>Includes Proactive Chat!<h2>
    </div>
    &nbsp;
	<!--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>