Trigger Custom Actions with JavaScript

Introduction

This guide demonstrates how to trigger a custom action using JavaScript in your Shopify store with Rivo. Custom actions allow you to reward customers with points for specific interactions on your website. Below are examples of how to call the proxy URL simply when a page is loaded and how to trigger a custom action upon a Klaviyo form submission. The proxy URL sends a POST request to record the custom action for the current customer.

Example Code

Basic Page Load Trigger

Add the following JavaScript code snippet to the desired page template in your Shopify theme:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    const customActionName = "CUSTOM_ACTION_NAME";  // Change this to your custom action name
    const proxyUrl = `${window.Rivo.global_config.proxy_paths.loy}/loy/customers/${window.Rivo.common.customer.id}/record_custom_action`;
    const data = { custom_action_name: customActionName };

    fetch(proxyUrl, {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then(function(response) {
      console.log('Custom action recorded:', response);
    })
    .catch(function(error) {
      console.error('Error recording custom action:', error);
    });
  });
</script>

This script will send a POST request to the Rivo proxy URL when the page loads, recording a custom action specified by customActionName. Modify the customActionName variable to match the name of your custom action defined in Rivo. This needs to match exactly, so copy it exactly as it appears in the Rivo Custom Action you've configured.

Example Use Case: Klaviyo Form Submission

An example of using this custom action script is to trigger it upon a Klaviyo form submission. This allows you to reward customers for actions such as filling out a newsletter form. To use the custom action script on a Klaviyo form, replace the custom action name and the Klaviyo form ID in the script below. For details on getting the form ID, see the Track Klaviyo form activity using JavaScript.

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    // Listen for Klaviyo form events
    window.addEventListener('klaviyoForms', function(event) {
      // Check if the event is a form submission for the specific form ID
      if (event.detail.type === 'submit' && event.detail.formId === 'KLAVIYO_FORM_ID') {
        // Replace 'KLAVIYO_FORM_ID' with the actual Klaviyo form ID
        callCustomAction();
      }
    });
  });

  function callCustomAction() {
    // Function to be called after the specific form submission
    // Replace 'CUSTOM_ACTION_NAME' with the actual custom action name defined in Rivo
    const customActionName = "CUSTOM_ACTION_NAME";
    const proxyUrl = `${window.Rivo.global_config.proxy_paths.loy}/loy/customers/${window.Rivo.common.customer.id}/record_custom_action`;
    const data = { custom_action_name: customActionName };

    fetch(proxyUrl, {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then(function(response) {
      if (response.ok) {
        console.log("Custom action recorded successfully");
      } else {
        console.error("Failed to record custom action");
      }
    })
    .catch(function(error) {
      console.error("Error calling custom action:", error);
    });
  }
</script>