Overview
Individual form submission data can easily be shared with an organization's existing Google Analytics instance. Connecting these applications together requires more planning than coding, but it is a small investment of time that can reveal a great deal of useful information.
Google Analytics is a robust and affordable (as in free with a Google account) web analytics package. It's easy to configure and install, and is the analytics choice for GiveGab. The following Google Analytics (gtag.js) tracking options can accept data input from the GiveGab embedded form widget:
page views in a funnel towards a defined goal on the organization website
events that occur within third party apps installed on a web page (flash movies, widgets, etc.)
ecommerce transactions that can be tied into an existing Google AdWords campaign
*NOTE: This configuration only applies to GiveGab form widgets running on the same domain address as the Google Analytics package. Form widgets installed on third party domains cannot 'share' their data to a Google Analytics package installed on a different domain.
What's required:
Per Google documentation, it is required to have the Global Snippet placed on each webpage. Please review Google's documentation here for instruction on installation of the Global Snippet tag (gtag.js).
In order to trigger Google Analytics tracking on embedded forms, it is necessary to call an external javascript function (ex.
myFunction) that is executed through the&oncomplete=parameter of your form widget snippet.
<script src='https://widgets.kimbia.com/widgets/form.js?channel=[YOUR CAMPAIGN PREFIX]/[YOUR FORM SUFFIX]&oncomplete=myFunction'></script>
_________________________________________________________________
The following examples require knowledge of the GiveGab Form Widget Data Object & Javascript integration. Please contact enterprise-support@givegab.com
to request a copy of this documentation in PDF format.
_________________________________________________________________
Tracking a form submission as a Google Analytics page view
Using Google Analytics default page tracking model allows you to track a GiveGab form widget submission as a page view. This allows an organization to view the form submission as:
the goal in a page tracking funnel
a step within an existing funnel
gtag('event', 'page_view' , {
'page_path': '[YOUR CUSTOM PAGE PATH HERE]',
'page_title' : '[YOUR CUSTOM PAGE TITLE HERE]'
});
Tracking a form submission as a Google Analytics event
Using Google Analytics event tracking model to capture data about a GiveGab form widget submission is flexible and straight forward. We recommend that all customers take the time to plan their event tracking scheme in advance following Google's recommended best practices.
Tracking an individual donation as an event
Map the following widget data object items to their own Javascript variable:
Donation Type (ex.
var donationType)
* we recommend this when an individual form or Form Chooser can process one-time and recurring/sustaining paymentsInitial Charge (ex.
var total)
* we recommend removing the dollar sign character from your custom variable and convert it from string to a decimal
if (typeof widget.recurringCommitment === 'undefined') {
var donationType = 'OneTime';
} else {
var donationType = 'Recurring';
};
total = widget.initialCharge;
total = total.replace('$','');
total = parseFloat(total);
gtag('event', 'Submit', {
'event_category': 'Donation',
'event_label': donationType + ' : ' + total,
'value': total
});
Tracking an individual registration as an event
Map the following widget data object items to their own Javascript variable:
Registration Type (ex.
var regType)Initial Charge (ex.
var total)
* we recommend removing the dollar sign character from your custom variable and convert it from string to a decimal
var regType = getValueByLabel(widget.answers[0], 'Registration Type');
total = widget.initialCharge;
total = total.replace('$','');
total = parseFloat(total);
gtag('event', 'Submit', {
'event_category': 'Registration',
'event_label': regType + ' : ' + total,
'value': total
});
**NOTE: If your registration form has 'Multiple Registrations' enabled, the javascript function will need to loop through all registrations and submit each as its own event. Please contact enterprise-support@givegab.com for more information.
Tracking a form submission as a Google Analytics
ecommerce transaction
If your Google Analytics View is enabled to track ecommerce (see: ) then you can track ecommerce transactions. Please review the documentation here to learn more.
Map the following widget data object items to their own Javascript variables:
Confirmation Code (ex.
var transactionId)Initial Charge (ex.
var total)
* we recommend removing the dollar sign character from your custom variable and convert it from string to a decimalDonation Type/Registration type (ex.
var donationType/var regType)
// INCLUDE THE FOLLOWING FOR DONATIONS
if (typeof widget.recurringCommitment === 'undefined') {
var donationType = 'OneTime';
} else {
var donationType = 'Recurring';
};
// INCLUDE THE FOLLOWING FOR REGISTRATIONS
var regType = getValueByLabel(widget.answers[0], 'Registration Type');
total = widget.initialCharge;
total = total.replace('$','');
total = parseFloat(total);
gtag('event', 'purchase', {
"transaction_id": transactionId, // Transaction ID. Required.
"affiliation": "[YOUR CUSTOM VALUE HERE]",
"value": total, // Transaction Total.
"items": [
{
"id": transactionId, // Item ID/SKU
"name": "[YOUR CUSTOM VALUE HERE]",
'category': XXXXXXX, // use donationType OR regType
"quantity": 1
}
]
});
__________________________________________________________________
Using Google Tag Manager to track form submissions
Google Tag Manager is a component of the broader Google Analytics toolset and provides users a more streamlined administrative experience. GiveGab embedded forms can integrate with Google Tag Manager, however it is still necessary to call an external javascript function that passes data to Google Tag Manager's data layer.
What's required:
Per Google documentation, it is required to have the the Google Tag Manager container snippet placed on each webpage of your site. Please review Google's Tag Manager documentation here for instruction on installation of the container snippet.
Create a 'data layer' on the webpage that contains the GiveGab embedded form per the Google Tag Manager Data Layer documentation here.
In order to trigger Google Tag Manager tracking on embedded forms, it is necessary to call an external javascript function (ex.
myFunction) that is executed through the&oncomplete=parameter of your form widget snippet.
<script src='https://widgets.kimbia.com/widgets/form.js?channel=[YOUR CAMPAIGN PREFIX]/[YOUR FORM SUFFIX]&oncomplete=myFunction'></script>
The contents of the Javascript function will then push data from the embedded form's submission into the Google Tag Manager 'data layer' as an ecommerce transaction, per Google's documentation here.
Map the following widget data object items to their own Javascript variables:
Confirmation Code (ex.
var transactionId)Initial Charge (ex.
var total)
* we recommend removing the dollar sign character from your custom variable and convert it from string to a decimalDonation Type/Registration type (ex.
var donationType/var regType)
// INCLUDE THE FOLLOWING FOR DONATIONS
if (typeof widget.recurringCommitment === 'undefined') {
var donationType = 'OneTime';
} else {
var donationType = 'Recurring';
};
// INCLUDE THE FOLLOWING FOR REGISTRATIONS
var regType = getValueByLabel(widget.answers[0], 'Registration Type');
total = widget.initialCharge;
total = total.replace('$','');
total = parseFloat(total);
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'transactionId': transactionId,
'transactionAffiliation': '[YOUR CUSTOM VALUE HERE]',
'transactionTotal': total,
'transactionTax': 0.00,
'transactionShipping': 0,
'transactionProducts': [{
'sku': transactionId,
'name': '[YOUR CUSTOM VALUE HERE]',
'category': XXXXXXX, // use donationType OR regType
'price': total,
'quantity': 1
}]
});