Happy

Track reviews and comments as Google Analytics events by pasting a small HTML widget on your page.

Dependancies

You need Google Tag Manager and Google Analytics installed on your site before you can use this widget.

Installation

Step 1: Include the widget in your page:

<div class="happy">
    <div class="happy__review" style="display: none;">
        <div class="happy__title">Was this article helpful?</div>
        <ul class="happy__answers">
            <li><a class="happy__button js-happy-yes" href="#">Yes</a></li>
            <li><a class="happy__button js-happy-no" href="#">No</a></li>
        </ul>
    </div>
    <div class="happy__comment" style="display: none;">
        <div class="happy__title">How can we improve?</div>
        <textarea name="customer-feedback" class="js-happy-feedback" cols="10" rows="3"></textarea>
        <button class="happy__button js-happy-comment">Send feedback</button>
    </div>
    <div class="happy__thanks" style="display: none;">
        <div class="happy__title">Thanks for your feedback!</div>
    </div>
</div>

Step 2: Include JavaScript and CSS

Include the JavaScript and CSS source files at the bottom of your page, right before the closing </body> tag.

<link rel="stylesheet" href="../source/min/happy-min.css" media="screen">
<script src="../source/min/happy-min.js"></script>
<script>new Happy();</script> 

Step 3: Configure Google Tag Manager

Import container.json into your Google Tag Manager account. Add the UA code from your Google Analytics property to the event tag.

Step 4: Configure Google Analytics (optional)

Add two custom metrics (type: hit) to your Google Analytics property. Use the values from the table below:

Index	Custom metrics
1	Page reviews – satisfied customers
2	Page reviews – number of reviews

Also add a calculated metric (type: percentage) to your Google Analytics views with the formula below. Name it 'Satisfied customers'

{{Page reviews - satisfied customers}} / {{Page reviews - number of reviews}}

Options

Widget title

You can set a widget title in the data-title attribute of the widget. This title will show up as Event Action in Google Analytics. For example:

<div class="happy" data-title="FAQ: Question #1521">

Translations

You can provide some translations like this:

<script>
    new Happy({
        eventCategory: 'Tevredenheid',
        eventLabelSatisfied: 'Tevreden',
        eventLabelDissatisfied: 'Ontevreden'
    });
</script>

Widget class name

Use your own class name like this

<script>
    new Happy({
        className: 'my-custom-widget-classname'
    });
</script>