Using the Facebook Pixel and Tracking Form Submissions

Featured

Comments

8 comments

  • Official comment
    Avatar
    Jane Vance

    Answer from ShortStack Support: You will need to use a bit of custom code to track registrations. Copy the code below and paste it in a Code Widget, then make the changes indicated within the code so that your tracking pixel is fired. IMPORTANT: Be sure the Code Widget Placement is set to After <head>.

    <script type="text/javascript">

    // This is the Pixel id found in the Facebook Pixel Code provided in the Ads Manager.
    // To find it:
    // 1. Open Facebook Ads Manager
    // 2. Click Tools -> Pixels
    // 3. Click Actions -> View Pixel Code
    // 4. In the "Add Pixel Code (Required)" section, scroll to code to find the line reading
    // something like "fbq('init', '1234567890');".
    // 5. Copy the number in that line and replace the "facebookPixelId" in the line below
    //
    var facebookPixelId = '1234567890';


    // This is the CSS id of the form which should track a conversion on your ShortStack Campaign - update if necessary
    //
    var facebookTrackConversionForForm = "#form";


    // This is the type of conversion to track when the form is successfully submitted.
    // We recommend using either "Lead" or "CompleteRegistration" conversions.
    // You can see more details on the different types of conversion here:
    // https://www.facebook.com/business/help/402791146561655
    //
    var facebookConversionType = "Lead";

    </script>

    <!--
    ***************************************
    Do not edit below
    ***************************************
    -->


    <!-- Facebook Pixel Code -->
    <script>
    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
    n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
    document,'script','//connect.facebook.net/en_US/fbevents.js');

    fbq('init', window['facebookPixelId']);
    fbq('track', "PageView");</script>
    <!-- End Facebook Pixel Code -->

    <script type="text/javascript">
    $(function(){
    $('body').on('success.form', facebookTrackConversionForForm, function(){
    fbq('track', facebookConversionType);
    })
    });
    </script>

    Click Save & Exit after adding the code to a Code Widget, then click Publish Changes if the Campaign is published.

    IMPORTANT: After implementing the code, you will need to test your Campaign. It can take up to 24 hours for Facebook to start displaying the information.

    NOTE: Both Page Views and Registrations/Leads will be tracked with the above code. The PageView tag should be fired automatically using the above code, which tracks everyone who visits the Campaign. Those who submit will be tracked with the CompleteRegistration or Lead tag.

  • Avatar
    German Diaz

    where can i find the form's CSS id? or, by default should it be #form?

      // This is the CSS id of the form which should track a conversion on your ShortStack Campaign - update if necessary
    //
    var facebookTrackConversionForForm = "#form";
  • Avatar
    Jane Vance

    Answer from ShortStack Support: The CSS ID of each Widget can be found within the Edit Widgets Panel. Just open the Edit Widgets panel by clicking the icon on the left side of the Campaign Builder (it looks like three stacked pieces of paper). Then, click the # icon at the top of the Edit Widgets Panel. This will reveal the CSS IDs of the individual Widgets. Find your Form Widget, then enter the CSS ID associated with that Form Widget within the code.

  • Avatar
    Central Garden & Pet

     If we place this code within a code widget, will that track form submissions?

    <!-- Facebook Pixel Code -->
    <script>
    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
    n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
    document,'script','//connect.facebook.net/en_US/fbevents.js');

    fbq('init', window['facebookPixelId']);
    fbq('track', "PageView");</script>
    <!-- End Facebook Pixel Code -->

    <script type="text/javascript">
    $(function(){
    $('body').on('success.form', facebookTrackConversionForForm, function(){
    fbq('track', facebookConversionType);
    })
    });
    </script>
  • Avatar
    Central Garden & Pet

    Hi Jane - We are running into a similar issue but cannot get the pixel tracking to work based on your feedback. Is there anyway that we can connect to obtain assistance from you?

  • Avatar
    Jane Vance

    Can you submit a request to theteam@shortstacklab.com?

  • Avatar
    Brian

    I followed the directions exactly but it's not tracking correctly.  It's showing 600+ registrations in the custom conversions pixel when I've only had 2 actual registrations.   

  • Avatar
    Jane Vance

    Brian: Can you submit a request to theteam@shortstacklab.com?

Please sign in to leave a comment.