JavaScript API
Explore Fundraise Up’s JavaScript API.
Fundraise Up’s JavaScript API can be used to integrate Fundraise Up with other apps and integrations that are not natively supported by the platform.
The JavaScript API is most often used to track Fundraise conversion events in other apps.
Events
Fundraise Up pushes three events to JavaScript’s data layer: checkoutOpen, checkoutClose, and donationComplete. These events and examples of their payloads are included below.
checkoutOpen
This event is fired every time Checkout is opened.
Example:
1{
2 "customFields": {
3 "fiscal_year": "fy2023",
4 "form": "DonateNow"
5 },
6 "livemode": true,
7 "campaign": {
8 "id": "FUNCPJTZZQR",
9 "code": "C-INT-0000",
10 "name": "General Donations"
11 },
12 "utm": {
13 "source": "",
14 "campaign": "",
15 "medium": "",
16 "content": "",
17 "term": ""
18 },
19 "element": {
20 "id": "XTGWFZFR",
21 "type": "Donate Button",
22 "name": "Header Nav - Donate"
23 }
24}checkoutClose
This event is fired any time Checkout is closed, regardless of whether a conversion has been logged.
Example:
1{
2 "customFields": {
3 "fiscal_year": "fy2023",
4 "form": "DonateNow"
5 },
6 "livemode": true,
7 "campaign": {
8 "id": "FUNCPJTZZQR",
9 "code": "C-INT-0000",
10 "name": "General Donations"
11 },
12 "utm": {
13 "source": "",
14 "campaign": "",
15 "medium": "",
16 "content": "",
17 "term": ""
18 },
19 "element": {
20 "id": "XTGWFZFR",
21 "type": "Donate Button",
22 "name": "Header Nav - Donate"
23 },
24 "supporter": null,
25 "donation": null,
26 "designation": null,
27 "tribute": null
28}In this example, Checkout was closed before a conversion occurred, which is why there are null values in some places.
donationComplete
This event fires at the point of conversion in Checkout.
Example:
1{
2 "customFields": {
3 "fiscal_year": "fy2023",
4 "form": "DonateNow",
5 "hs_preview": "UvMjiRBY-66781953082"
6 },
7 "livemode": true,
8 "campaign": {
9 "id": "FUNCPJTZZQR",
10 "code": "C-INT-0000",
11 "name": "General Donations"
12 },
13 "utm": {
14 "source": "",
15 "campaign": "",
16 "medium": "",
17 "content": "",
18 "term": ""
19 },
20 "element": {
21 "id": "XTGWFZFR",
22 "type": "Donate Button",
23 "name": "Header Nav - Donate"
24 },
25 "supporter": {
26 "id": "STMNACDG",
27 "email": "tulsi.lattimer@gmail.com",
28 "firstName": "Tulsi",
29 "lastName": "Lattimer",
30 "anonymous": false,
31 "mailingListSubscribed": false,
32 "employer": null,
33 "onBehalfOf": null
34 },
35 "donation": {
36 "id": "DPPSCTFU",
37 "paymentMethod": "CreditCard",
38 "amount": 5.6,
39 "feesCovered": 0.6,
40 "currency": "USD",
41 "recurring": false,
42 "frequency": "once"
43 },
44 "designation": {
45 "id": "EHHJ9R36",
46 "name": "the greatest need",
47 "code": "F-INT-0001"
48 },
49 "tribute": null
50}Custom fields
Custom fields that you add to a Campaign can be sent to the JavaScript data layer. In the example below, the donationComplate event is fired. Its payload includes parameters for three custom fields: fund, appeal, and source.
Example:
1FundraiseUp.on('donationComplete', function(details) {
2 var fund = details.customFields.fund || '';
3 var appeal = details.customFields.appeal || '';
4 var source = details.customFields.source || '';
5});Debugging and testing
You can debug and test events sent to the JavaScript data layer using your browser’s console. In the example below, the parameters for the Fundraise Up event, checkoutOpen, are written to the console when the event is fired.
Example:
1<script>
2 FundraiseUp.on('checkoutOpen', function(details) {
3 console.log(details);
4 });
5</script>Implementation example
In the example below, the Fundraise Up JavaScript API is used to fire and provide parameter values to the Feathr Super Pixel tracking code.
Example:
1FundraiseUp.on('donationComplete', function(details) {
2 var feathr_amount = details.donation.amount || 0;
3 var feathr_recurring = details.donation.recurring || 'Not Provided';
4 var feathr_currency = details.donation.currency || 'USD';
5 var feathr_fullName = details.supporter.firstName + ' ' + details.supporter.lastName || '';
6 var feathr_email = details.supporter.email || 'Not Provided';
7 var feathr_companies = [details.supporter.employer] || ['Not Provided'];
8
9 feathr("update", {
10 "name": feathr_fullName,
11 "email": feathr_email,
12 "companies": feathr_companies
13 });
14
15
16feathr(
17 'convert',
18 'YOUR_CONVERSION_PIXEL_ID',
19 {
20 amount: feathr_amount,
21 currency: feathr_currency,
22 category: "YOUR CONVERSION CATEGORY",
23
24 },
25 {
26 "RECURRING": feathr_recurring
27 }
28 );Platform guides
Explore using Fundraise Up’s JavaScript API with popular platforms.
Analytics
Use Checkout events to create custom triggers and tracking properties.
Marketing
Send Checkout events to marketing pixels for audience building and advertising.