Skip to content

Client-Side Pixels

Client-Side JavaScript/HTML Pixel Integration Guide

Client-side pixels execute in the user's browser using JavaScript or HTML elements. They provide real-time tracking capabilities for session initialization and conversion events.

🏷 Available Tokens

Common Tokens

For comprehensive token documentation, see: Complete Tokens & Macros Reference


Initialize Pixels (Session Tracking)

Client-Side Session Tracking Pixel Integration

  • Integration Type: Client-Side JavaScript/HTML
  • Event Trigger: Form session initialization or interaction
🔒 Initialize Pixel Specific Notes
  • Timing: Initialize pixels fire at session start, before form completion
  • Contact data: Not available until user completes form submission
  • URL context: Parameters extracted from current page where pixel fires
  • Privacy: All contact data automatically SHA256 hashed when available

💻 Implementation Examples

<iframe src="https://track.vendor.com/init?campaign_id=12345&session=#SESSION_ID#&source=#UTM_SOURCE#&ref=#REFERRER#"
        scrolling="no" frameborder="0" width="1" height="1"></iframe>

Rendered Output:

<iframe src="https://track.vendor.com/init?campaign_id=12345&session=c3cb2110-67e0-11f0-b666-bd02cda1aec3&source=google&ref=https://google.com"
        scrolling="no" frameborder="0" width="1" height="1"></iframe>

Alternative: JavaScript Implementation

For advanced tracking requirements:

<script>
  (function() {
    var img = new Image();
    img.src = 'https://track.vendor.com/init?campaign_id=12345&session=#SESSION_ID#&source=#UTM_SOURCE#&ref=#REFERRER#';
    img.style.display = 'none';
    document.body.appendChild(img);
  })();
</script>

Conversion Pixels (Conversion Tracking)

Client-Side Conversion Tracking Pixel Integration

  • Integration Type: Client-Side JavaScript/HTML
  • Event Trigger: Form conversion or completion
🔒 Conversion Pixel Specific Notes
  • Timing: Conversion pixels fire after form completion, so contact data is available
  • Contact data: Available and automatically SHA256 hashed for privacy
  • URL context: Parameters extracted from current page where pixel fires
  • Privacy: All contact data automatically SHA256 hashed when transmitted

💻 Implementation Examples

<iframe src="https://track.vendor.com/convert?campaign_id=12345&session=#SESSION_ID#&email=#SHA256EMAIL#&phone=#SHA256PHONE#&source=#UTM_SOURCE#"
        scrolling="no" frameborder="0" width="1" height="1"></iframe>

Rendered Output:

<iframe src="https://track.vendor.com/convert?campaign_id=12345&session=c3cb2110-67e0-11f0-b666-bd02cda1aec3&email=a665a45920422f9d417b09b52b5b8b67&phone=b109f3bbbc244eb82441917ed06d618b9008dd09b3befd1b5e07394c706a8bb980b1d7785e5976ec049b46df5f1326af5a2ea6d103fd07c95385ffab0cacbc86991&source=google"
        scrolling="no" frameborder="0" width="1" height="1"></iframe>

Alternative: JavaScript Implementation

For advanced tracking requirements:

<script>
  (function() {
    var img = new Image();
    img.src = 'https://track.vendor.com/convert?campaign_id=12345&session=#SESSION_ID#&email=#SHA256EMAIL#&phone=#SHA256PHONE#&source=#UTM_SOURCE#';
    img.style.display = 'none';
    document.body.appendChild(img);
  })();
</script>