(Advanced) Triggering Scripts on Non-Pageload Events

In addition to the default automatic triggering on page-load, all of Referral Rock's event scripts (Conversion Tracking, Referral Update, Member Access, and On-Site Widget) are able to be triggered using a special JavaScript function. This is useful if your site uses asynchronous page loads or you require an event to occur after a button click or other on-page event that doesn't trigger a new page load.

Triggering the Conversion Tracking, Referral Update, Access, and Widget Scripts using executeEvent (Advanced)

To manually trigger the scripts, we separate the script loading portion of the script and the event portion of the script.

  • First, include the below function that loads the available Referral Rock scripts onto the page, before the closing </body> tag. Note that you will need to change yoursite in the script to your unique Referral Rock subdomain. You can find your subdomain here inside the Standard Domain box.
(function (f, r, n, d, b, y) { b = f.createElement(r), y = f.getElementsByTagName(r)[0]; b.async = 1; b.src = n; b.id = 'RR_DIVID'; y.parentNode.insertBefore(b, y); })(document, 'script', '//yoursite.referralrock.com/webpixel/beta/universalv03.js');
  • Now, you're ready to call any of the available script events. In this article, we'll cover just the Conversion Tracking Script and Referral Update Script, but also available is the Access Script that displays the member portal on your site with auto-login functionality and the On-Site Widget Script that overlays a referral widget on your site. You can call this function anywhere you would like, at which point the event will be triggered. The function takes the eventType as a string ("conversion", "referralupdate", "access", or "widget") and an eventObject.
rrSpace.executeEvent(eventType, eventObject);
  • Be sure to set up your parameters in the eventObject so they are passed when the event is executed. Each eventType and associated object is highlighted below.

Conversion Tracking

The conversion event object is outlined below. 

conversionObject = {
debug: "false",
parameters: {
fullname: "",
email: "",
externalidentifier: "",
amount: ""
//The above parameters are an example of a few of the many parameters available
}
}
The below example is only to show what executing an event with an the conversion object looks like. You must configure your subdomain and conversionObject parameters to reference your own software or system.
<body>

<button onclick="rrSpace.executeEvent('conversion', conversionObject);">Click Me to Trigger a Conversion!</button>

<script>
(function(f, r, n, d, b, y) {
b = f.createElement(r), y = f.getElementsByTagName(r)[0];
b.async = 1;
b.src = n;
b.id = 'RR_DIVID';
y.parentNode.insertBefore(b, y);
})(document, 'script', '//yoursite.referralrock.com/webpixel/beta/universalv03.js');

var conversionObject = {
debug: "false",
parameters: {
fullname: document.getElementById("name").value,
email: document.getElementById("email").value,
amount: document.getElementById("purchase-price").value
//The above parameters are an example of a few of the many parameters available
}
}
</script>

</body>

Referral Update

The referralupdate event object is outlined below:

updateObject= {
debug: "false",
parameters: {
referralkey_id: "",
programidentifier: "",
status: "",
amount: ""
//The above parameters are an example of a few of the many parameters available
}
}
The below example is only to show what executing an event with an the referralupdate object looks like. In the below example, the update uses the user's email as the key and then updates the associated referral to the "qualified" status and sets the amount to the purchase price. Note that this code will not work on your site, as you must configure your subdomain and updateObject parameters to reference your own software or system.
<body>

<button onclick="rrSpace.executeEvent('referralupdate', updateObject);">Click Me to Trigger a Referral Update!</button>

<script>
(function(f, r, n, d, b, y) {
b = f.createElement(r), y = f.getElementsByTagName(r)[0];
b.async = 1;
b.src = n;
b.id = 'RR_DIVID';
y.parentNode.insertBefore(b, y);
})(document, 'script', '//yoursite.referralrock.com/webpixel/beta/universalv03.js');

var updateObject = {
debug: "false",
parameters: {
referralkey_email: document.getElementById("email").value,
status: "qualified",
amount: document.getElementById("purchase-price").value
//The above parameters are an example of a few of the many parameters available
}
}
</script>

</body>

Access

The access event object is defined below

accessObject = {
targetid: "replace-me",
debug: "false",
parameters: {
view: "iframe",
programidentifier: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
fullname: document.getElementById("name").value,
email: document.getElementById("email").value
//The above parameters are an example of a few of the many parameters available
}
}
The below example is only to show what executing an event with an the access object looks like. In the below example, the access script replaces the source of the iframe with the member page. As name and email parameters are included, the user will automatically be logged in, meaning they do not need to enter any of their details to access their member dashboard. Note that this code will not work on your site, as you must configure your subdomain, iframe id, and accessObject parameters to reference your own software or system.
<body>

<button onclick="rrSpace.executeEvent('access', accessObject);">Click Me to replace the iframe below with the logged in member portal</button>

<iframe src="" id="replace-me" style="width:100%; height:800px"></iframe>

<script>
(function(f, r, n, d, b, y) {
b = f.createElement(r), y = f.getElementsByTagName(r)[0];
b.async = 1;
b.src = n;
b.id = 'RR_DIVID';
y.parentNode.insertBefore(b, y);
})(document, 'script', '//yoursite.referralrock.com/webpixel/beta/universalv03.js');

var accessObject = {
targetid: "replace-me",
debug: "false",
parameters: {
view: "iframe",
programidentifier: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
fullname: document.getElementById("name").value,
email: document.getElementById("email").value
//The above parameters are an example of a few of the many parameters available
}
}
</script>

</body>

Widget

The widget event object is defined below

widgetObject = {
widgetposition: "",
widgetcolor: "#FA6423",
widgettext: "Refer a Friend",
debug: "false",
parameters: {
//IDENTIFICATION PARAMETERS
programidentifier: "
xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
fullname: "
document.getElementById("name").value",
email: "
document.getElementById("email").value"
//The above parameters are an example of a few of the many parameters available
}
}
The below example is only to show what executing an event with an the widget object looks like. In the below example, clicking the button causes a "Refer a Friend" button to overlay on the page. Clicking the widget button then opens the member portal as a widget. As name and email parameters are included, the user will automatically be logged in, meaning they do not need to enter any of their details to access their member dashboard. Note that this code will not work on your site, as you must configure your subdomain, iframe id, and widgetObject parameters to reference your own software or system.
<body>

<button onclick="rrSpace.executeEvent('access', accessObject);">Click Me to Enable Widget</button>

<script>
(function(f, r, n, d, b, y) {
b = f.createElement(r), y = f.getElementsByTagName(r)[0];
b.async = 1;
b.src = n;
b.id = 'RR_DIVID';
y.parentNode.insertBefore(b, y);
})(document, 'script', '//yoursite.referralrock.com/webpixel/beta/universalv03.js');

var widgetObject = {
widgetposition: "",
widgetcolor: "#FA6423",
widgettext: "Refer a Friend",
debug: "false",
parameters: {
//IDENTIFICATION PARAMETERS
programidentifier: "b38dc459-3364-4de0-b1d8-d96f3ceb024e",
fullname: fullnameholder,
email: emailholder
//The above parameters are an example of a few of the many parameters available
}
}
</script>

</body>


How did we do?