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. Loading Code and Page View Event
2. View Content Event
3. Custom Special Event
4. Search Event
5. Add To Cart Event
6. Initiate Checkout Event
7. Purchase Event
8. Lead Event
9. Complete Registration Event
10. Contact Event

1. Loading Code and Page View Event

To take full advantage of ZZGate Signal 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''https://cpi.ssevt.com/js/v4.2/your-p2s-key');
    </script>
    <!-- END Signalsight Loader Code -->

For TikTok Events API

To take full advantage of ZZGate Signal 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 ZZGate Signal loading 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 ZZGate Signal 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