> ## Documentation Index
> Fetch the complete documentation index at: https://clickflare.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Track CallGrid Pay-Per-Call Campaigns with ClickFlare

> Connect CallGrid and ClickFlare to attribute every call to the original ad click, send call conversions back via postback, and optimize your pay-per-call campaigns.

**Pay-Per-Call** is a performance marketing model where advertisers pay for qualified phone calls instead of clicks or impressions. **CallGrid** is a pay-per-call platform that tracks, routes, prices, and sells calls in real time, using Dynamic Number Insertion (DNI) on your landing pages and an optional real-time bidding marketplace.

This guide shows you how to **track CallGrid campaigns in ClickFlare**: capturing the ClickFlare click ID on the call, and sending call conversions back to ClickFlare automatically with a CallGrid webhook.

***

## Prerequisites

Before you begin, make sure you have:

* An active **CallGrid** account with at least one **campaign**, **source**, and **destination** created
* A **landing page** that displays a phone number → *Check out **[LanderLab.io](https://landerlab.io)** for ready-made PPC templates*
* A decision on which **call event** should count as a conversion (for example, a paid call)

<Accordion title="New to CallGrid? Set up your account in this order" icon="list-check">
  CallGrid entities depend on each other, so CallGrid recommends creating them in a fixed order:

  1. **Numbers** – buy individual numbers, or create a **Number Pool** for visitor-level attribution (10–25 numbers is a good starting size for testing).
  2. **Buyers** – the companies purchasing your calls. Create one even if you route calls to yourself.
  3. **Destinations** – where calls ring. Each destination belongs to a buyer and holds routing, revenue, conversion duration, and capacity settings.
  4. **Vendors** – your traffic suppliers (use something like "Internal Media" for your own media buying).
  5. **Sources** – where the calls come from, such as "Facebook – Insurance". Each source belongs to a vendor.
  6. **Campaigns** – tie it all together. For a first setup, CallGrid suggests a **Non-Real-Time Call Bidding** campaign with call recording turned on.

  Finally, open the campaign and add your **source** (with a number or number pool) and your **destination** (with routing weights). CallGrid is prepaid, so also add a payment method and enable **Auto Recharge** under **Organization Settings → Plan & Billing** to avoid your campaign stopping unexpectedly.

  Full walkthrough: [Getting Started with CallGrid](https://callgrid.com/knowledge-base/getting-started-with-callgrid).
</Accordion>

***

## Why Track CallGrid with ClickFlare?

CallGrid tells you which calls happened and what they were worth. ClickFlare tells you which ad, creative, lander, and audience produced them. Connecting the two lets you:

* **Attribute each call to the original ad click**, source, and creative
* **Combine cost, call, and revenue data** in one report and optimize toward profit
* **Split-test landing pages** and auto-optimize based on call performance
* **Send call conversions server-side to ad platforms** using ClickFlare's [Conversion API integrations](/docs/en/integrations/facebook)
* **Track funnel steps** before the call (quiz answers, button clicks, drop-offs)

***

## How It Works

<Steps>
  <Step title="User clicks your ad">
    The visitor clicks your ad and passes through ClickFlare, which generates a unique click ID.
  </Step>

  <Step title="Lander receives the click ID">
    ClickFlare appends the click ID to your landing page URL (for example `?clickid=abc123`).
  </Step>

  <Step title="CallGrid captures it">
    The CallGrid SDK on the page swaps in a tracking number and stores the `clickid` URL parameter as a **Tag** on the call.
  </Step>

  <Step title="User calls">
    CallGrid routes the call to your buyer's destination and evaluates it against your conversion rules.
  </Step>

  <Step title="Conversion is posted back">
    When the selected event fires (for example **Call Paid**), a CallGrid webhook sends the click ID, payout, and call ID to your ClickFlare postback URL.
  </Step>
</Steps>

***

## Step 1: Pass the Click ID from ClickFlare to Your Landing Page

This is the **standard setup** for redirect-based campaigns (Facebook, TikTok, Taboola, NewsBreak, etc.).

### 1. Create the Lander as an Offer in ClickFlare

Add your call landing page as an **Offer** in ClickFlare. This lets ClickFlare pass the click ID to the page and attribute conversions to it.

### 2. Append the ClickFlare Click ID to the Offer URL

```text theme={null}
https://your-landing-page.com/?clickid={cf_click_id}
```

<Tip>
  The parameter name (`clickid` here) must match the Tag name you create in CallGrid in the next step, and is **case-sensitive**.
</Tip>

***

## Step 2: Add `clickid` as a Tag in CallGrid

CallGrid's SDK automatically reads URL parameters from the visitor's session, but it only stores the ones that exist as **Tags** in your account.

1. In CallGrid, go to **Integrations → Tags**
2. Add a tag named `clickid`
3. Save

<Tip>
  **Shortcut:** CallGrid offers a **Media Buying** tags template on the Tags page. Applying it creates the most common tracking parameters in one click. Just double-check that `clickid` is included, or add it manually.
</Tip>

Once saved, the value is available in webhooks as the token `[[tag:clickid]]`.

***

## Step 3: Install the CallGrid SDK on Your Landing Page

### 1. Get Your Script from CallGrid

1. Open your CallGrid **campaign** and go to the **Sources** tab
2. Click the **SDK Instructions** button (the `<>` icon) next to your source
3. Choose **Normal** for a standard implementation
4. Copy the code

### 2. Add It to Your Page

Paste the script on your landing page, ideally just before the closing `</body>` tag:

```html theme={null}
<!-- Phone number displayed on your page -->
<span class="phone-number">(555) 123-4567</span>

<!-- CallGrid SDK -->
<script src="https://cdn.callgrid.com/callgrid.js"></script>
<script>
  const callGrid = new CallGrid({
    organizationId: "your_organization_id",
    campaignSourceId: "your_campaign_source_id"
  });
</script>
```

<Info>
  The `organizationId` is the same across your CallGrid account. Each source has its own `campaignSourceId`, so use the script from the source that matches this ClickFlare campaign.
</Info>

The SDK detects phone numbers on the page automatically, so no CSS selectors are needed. If you use a **number pool**, each visitor sees a unique tracking number. If the pool runs out, CallGrid falls back to your static number and still tracks the call, but visitor-level attribution may be lost for those calls.

<Note>
  This script is for **Non-Real-Time Call Bidding** campaigns. Real-Time Call Bidding (RTB) campaigns in CallGrid use posting instructions instead of the on-page SDK.
</Note>

***

## Alternative Implementation Scenarios

### Use Case 1: Redirect Tracking + Script on Page Load

✅ *This is the default setup covered above.* The click ID arrives in the URL, and the CallGrid SDK picks it up as soon as the page loads.

### Use Case 2: Redirect Tracking + Delayed Number Loading

**When to use:** You only want to show the phone number to engaged visitors (for example, after they answer a quiz question or click a "Show Number" button).

Every time the SDK loads, it reserves a number from your pool. Loading it only when needed keeps more numbers free and protects attribution. CallGrid recommends loading the script dynamically:

```html theme={null}
<button onclick="showPhoneNumber()">Call Now</button>

<script>
  function showPhoneNumber() {
    if (window.CallGrid) return;
    const script = document.createElement("script");
    script.src = "https://cdn.callgrid.com/callgrid.js";
    script.onload = function () {
      new CallGrid({
        organizationId: "your_organization_id",
        campaignSourceId: "your_campaign_source_id",
        autoEnableDNI: true
      });
    };
    document.head.appendChild(script);
  }
</script>
```

<Tip>
  You can fire this from a [ClickFlare Tag Manager](/docs/en/tag-manager-1/what-is-the-tag-manager) trigger instead of editing the page, so the number appears only after a specific funnel step.
</Tip>

### Use Case 3: Direct Tracking (Google Ads, Bing, YouTube)

**When to use:** Your traffic source doesn't allow redirects, so the click ID is not in the URL.

With [Direct Campaign Tracking](/docs/en/campaigns/direct-campaign-tracking), ClickFlare stores the click ID in a cookie, readable via `window.clickflare.tracking_params.click_id`. Push it to CallGrid with the SDK's `addTags()` method:

```html theme={null}
<script src="https://cdn.callgrid.com/callgrid.js"></script>
<script>
  const callGrid = new CallGrid({
    organizationId: "your_organization_id",
    campaignSourceId: "your_campaign_source_id"
  });

  // Wait for the ClickFlare direct tracking script to set the click ID
  const waitForClickId = setInterval(function () {
    const cfClickId =
      window.clickflare &&
      window.clickflare.tracking_params &&
      window.clickflare.tracking_params.click_id;

    if (cfClickId) {
      clearInterval(waitForClickId);
      callGrid.addTags({ clickid: cfClickId });
    }
  }, 250);
</script>
```

<Info>
  Retrieving the click ID from the cookie takes about 1–2 seconds. If `addTags()` runs after a tracking number has already been assigned, CallGrid automatically updates the existing session with the new tag, so the click ID is still attached to the call.
</Info>

***

## Step 4: Create a Custom Conversion in ClickFlare

Create a [custom conversion](/docs/en/settings/custom-conversions) for your calls (for example `converted_call`). You'll use its name as the `ct` value in the postback so call conversions are reported separately from other events.

<Frame>
  <img src="https://mintcdn.com/clickflare/OqYr9SGU8lp8Fd-y/images/image-13.png?fit=max&auto=format&n=OqYr9SGU8lp8Fd-y&q=85&s=ff3c1dba2d7833771a8e4e0564baebb4" alt="Image" width="792" height="524" data-path="images/image-13.png" />
</Frame>

Then copy your **Postback URL** from **Settings → Tracking URLs**. It looks like this:

```text theme={null}
https://your_tracking_domain.com/cf/cv?click_id=REPLACE&payout=OPTIONAL&txid=OPTIONAL&param1=OPTIONAL&param2=OPTIONAL&param3=OPTIONAL&ct=REPLACE
```

***

## Step 5: Send Call Conversions from CallGrid to ClickFlare

CallGrid has a built-in **ClickFlare** webhook template. Use it unless you need full control over the URL.

<Tabs>
  <Tab title="Template mode (recommended)">
    1. In CallGrid, go to **Webhooks** in the left menu
    2. Click **+ New Webhook**
    3. Turn **Template Mode** on
    4. Under **Filter by Template Type**, choose **Conversion Pixel**
    5. Select **ClickFlare** from the template list
    6. Enter a **Name** (for example "ClickFlare Conversions")
    7. Pick the **Event** that should count as a conversion (for example **Call Ended** or **Call Paid**, see the table below)
    8. Click **Save Webhook**
  </Tab>

  <Tab title="Manual mode (advanced)">
    1. In CallGrid, go to **Webhooks** and click **+ New Webhook**
    2. Turn **Template Mode** off
    3. Paste your ClickFlare postback URL, replacing the domain with **your ClickFlare tracking domain** and the `ct` value with **your custom conversion event name**, then map the parameters to CallGrid tokens:

    | ClickFlare parameter | CallGrid token | Purpose |
    | - | - | - |
    | `click_id` | `[[tag:clickid]]` | Required – links the call to the click |
    | `payout` | `[[tag:CallPayout]]` | Revenue for the call |
    | `txid` | `[[tag:CallId]]` | Unique call ID, prevents duplicates |
    | `param1` | `[[tag:InboundNumber]]` | Example extra data – the number dialed |
    | `ct` | your custom conversion name | Conversion type, e.g. `converted_call` |

    4. Select the **Event** and click **Save Webhook**
  </Tab>
</Tabs>

### ✅ Example Postback URL

```text theme={null}
https://your_tracking_domain.com/cf/cv?click_id=[[tag:clickid]]&payout=[[tag:CallPayout]]&txid=[[tag:CallId]]&param1=[[tag:InboundNumber]]&ct=converted_call
```

> 🧠 Replace `your_tracking_domain.com` with your ClickFlare tracking domain and `converted_call` with your custom conversion name.

### Choosing the Right Event

| CallGrid event | Fires when | Best for |
| - | - | - |
| **Call Inbound** | The call is received | Measuring call volume / top-of-funnel |
| **Call Answered** | The caller connects to a buyer | Tracking connected calls |
| **Call Paid** | The call meets your payout criteria (e.g. duration) | **Recommended** – optimizing toward revenue |

<Tip>
  You can create several webhooks, one per event, each with a different `ct` value. This lets you see inbound, answered, and paid calls as separate conversion types in ClickFlare reports.
</Tip>

***

## Testing & Validation

### 1. Test the Webhook in CallGrid

After saving, CallGrid shows a testing panel:

1. Enter a **real click ID** from ClickFlare for `tag:clickid` (copy one from a test click in your reports)
2. Enter a test payout for `tag:CallPayout` (e.g. `25.00`), a unique `tag:CallId`, and a test `tag:InboundNumber`
3. Click **Run Webhook**
4. Confirm the conversion appears in ClickFlare

### 2. Run a Live Test

1. Open your **ClickFlare campaign URL** in a browser
2. Check that `clickid` is present in the landing page URL (redirect setups)
3. Check that the phone number on the page was replaced with a tracking number
4. Place a **test call** and stay on long enough to meet your conversion criteria

### 🔍 Verify Tracking

* The call appears in your **CallGrid** dashboard with the `clickid` tag filled in
* The conversion appears in **ClickFlare** under the right campaign, with the correct payout

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Click ID is missing on CallGrid call records">
    * Confirm `clickid` exists as a Tag in **CallGrid → Integrations → Tags**
    * Make sure the name matches the URL parameter exactly (it's case-sensitive)
    * Check that the offer URL in ClickFlare includes `clickid={cf_click_id}`
    * For direct tracking, confirm `window.clickflare.tracking_params.click_id` returns a value in the browser console
  </Accordion>

  <Accordion title="Webhook fires but no conversion shows in ClickFlare">
    * Verify the tracking domain in the webhook is your ClickFlare tracking domain
    * Make sure the click ID sent is a real, existing ClickFlare click
    * Check that the `ct` value matches a custom conversion in ClickFlare
    * Review the CallGrid webhook logs for error responses
  </Accordion>

  <Accordion title="Duplicate conversions">
    Map `txid` to `[[tag:CallId]]`. ClickFlare uses the transaction ID to deduplicate conversions for the same call.
  </Accordion>

  <Accordion title="Revenue doesn't match between platforms">
    * Confirm `payout` is mapped to `[[tag:CallPayout]]`
    * Remember the payout is taken at the moment the webhook fires, so early events like **Call Inbound** may carry no revenue yet. Use **Call Paid** for revenue reporting
    * Make sure both platforms use the same currency
  </Accordion>

  <Accordion title="Phone number is not being replaced">
    * Verify the `organizationId` and `campaignSourceId` in the script
    * Make sure the number on the page uses a standard format, such as (555) 123-4567
    * Check the browser console for script errors, and that the SDK isn't loaded twice
  </Accordion>
</AccordionGroup>

***

## Best Practices

* **Always send a transaction ID** (`txid`) to avoid duplicate conversions
* **Prefer redirect tracking** when the traffic source allows it, since the click ID is available immediately in the URL
* **Use "Call Paid"** as your main optimization event, so ad platforms learn from calls that actually earned revenue
* **Conserve your number pool** by loading the CallGrid SDK only for engaged visitors
* **Test before going live** with CallGrid's webhook tester and at least one real call
* **Match domains**: the domain in your CallGrid webhook must be the same ClickFlare tracking domain your campaign uses
* **Reconcile weekly**: compare conversion counts in CallGrid and ClickFlare to catch issues early

***

## Frequently Asked Questions (FAQ)

> **Q1**: Do I need a number pool, or can I use a single number?

**A1**: A single static number works, but CallGrid can then only attribute calls at the campaign level. To tie each call to a specific ClickFlare click, use a **number pool** so every visitor sees a unique number.

> **Q2**: What happens if my number pool runs out?

**A2**: CallGrid falls back to your static number and still records the call, but it may not be linked to the right click. Increase the pool size or delay loading the SDK (Use Case 2).

> **Q3**: Can I pass more data to ClickFlare, such as the caller's ZIP code?

**A3**: Yes. Add more `param` fields (`param1`–`param20`) to the postback and map them to CallGrid tokens for the data you want to analyze.

> **Q4**: Does this work with CallGrid Real-Time Call Bidding (RTB) campaigns?

**A4**: The postback part (Step 5) works the same way. RTB campaigns don't use the on-page SDK, though, so make sure the click ID is passed to CallGrid as a tag through your RTB posting setup.

> **Q5**: Can I send these call conversions to Facebook, TikTok, or Google?

**A5**: Yes. Once the conversion is in ClickFlare, use ClickFlare's Conversion API integrations to forward it server-side to your ad platform.

***

## Related Resources

* [How to Track Ringba Pay-Per-Call Campaigns with ClickFlare](/docs/en/integrations/how-to-track-ringba-pay-per-call-campaigns-with-click-flare)
* [Tracking Conversions Using S2S Postback](/docs/en/tracking/tracking-conversions-using-s2s-postback)
* [Creating a Custom Conversion in ClickFlare](/docs/en/settings/custom-conversions)
* [Direct Campaign Tracking](/docs/en/campaigns/direct-campaign-tracking)
* [How to Use ClickFlare's Tag Manager](/docs/en/tag-manager-1/what-is-the-tag-manager)
* [CallGrid: ClickFlare Integration Guide](https://callgrid.com/knowledge-base/clickflare-integration-guide)
* [CallGrid: Getting Started](https://callgrid.com/knowledge-base/getting-started-with-callgrid)
* [CallGrid JavaScript SDK](https://github.com/callgrid/callgrid-js)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.