SignalSight Logo

Basic CAPI Installation


Introduction

This guide will explain how to efficiently integrate conversion tracking APIs into your source code using Signalsight.


Attention Please!

While adding the events bellow please remove all of the fbq calls, but leave the facebook loading code.

For example, remove the following code block:

<script>
      fbq('init', 'your-pixel-id');
      fbq('track', 'PageView');
    </script>


If you already have TikTok Pixel integration or CAPI integration;

While adding the events bellow please remove all of the ttq calls, but leave the tiktok loading code. For example, remove the following code block:


<script>
      ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE');
      ttq.page();
    </script>

Events

Please implement the following events in your website:

  1. 1. Loading Code and Page View Event
  2. 2. View Content Event
  3. 3. Custom Special Event
  4. 4. Search Event
  5. 5. Add To Cart Event
  6. 6. Initiate Checkout Event
  7. 7. Purchase Event
  8. 8. Lead Event
  9. 9. Complete Registration Event
  10. 10. Contact Event

1. Loading Code and Page View Event

To take full advantage of SignalSight the Facebook loading code must be placed at the top of every page, just before the Signalsight code. Make sure, however, to remove the facebook event including PageView to prevent duplicate events: 

<!-- 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',
      'https://connect.facebook.net/en_US/fbevents.js');
    </script>
    <!-- End Facebook Pixel Code -->

At the top of every page immediately after the Facebook pixel loading code please place the following Signalsight code. This will allow you to send events using Signalsight: 

<!-- BEGIN Signalsight Loader Code -->
    <script language="JavaScript" type="text/JavaScript">
      window.p2sq = window.p2sq || [];
      p2sq.push({et:'Init',p:{
        em: '{user-email}',         // Parameters
        fn: '{user-first-name}',    // encrypted
        ln: '{user-last-name}'      // with SHA-256
        // ...
      }});
    
      p2sq.push({et: 'PageView'});  // Page View Event
    
      !function(f, b, e, v, t, s) {f.p2sq = f.p2sq || [];if (f.p2sf) return;f.p2sf=true;
        t = b.createElement(e);t.async = !0;t.src = v;s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s);
      }(window,document,'script','https://cpi.ssevt.com/js/v4.2/your-p2s-key');
    </script>
    <!-- END Signalsight Loader Code -->


For TikTok Events API


To take full advantage of SignalSight the Tiktok loading code must be placed at the top of every page, just before the Signalsight JS code. Make sure, however, to remove the tiktok event including Page to prevent duplicate events:


<!-- Tiktok Pixel Code -->
    <script>
    !function(w, d, t){
    w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug",
    "on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){
    t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)
    ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)
    ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";
    ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};
    var o=document.createElement("script");o.type="text/javascript", o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;
    var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
    }(window, document, 'ttq');                              
    </script>
    <!-- End Tiktok Pixel Code -->

Parameter List

User information Parameter Format Example
E-Mail em Lowercase + SHA256 Hash [email protected]
First Name fn Lowercase + SHA256 Hash john
Last Name ln Lowercase + SHA256 Hash doe
Telephone ph Only numbers including country and area code + SHA256 Hash 12125357525
Gender ge A single lower case letter f or m + SHA256 Hash f
Birthday db Only numbers, birth year followed by month and day + SHA256 Hash 19910526 for May 26, 1991
City ct Lowercase and without spaces + SHA256 Hash newyork
Postal Code / Zip Code zp Only Numbers + SHA256 Hash 34000
Country cn Two letter country code, lowercase + SHA256 Hash tr

Client Side PII Hashing

If you cannot hash the personally identifiable information (PII) you may do it on the client side. To accomplish this load the following script at the top of every page on your website, before the SignalSight loader code: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js"
      crossorigin="anonymous"></script>

Make sure to modify the SignalSight init code to use the sha256 function: 

<script>
      p2sq.push({et:'Init',p:{
        em: sha256('[email protected]'),
        fn: sha256('John'),
        ln: sha256('Doe')
        // ...
      }});
    </script>
Back to Event List

2. View Content Event

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({et: 'ViewContent', p: {
        contents: [{id: '{product-id}', quantity: 1}],
        content_type: 'product',
        value: productPrice,                  // Price, e.g. 9.90
        currency: '{currency}',               // 3 Letter Currency Code, e.g. USD
        content_name:'{product-name}',        // Optional Parameters
        content_category:'{product-category}' // Optional Parameters
      // ...
      }});
    </script>
Back to Event List

3. Custom Special Event

You can use the following code if your custom event does not need parameters: 

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({et: 'Custom:Special'});
    </script>

You may send any optional parameters you like in the p object: 

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({
        et: 'Custom:Special',
        p: {
          optionalParameter: anyValue
        }
      });
    </script>
Back to Event List

4. Search Event

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({et: 'Search', p: {
        search_string:'{search-string}',
        contents: [
          {id:'{product-1-id}',quantity:1},
          {id:'{product-2-id}',quantity:1}
        ],
        value: productPrice,                    // Price, e.g. 9.90
        currency: '{currency}',                 // 3 Letter Currency Code, e.g. USD
        content_category: '{product-category}'  // Optional Parameters
      // ...
      }});
    </script>
Back to Event List

5. Add To Cart Event

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({
        et: 'AddToCart', p: {
        contents: [
          {id:'{product-1-id}',quantity:1},
          {id:'{product-2-id}',quantity:1}
        ],
        content_type: 'product',
        value: productPrice,    // Price, e.g. 9.90
        currency: '{currency}', // 3 Letter Code, e.g. USD
      }});
    </script>
Back to Event List

6. Initiate Checkout Event

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({
        et: 'InitiateCheckout', p: {
        contents: [
          {id:'{product-1-id}',quantity: 1},
          {id:'{product-2-id}',quantity: 1}
        ],
        value: productPrice,                    // Price, e.g. 9.90
        currency: '{currency}',                 // 3 Letter Currency Code, e.g. USD
        content_category:'{product-category}',  // Optional Parameters
        num_items: '{item-count}',              // Optional Parameters
        // ...
      }});
    </script>
Back to Event List

7. Purchase Event

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({
        et: 'Purchase',
        p: {
          contents: [
            {id:'{product-1-id}',quantity:1},
            {id:'{product-2-id}',quantity:1}
          ],
          content_type: 'product',
          value: productPrice,    // Price, e.g. 9.90
          currency: '{currency}'  // 3 Letter Currency Code, e.g. USD
        },
        eid:'{order-id}'          // Unique Order ID – Important
      });
    </script>
Back to Event List

8. Lead Event

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({
        et: 'Lead',
        p: { // Optionally the following parameters might be sent:
            content_name: '{product}', // Name of the page, product or form
            currency: '{currency}',    // 3 Letter Currency Code, e.g. USD
            value: productPrice,       // Price, e.g. 9.90
        }
      });
    </script>
Back to Event List

9. Complete Registration Event

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({
        et: 'CompleteRegistration',
        p: { // Optionally the following parameters might be sent:
            content_name: '{product}',  // Name of the registration form
            currency: '{currency}',     // Three Letter Currency Code, e.g. USD
            value: productPrice,        // Price, e.g: 9.90
            status: status,             // Boolean status: whether the registration 
                                        // is actually completed
        }
      });
    </script>
Back to Event List

10. Contact Event

<script language="JavaScript" type="text/JavaScript">
      p2sq.push({et: 'Contact'});
    </script>
Back to Event List

Consent management and data privacy

To stay compliant in regard to data protection, you should only activate script if users given consent within your Consent Management framework.

Previous Document

Next Document