gtag-event-sender

Send Google Analytics events via HTML attributes. You can send click, scroll and submit events by simply writing attributes in HTML tags.

Install

npm install gtag-event-sender

Usage

In HTML

<script src="../dist/gtag_event_sender.min.js?env=dev&id=UA-11111111-1"></script>

Use param env=dev for run script in development mode. REMOVE this parameter in prodaction. In this mode you can see log in development console and your event not be sent to Google Analystics.

Specify your Google Analystics ID id=UA-11111111-1. Not use this parameter if you want to include Gtag tracking code manualy.

In Webpack

import gtagEventSender from "gtag-event-sender";

Then

gtagEventSender.init(env, id);

Where env = prov|dev, id your Google Analystics ID. Use id=false this parameter if you want to include Gtag tracking code manualy.

How send events

You can send 3 types of event - click, scroll, submit For send event use tag attributes in HTML | Attribute name | Description | |----------------|-------------| | gtag | click, scroll, submit | | gtag_action | The value that will appear as the event action in Google Analytics Event reports. | | gtag_event_category | The category of the event. (optional) | | gtag_event_label | The label of the event. (optional) | | gtag_value | A non-negative integer that will appear as the vent value. (optional) |

See more https://developers.google.com/analytics/devguides/collection/gtagjs/events?hl=en#send_events

Examples:

<button
    gtag='click'
    gtag_action='button click'
    gtag_event_category='Buttons'
    gtag_event_label='Click me'
>
    Send click event
</button>

<form
    action="/"
    method="POST"
    gtag='submit'
    gtag_action='send form'
    gtag_event_category='Forms'
    gtag_event_label='Send me'
    gtag_value='1'
>
    <button>Send me</button>
</form>

<div
    gtag='scroll'
    gtag_action='scroll to block'
    gtag_event_category='Div'
    gtag_event_label='Scroll to me'
>
    Scroll to me
</div>