# JS API - Events and Google Analtytics

Use our Google Analytics integration to measure events and user actions from Rake Live Chat widgets right into your Google Analytics account. Learn how many chats you had, how many proactive messages were displayed or how many invites were accepted to start a chat. You'll know out more about visitors' browsing habits and be able to measure when a Rake Live Chat occurred during a session, providing a detailed insight into how much impact your are having by chatting.

## What is Google Analytics?
Google Analytics is the web analytics service, used worldwide by millions of companies. It provides statistics and comes with world-class analytical tools as well as features for marketing and SEO (data visualization, segmentation for analysis, custom reports, etc.).

The tool tracks interactions between your website and visitors. You can see charts about traffic on your website, check conversions and analyze the behavior of your visitors.

Using Google Analytics, you can find answers to the following questions:

How many people visit my website?
Where do my visitors live?
What websites send users to my website?
What marketing tactics drive the most traffic to my website?

### Requirements

To start with Google Analytics, you need to embed the tracking code into your website.

Include the Google Tag Manager script on your page with your **UA-XXX-Y** value from your Google Analytics account. This must be present on the site or the page along with the Rake Live Chat widget script.

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

###### EXAMPLE WIDGET SCRIPT

This script initiates the widget, but also sends events to google analytics based on the gtag refenced elsewhere on the site/page.

<!-- Start of Rake Live Chat Widget -->
<script src="https://widget.rake.ai/js/widget.js" type="text/javascript">
</script>
<script>
    var widget = new RakeLiveChatWidget("{{YOUR-WIDGET-HASH- HERE}}");
    widget.addEventListener("proactive-message-play", (data) => {
      console.log(`Widget event: proactive-message-play`, data);
      data.payload.forEach(({ name: proactiveMessageName}) => {
          gtag('event', `proactive-message-displayed-${proactiveMessageName}`, {
          'event_category': 'rakelivechat',
        });
      })
      
    });   
    widget.addEventListener("session-start", (data) => {
      console.log(`Widget event: session-start`, data);
      gtag('event', 'chat-session-started', {
          'event_category': 'rakelivechat',
        });
    });
    widget.addEventListener("session-end", (data) => {
      console.log(`Widget event: session-end`, data);
      
      gtag('event', 'chat-session-ended' + (data.isUser ? '-agent': '-user'), {
          'event_category': 'rakelivechat',
        });
    });
</script>
<!-- End of Rake Live Chat Widget -->

## Understanding Google Analtyics Events and Goals
> Events are finite, typically there are not too many of them in any one category. Use the "event_label" element to add specifics.
> EXAMPLE:
> 'event', 'chat-session-ended'{
> 'event_category': 'rakelivechat',
> 'event_label': 'ended-by' +(data.isUser ? '-agent': '-user'), //this is optional
> 'event_value': '0' // this is optional
}

Applying Events to GA "Goals"

## Rake Live Chat Widget - JS API Events for Google Analytics
<table>
<tr valign="top">
<td>
Event: <b>open</b>
<pre>
widget.addEventListener("open", () => {
console.log(`Widget event:session-start`);

});
</pre>
<br>
This event is fired when a user clicks to open the chat widget.
</td>
<td>
Example
<img src="https://i.imgur.com/Xaxx9Yk.gif">
</td>
</tr>
<tr valign="top">
<td>
Event:<b>close</b>
<pre>
widget.addEventListener("minimized", () => {
console.log(`Widget event:minimized`);
});
</pre>
<br>
This event is fired when a user clicks to minimize the widget.
</td>
<td>
Example
<img src="https://i.imgur.com/YORQaIg.gif">
</td>
</tr>

<tr valign="top">
<td>
Event:<b>session-end</b>
<pre>
widget.addEventListener("session-end", (data) => {
console.log(`Widget event:session-start`, data);
});
</pre>
<br>
This event is fired when an existing chat session is closed.
Data field include property: { isUser: boolean }
</td>
<td>
Example
<img src="https://i.imgur.com/BmxNx8u.gif"></td>
</tr>
<tr valign="top">
<td>
Event: <b>session-start</b>
<pre>
widget.addEventListener("open", () => {
console.log(`Widget event:session-start`);

});
</pre>
<br>
This event is fired when a user initiates a new chat session.
</td>
<td>
Example
<img src="https://i.imgur.com/Xaxx9Yk.gif">
</td>
</tr>
<tr valign="top">
<td>
Event: <b>proactive-message-play</b>
<pre>
widget.addEventListener("proactive-message-play", () => {
console.log(`Widget event:proactive-message-play`);

});
</pre>
<br>
This event is fired when a programmable proactive message triggers and is displayed to the visitor.
</td>
<td>
Example
<img src="https://i.imgur.com/PXAvYCO.gif">
</td>
</tr>

</table>

## Example script using multiple events
Below is the actual script the webmaster would apply when adding the Rake Live Chat widget to their site. In this case the webmaster is trying ot track:
* Proactive messages fired
* Sessions started
* sessions ended

var widget = new RakeLiveChatWidget("{{YOUR WIDGET HASH GOES HERE}}");
    widget.addEventListener("proactive-message-play", (data) => {
      console.log(`Widget event: proactive-message-play`, data);
      data.payload.forEach(({ name: proactiveMessageName}) => {
          gtag('event', `proactive-message-displayed-${proactiveMessageName}`, {
          'event_category': 'rakelivechat',
        });
      })
      
    });   
    widget.addEventListener("session-start", (data) => {
      console.log(`Widget event: session-start`, data);
      gtag('event', 'chat-session-started', {
          'event_category': 'rakelivechat',
        });
    });
    widget.addEventListener("session-end", (data) => {
      console.log(`Widget event: session-end`, data);
      
      gtag('event', 'chat-session-ended' + (data.isUser ? '-agent': '-user'), {
          'event_category': 'rakelivechat',
        });
    });