Sending Yespo Widget Events to Google Analytics

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

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

🚧

Important

It is recommended to install the Google Analytics 4 script, since the Google Universal Analytics property will stop processing data starting on July 1, 2023 (July 1, 2024, for Analytics 360 properties).

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

After that, you have to enable exporting the widget event data to Google Analytics.

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:
    1. Then call gtag with parameters (send_to is added) for each tag id.
    2. 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 the Admin icon to open the GA settings.
Google Analytics Admin page with the Admin icon highlighted in the left-hand side menu
  1. Click Create → Property.
Google Analytics Admin page with the Create dropdown open and the Property option highlighted
  1. In the Property setup, enter the property name, select the country, the time zone and the currency, then click Next.
Create a property form with property name, time zone, and currency fields highlighted and the Next button highlighted
  1. Describe your business  — indicate the industry category and company size.
Describe your business form with industry category and business size fields highlighted and the Next button highlighted
  1. Choose your business objectives and click Create.
Choose your business objectives step with the Sales option selected and the Create button highlighted
  1. In your created property menu, select the Web platform.
Start collecting data step with the Web platform option highlighted

Enter the website URL and the stream name in the corresponding boxes, then click Create & continue.

Set up data stream window with Website URL and Stream name fields filled in and the Create and continue button highlighted

In the Web stream details menu, click the copy icon beside the Measurement ID.

Web stream details window with the copy icon next to the Measurement ID highlighted
  1. Go to your site and insert the following code after the <head> tag, where substitute MEASUREMENT_ID 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 in GTM

Before proceeding to setting up GA4 in 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) in Google Tag Manager (GTM):

  1. Follow steps 1 to 6 described in the Setting up GA4 script for a website section.
  2. In Tag Manager, select Tags in the left-hand side menu and click New to create a new tag.
Google Tag Manager Tags page with the Tags menu item and New button highlighted

3. In the window, enter the tag name, set the following tag configuration and triggering, then click Save:

  • Select Google Analytics: GA4 Event as Tag Type.
  • Enter the measurement ID copied in step 7 of this [instruction](#Setting up GA4 script for a website).
  • Select All pages for Firing Triggers.
Tag configuration window with Google Analytics GA4 Event tag type, Measurement ID, and All Pages trigger highlighted
  1. In the left-hand side menu, select Triggers and then New to create a new trigger.
Google Tag Manager Triggers page with the Triggers menu item and New button highlighted
  1. In the slide-out window, enter the trigger name and click the Trigger Configuration pane.
Trigger configuration window with the trigger name field and trigger type selection area highlighted
  1. Set the following configuration in the trigger configuration window, then click Save:
  • Select Custom Event as Trigger Type.
  • Enter yespo as Event name.
  • Select All Custom Events for the trigger to fire on.
Trigger configuration window with Custom Event trigger type, yespo event name, and All Custom Events option highlighted
  1. Go to Variables in the left-hand side menu, and select New in the User-Defined Variables pane.
Google Tag Manager Variables page with the Variables menu item and New button under User-Defined Variables highlighted
  1. In the slide-out window, enter configuration name and click the Variable Configuration pane.
Variable configuration window with the variable name field and variable type list highlighted, with Data Layer Variable selected
  1. Set the following variable configuration, then click Save:
  • Variable Type
  • Data Layer Variable Name
  • Data Layer Version
Variable configuration window with Data Layer Variable type, Data Layer Variable Name, and Data Layer Version fields highlighted

You have to create 3 variables with the following parameters:

Variable TypeData Layer Variable NameData Layer Version
Data Layer VariableeventActionVersion 2
Data Layer VariableeventCategoryVersion 2
Data Layer VariableeventLabelVersion 2
  1. Go to Tags in the left-hand side menu, and create a new tag with the following configuration, then click Save:
  • Select Google Analytics: GA4 Event as Tag Type.
  • Select the tag you created at step 3 as Configuration Tag.
  • Enter yespoas the event name.
  • In Event Parameters, use the parameters and their values created in steps 8 and 9.
  • In Firing Triggers, select Yespo event.
Tag configuration window with Google Analytics GA4 Event tag type, event name, event parameters, and Firing Triggers highlighted
  1. Click Submit on the top panel.
Google Tag Manager Tags list with three tags including YespoGA4 and the Submit button highlighted

Enabling Widget Event Data Exporting to GA

To enable the widget data transfer:

  1. In your Yespo account, click SiteWidgets, and select the widget type in the left-hand side menu.
Analytics
  1. Select the widget, which events you want to export.
  2. In the widget menu, select Integrations and enable the Export data to Google Analytics slide button.
Widget Integrations tab with the Export data to Google Analytics toggle enabled and highlighted

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.
Google Analytics Realtime overview report with the Realtime menu item and Event count by Event name pane highlighted
  1. In the Event count by Event name pane, Select yespo in the Event name column.

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

Event count by Event name pane for the yespo event with eventAction, eventCategory, and eventLabel parameters highlighted

The highlighted parameters are explained in the following table.

ParameterDescription
eventActionIt contains the events as described in Event categories and actions
eventCategoryWidget type
eventLableWidget ID

Event Categories and Actions

GA displays Yespo events in a table as shown below.

Google Analytics table with Event Category and Event Action columns listing widget event names like FormFinish and FormShow

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

Widget/form typeDescription
BUILT_INInline widget/form
DETACHEDPop-ups
FLOATING_BOXFloating box, informer
LAUNCHERLauncher
CONTENT_LOCKERContent 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 ActionDescription
LauncherShow_[ID]The launcher button displays on a website.
LauncherClick_[ID]The launcher button clicked.
FormShow_[ID]The form is displayed on a website.
FormClose_[ID]A site visitor closed the form.
FormButtonClick_[ID]A site visitor clicked the form button.
FormClick_[ID]A site visitor clicked anywhere within the form.
FormStartFilling_[ID]A site visitor started filling up the form.
FormFinish_[ID]A site visitor completed the subscription form (clicked “Subscribe”, no form validation errors)
FormSuccessSubscribe_[ID]Form filling up status (subscription success)
FormAlreadySubscribe_[ID]Form filling up status (already subscribed)
FormErrorSubscribe_[ID]Form filling up status (subscription error)

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.

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 a site.

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

Widgets page listing three widgets with the ID column highlighted


Did this page help you?