Custom Actions After Sign Up For Embedded Forms

This article describes advanced actions that can be taken by users who want to track form completions with platforms like Google Analytics and Facebook's Pixel. Most users don't need to do this.

Requirements

When someone completes an embedded Sign Up Form, we send a postMessage to the parent page. The only current requirement is that the form requests an email address.

Generalized Example

All examples below use the same base code to listen for an event from an iFramed Sign Up Form. This function will listen for a message event, and will check if that message is coming from v.vipecloud.com (as a small note, ensure that the iFrame SRC parameter is pointing towards the v.vipecloud.com domain. Please do not use app.vipecloud.com for embedding Sign Up Forms). If the event is from vipecloud, and the event type is a form completion, it will complete whatever code snippet is placed at the placeholder.

<script>
    // Function for processing received events
    function receiveMessage(event){ 
        // event = vc_form_complete~~~{submitted email}~~~{ip address if avail}
        if (event.origin !== "https://v.vipecloud.com"){ //security check
            return;
        }
        var pieces = event.data.split('~~~');
        if(pieces[0] === 'vc_form_complete'){ //confirm event type
            // Action to complete on Sign Up Form Completion Goes Here!
            // [REDIRECT/SEND TO ANALYTICS/ETC]
        }
    }
    
    // Add the listener to start listening for form completions
    addEventListener("message", receiveMessage, false);
</script>

Examples:

Below are sample scripts you can add to your page to take custom actions:

Redirect to a custom page or a Thank You page

Add the below code to the same page that your Sign Up Form is embedded. This is a pretty direct way to add analytics support to your forms.

No-Code Analytics (Page-View Based): If your use this to direct users to a "Thank You" page, and want to connect it to your analytics system, you can create an event based on page-views, and add a condition where page_location contains /thank-you or the URL to the thank-you page on your site that the form would redirect to.

<script>
    // Function for processing received events
    function receiveMessage(event){ 
        // event = vc_form_complete~~~{submitted email}~~~{ip address if avail}
        if (event.origin !== "https://v.vipecloud.com"){ //security check
            return;
        }
        var pieces = event.data.split('~~~');
        if(pieces[0] === 'vc_form_complete'){ //confirm event type
            window.location = 'https://yourcustomredirect.com/thank-you';
        }
    }
    
    // Add the listener to start listening for form completions
    addEventListener("message", receiveMessage, false);
</script>

Submit a completed conversion to Google Analytics

You have to have the Google Analytics script on your site for this to work. If you need help setting up a new tag, please use the following help article from Google: https://support.google.com/analytics/answer/14179230?hl=en

Google Analytics 4

<script>
    // Function for processing received events
    function receiveMessage(event){ 
        // event = vc_form_complete~~~{submitted email}~~~{ip address if avail}
        if (event.origin !== "https://v.vipecloud.com"){ //security check
            return;
        }
        var pieces = event.data.split('~~~');
        if(pieces[0] === 'vc_form_complete'){ //confirm event type
            gtag('set', 'user_data', {
                email: pieces[1]
            });

        }
    }
    
    // Add the listener to start listening for form completions
    addEventListener("message", receiveMessage, false);
</script>

Google Analytics (deprecated)

<script>
    // Function for processing received events
    function receiveMessage(event){ 
        // event = vc_form_complete~~~{submitted email}~~~{ip address if avail}
        if (event.origin !== "https://v.vipecloud.com"){ //security check
            return;
        }
        var pieces = event.data.split('~~~');
        if(pieces[0] === 'vc_form_complete'){ //confirm event type
            ga("send",{hitType:"event",eventCategory:"YourEventCategory",eventAction:"YourActionName"});
        }
    }
    
    // Add the listener to start listening for form completions
    addEventListener("message", receiveMessage, false);
</script>

Submit a completed conversion to Facebook Pixel

You have to have the Facebook Pixel script on your site for this to work. If you would like to review Facebook's documentation for pixel tracking, click here for their documentation.

<script>
    // Function for processing received events
    function receiveMessage(event){ 
        // event = vc_form_complete~~~{submitted email}~~~{ip address if avail}
        if (event.origin !== "https://v.vipecloud.com"){ //security check
            return;
        }
        var pieces = event.data.split('~~~');
        if(pieces[0] === 'vc_form_complete'){ //confirm event type
            fbq('track', 'Lead', {
                content_name: "VC Form Completion", // placeholder
                email: pieces[1]
            });
        }
    }
    
    // Add the listener to start listening for form completions
    addEventListener("message", receiveMessage, false);
</script>

You can really do anything you want in this script! You can submit conversions to Capterra, load a modal on the page, hide/show something on the page. Whatever you can imagine!