Skip to main content
All CollectionsIntegrations
Sending Claspo events to Google Analytics
Sending Claspo events to Google Analytics

Learn how to integrate your Claspo account with Google Analytics

M
Written by Maryna Hura
Updated over 2 weeks ago

You can send the event data related to the interaction of users with your Claspo widgets to your Google Analytics (GA) account.

Claspo supports the Universal Analytics and Google Analytics 4 scripts for tracking events on your website.


NOTE:

It is recommended to install the Google Analytics 4 script.

Effective July 1, 2023, Google Analytics 4 took over from Universal Analytics as the primary analytics platform. Consequently, Universal Analytics properties ceased data processing operations.


You have to install the script, using one of the following methods:

The entry point for events depends on the method you use to install the script:

  • If there is GoogleAnalytics3 (ga), send into it.

  • If there is dataLayer and there is gtag and dataLayer has at least one G-* tag:

a. Then call gtag with parameters (send_to is added) for each tag id.

b. Otherwise, we write to dataLayer.

Setting up GA4 script for a website

To set up the Google Analytics GA4 script for a website:

1. In your GA account, select Admin (the cog icon) to open the account settings.

2. Click + Create and select Property from the dropdown menu.

3. At the Property creation step, enter the Property name (required), select the corresponding values in the Reporting time zone and Currency sections, then click Next.

4. At the Business details step, select Industry category (required) and Business size (required), then click Next.

5. At the Business objectives step, select one or several checkboxes beside the business objectives, then click Create.

6. At the Data collection step, select Web.

7. In the Set up data stream window, enter the website URL and stream name in the corresponding boxes, then click Create stream.

8. Go to Web stream details and click the copy icon beside Measurement ID.

9. Go to your website, insert the following code after the <head> tag, and substitute MEASUREMENT_ID in this code with the one copied in the previous step.

<!-- Google Analytics -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={MEASUREMENT_ID}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', '{MEASUREMENT_ID}');
</script>

Setting up GA4 with GTM

Before proceeding to setting up GA4 with GTM, you have to:

1. Create a GTM account and a container following these instructions.

2. Follow the GTM standard web page installation instructions.

To set up Google Analytics 4 (GA4) with Google Tag Manager (GTM):

1. Follow steps 1 to 7 described in Setting up GA4 script for a website.

2. In Tag Manager, select Tags in the left-hand side menu and click New to create a new tag.

3. Set the following tag configuration and triggering, then click Save:

  • Select Google Tag as the tag type.


    NOTE:
    If you want to send event data from GTM to GA4, please read this article to learn how to set up tags.


  • Enter the measurement ID copied in step 8 of this instruction in Tag ID.

  • Select All pages for Firing Triggers.

4. In the left-hand side menu, select Triggers and then New to create a new trigger.

5. Set the following configuration in the trigger configuration window, then click Save:

  • Select Custom Event as the trigger type.

  • Enter claspo as the event name.

  • Select All Custom Events for the trigger to fire on.

6. Go to Variables in the left-hand side menu and select New in the User-Defined Variables section.

7. In the slide-out window, set the following variable configuration, then click Save:

  • Variable Type

  • Data Layer Variable Name

  • Data Layer Version

You have to create 3 variables with the following parameters:

Variable Type

Data Layer Variable Name

Data Layer Version

Data Layer Variable

eventAction

Version 2

Data Layer Variable

eventCategory

Version 2

Data Layer Variable

eventLabel

Version 2

8. Go to Tags in the left-hand side menu, and create a new tag with the following configuration:

  • Select Google Analytics: GA4 Event as Tag Type.

  • Select the tag you created in step 3 in Configuration Tag.

  • Enter claspo as the event name.

  • In Event Parameters, use the parameters and their values created in step 6.

  • In Firing Triggers, select claspo event.

9. Click Save.

10. Select Submit.

Enabling widget event data exporting to GA

To allow the transfer of widget event data:

  1. In your Claspo account, click the Widgets menu item and select the widget, which events you want to export.

    Selecting a widget
  2. In the Widget Details menu, select Integrations and enable the Export data to Google Analytics slide button.

    Enabling GA integration

All the event data collected for that widget will be passed automatically to your GA account.

Viewing the real-time analytics

To view the real-time analytics in your GA account:

1. Select ReportsRealtime in the left-hand side menu.

2. Select claspo in the Event name column.

The list of event parameters displays. Click them to view the events.

The highlighted parameters are explained in the following table.

Parameter

Description

eventAction

It contains the events as described in Event categories and actions.

eventCategory

Widget type.

eventLable

Widget name.

Event categories and actions

GA displays Claspo events in a table as shown below.

GA events table

The Event Category column contains the description of the widget or form type as described in the following table.

Widget/form type

Description

BUILT_IN

Inline widget or form

DETACHED

Pop-ups

FLOATING_BOX

Floating box, informer

LAUNCHER

Launcher

CONTENT_LOCKER

Content locker

The Event Action column in GA contains the action type made on a widget. The event actions are explained in the table below.

Event Action

Description

LauncherShow_[ID]

The launcher button displays on the website.

LauncherClick_[ID]

The launcher button clicked.

FormShow_[ID]

The form was displayed on the website.

FormButtonClick_[ID]

The form button clicked.

FormClose_[ID]

A site visitor closed the form.

FormStartFilling_[ID]

A site visitor started filling out the form.

FormFinish_[ID]

A site visitor completed the subscription form (clicked “Subscribe”, no form validation errors).

FormSuccessSubscribe_[ID]

Form filling out status (subscription success).

FormAlreadySubscribe_[ID]

Form filling out status (already subscribed).

FormErrorSubscribe_[ID]

Form filling out status (subscription error).

FormClick_[ID]

Clicked anywhere on the informer.

The [ID] part of the events for a specific widget sending its data to GA has the following structure: f(form){id}v(variant){id}, where “f(form){id}” is the form ID and “v(variant){id}” is the form variant ID (see Note).

For example, FormShow_f781v781 in your GA table means that the form with the ID of 781, and the variant ID of 781 was displayed on the site.

The form ID is displayed in Claspo, on the Widgets page in the ID column.

Widgets ID

Did this answer your question?