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

# Navigation & Filtering

> Switch between ad networks, drill down through campaigns, ad sets, and ads, and filter your view by any metric or attribute — all from a single unified interface.

export const ArcadeVideoButton = ({id, title = "Watch interactive demo", label = "Watch Video"}) => {
  const [open, setOpen] = useState(false);
  return <div style={{
    display: 'inline-block'
  }}>
      <button type="button" onClick={() => setOpen(true)} style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: '8px',
    backgroundColor: '#3e47ec',
    color: '#ffffff',
    border: 'none',
    padding: '10px 18px',
    borderRadius: '8px',
    fontSize: '15px',
    fontWeight: '600',
    cursor: 'pointer'
  }}>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white">
          <polygon points="5,3 19,12 5,21" />
        </svg>
        {label}
      </button>

      {open && <div onClick={() => setOpen(false)} style={{
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.85)',
    zIndex: 9999999,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}>
          <div onClick={e => e.stopPropagation()} style={{
    width: '90%',
    maxWidth: '1100px',
    aspectRatio: '16 / 9',
    borderRadius: '12px',
    overflow: 'hidden',
    position: 'relative'
  }}>
            <iframe src={`https://demo.arcade.software/${id}?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true`} title={title} frameBorder="0" loading="lazy" allowFullScreen allow="clipboard-write" style={{
    width: '100%',
    height: '100%',
    border: 'none',
    colorScheme: 'light'
  }} />
          </div>

          <button type="button" onClick={() => setOpen(false)} style={{
    position: 'fixed',
    top: '20px',
    right: '24px',
    background: 'rgba(255,255,255,0.15)',
    border: 'none',
    color: '#ffffff',
    fontSize: '24px',
    lineHeight: 1,
    width: '40px',
    height: '40px',
    borderRadius: '50%',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}>
            ✕
          </button>
        </div>}
    </div>;
};

export const ArcadePopoutModal = ({id, title = "Interactive demo"}) => {
  const [isPopout, setIsPopout] = useState(false);
  const iframeRef = useRef(null);
  useEffect(() => {
    function onArcadeIframeMessage(e) {
      if (e.origin !== 'https://demo.arcade.software' || !e.isTrusted) return;
      if (!iframeRef.current || !iframeRef.current.contentWindow) return;
      if (e.data.event === 'arcade-init') {
        iframeRef.current.contentWindow.postMessage({
          event: 'register-popout-handler'
        }, '*');
      }
      if (e.data.event === 'arcade-popout-open') {
        setIsPopout(true);
      }
      if (e.data.event === 'arcade-popout-close') {
        setIsPopout(false);
      }
    }
    window.addEventListener('message', onArcadeIframeMessage);
    return () => window.removeEventListener('message', onArcadeIframeMessage);
  }, []);
  return <div style={{
    position: 'relative',
    paddingBottom: 'calc(54.4737% + 41px)',
    height: 0,
    width: '100%'
  }}>
      <iframe ref={iframeRef} src={`https://demo.arcade.software/${id}?embed&embed_mobile=tab&embed_desktop=modal&show_copy_link=true`} title={title} frameBorder="0" loading="lazy" allowFullScreen allow="clipboard-write" style={{
    position: isPopout ? 'fixed' : 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    zIndex: isPopout ? 9999999 : 'auto',
    colorScheme: 'light'
  }} />
    </div>;
};

## Ad Network Navigation

At the very top of the Campaign Manager you will find the ad network navigation bar. Every ad network you have connected to TheOptimizer appears here as an icon. Clicking an icon switches the entire campaigns view to that network — showing only campaigns, ad sets, and ads that belong to it.

<Tip>
  If you do not see an ad network icon here, it has not been connected yet. Go to **Integrations** to add it.
</Tip>

***

## Ad Accounts Filter

Directly to the right of the ad network icons is the **Ad Accounts** filter. Instead of being locked to a single ad account at a time like in native ad managers, you can view and manage campaigns across all your accounts simultaneously — or narrow down to exactly the accounts you need.

Your selected accounts act as a persistent scope — all other filters and data in the view apply only within those accounts.

<Frame>
  <img src="https://mintcdn.com/theoptimizer/d8i_PgwXHcJW-VUm/images/campaigns-ad-account-filtering-dialog.png?fit=max&auto=format&n=d8i_PgwXHcJW-VUm&q=85&s=10e729484bd060f5b78b9914a6003ace" alt="Campaigns Ad Account Filtering Dialog" width="2547" height="984" data-path="images/campaigns-ad-account-filtering-dialog.png" />
</Frame>

### Filtering by Tags

TheOptimizer automatically assigns two tags to every ad account when it is connected:

* **Timezone tag** — the time zone configured on that account (e.g., `UTC`, `America/Los_Angeles`)
* **Currency tag** — the currency of the account (e.g., `USD`, `EUR`, `GBP`)

These default tags let you instantly filter to, for example, all USD accounts or all accounts running on Eastern time. You can add your own custom tags from **Integrations → Ad Network → Ad Accounts** to create groupings that match your team structure, geo focus, or offer verticals.

### Searching for Specific Accounts

Inside the ad account filter, type to search for accounts by name. Select one or more accounts and click **Filter** to scope the Campaign Manager to only those accounts.

***

## Campaigns, Ad Sets & Ads

Three tabs sit above the main table: **Campaigns**, **Ad Sets**, and **Ads** (some networks use "Ad Groups" instead of "Ad Sets"). Each tab shows all items of that type across every selected ad account.

* Clicking a tab with **no items selected** shows all items of that type across your accounts — a cross-account view you cannot get in native ad managers.
* **Selecting one or more campaigns** on the Campaigns tab and then switching to Ad Sets filters the list to show only the ad sets belonging to those campaigns.
* **Selecting ad sets** and switching to Ads filters to show only ads within those ad sets.

This mirrors the drill-down navigation of native ad managers, but with cross-account breadth.

***

## Filters

The filtering bar sits below the Totals Bar and lets you search and filter campaigns, ad sets, or ads by virtually any metric or attribute. Click the **Search filters...** box to open the filter panel.

<Frame>
  <img src="https://mintcdn.com/theoptimizer/d8i_PgwXHcJW-VUm/images/campaign-filter.png?fit=max&auto=format&n=d8i_PgwXHcJW-VUm&q=85&s=36a101e601526a068f9ab36585a0c8c6" alt="Campaign Filter" width="2461" height="1704" data-path="images/campaign-filter.png" />
</Frame>

### Quick Conditions

At the top of the filter panel, **Quick Conditions** are pre-built single-click presets for the most common needs:

* **Delivering** — items with Impressions > 0 (receiving active traffic)
* **Profitable** — items with NET Profit > 0
* **Losing Money** — items with NET Profit \< 0

### Popular Filters & Categories

**Popular Filters** is a dynamically generated list of the filters you use most frequently. It updates as you work, surfacing the metrics you reach for regularly.

**Find by Category** is a structured directory of all available filter metrics:

| Category        | What it contains                                                                         |
| --------------- | ---------------------------------------------------------------------------------------- |
| **Performance** | Spend, impressions, clicks, CTR, CPC, CPA, ROI, revenue, NET, and other core metrics     |
| **Conversions** | Traffic source conversions, tracker conversions, and custom conversion events            |
| **Identifiers** | Campaign, ad set, and ad names and IDs — useful for filtering to a specific item by name |
| **Other**       | Tags, budgets, start dates, statuses, and other non-metric attributes                    |

To find a specific metric quickly, start typing in the filter search box — you do not need to browse through the categories manually.

### Saving Custom Views

Once you have built a filter combination you want to reuse, save it as a **View**.

<Frame>
  <img src="https://mintcdn.com/theoptimizer/d8i_PgwXHcJW-VUm/images/campaigns-filter-custom-view.png?fit=max&auto=format&n=d8i_PgwXHcJW-VUm&q=85&s=4e2514e5f247bfd011ac3eef63d74031" alt="Campaigns Filter Custom View" width="2470" height="1702" data-path="images/campaigns-filter-custom-view.png" />
</Frame>

<Steps>
  <Step title="Apply filters">
    Add one or more filters to the filtering bar.
  </Step>

  <Step title="Click Create View">
    When at least one filter is active, a **Create View** button appears at the right of the filtering bar. Click it.
  </Step>

  <Step title="Name and save">
    Enter a name for the view and click **Create**.
  </Step>
</Steps>

Saved views appear as clickable tabs above the filtering bar. A single click applies the entire filter combination instantly.

<Tip>
  Create views for your most common morning review filters — for example, a "Profitable" view per network, or a "High Spend / No Conversions" view for catching wasted budget quickly.
</Tip>