# How to Filter Events in JavaScript SDK

<!--Page Type: How-To Guide-->
<!--
Table of Contents:
1. Introduction
2. Filter destinations while loading SDK
3. Filter destinations at event level
4. Client-side event filtering
-->
<p>This guide covers the following event filtering use cases:</p>
<ul>
<li><a href="#filter-destinations-while-loading-the-sdk" >Send all events to specific destinations</a> (web device mode only)</li>
<li><a href="#filter-destinations-at-event-level" >Filter destinations at the event level</a></li>
<li><a href="#client-side-event-filtering" >Filter client-side events</a> before sending them to destinations (web device mode only)</li>
</ul>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="filter-destinations-while-loading-the-sdk">Filter destinations while loading the SDK</h2><p>You can filter all events sent to <a href="https://www.rudderstack.com/docs/destinations/rudderstack-connection-modes/#device-mode" >web device mode</a> destinations by passing an <a href="https://www.rudderstack.com/docs/sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk/#integrationopts" >integrations</a>  object in the <a href="https://www.rudderstack.com/docs/sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk/#loading-options" ><code>load</code> API</a> options. RudderStack then loads and sends events only to the allowed (and enabled) destinations.</p>

<html lang="en">
<blockquote class="info">
  <div class="tip-quote">
    
    <div class="tip-text"><p>The <code>integrations</code> object in the <code>load</code> API only controls the loading of the device mode destinations. The data is <strong>not</strong> propagated to the individual event payloads automatically.</p>
<p>To <a href="https://www.rudderstack.com/docs/sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk/#useglobalintegrationsconfiginevents" >use the globally-defined integration options at the event level</a>, set the <code>useGlobalIntegrationsConfigInEvents</code> option of the <code>load</code> API to <code>true</code>.</p>
</div>
  </div>
</blockquote>

</html>
<p>A sample snippet to send event data only to the <strong>Amplitude</strong> and <strong>Intercom</strong> destinations:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
    integrations: {
        All: false,
        &#34;Amplitude&#34;: true,
        &#34;Intercom&#34;: true
    }
});</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="filter-destinations-at-event-level">Filter destinations at event level</h2><p>You can control filtering a single event to the allowed (and enabled) destinations.</p>
<p>A sample <code>track</code> event instrumentation to send the event only to the <strong>Amplitude</strong> destination:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">rudderanalytics.track(
    &#34;Order Completed&#34;, {
        revenue: 30,
        currency: &#34;USD&#34;,
        user_actual_id: 12345
    }, {
        integrations: {
            All: false,
            &#34;Amplitude&#34;: true
        }
    }
);</code></pre></div>
</div>

<blockquote class="warning">
  <div class="tip-quote">
    
    <div class="tip-text"><p>The destination name in the <code>integrations</code> object should match the name exactly as displayed in the <a href="https://app.rudderstack.com/directory" >RudderStack dashboard</a>. It should <strong>not</strong> be the name that you assigned to the destination while setting it up in RudderStack.</p>
<figure><img src="/docs/images/dashboard-guides/amplitude-destination-name-webapp.webp" class="img-shortcode"/>
</figure></div>
  </div>
</blockquote>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="use-the-global-integrations-object">Use the global integrations object</h3><p>You can also use the globally-defined <code>integrations</code> object ( <a href="https://www.rudderstack.com/docs/sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk/#useglobalintegrationsconfiginevents" ><code>useGlobalIntegrationsConfigInEvents</code></a> option of the <code>load</code> API) to enforce the destination filtering settings at the event level <strong>if</strong> it is not defined in the event already.</p>

<html lang="en">
<blockquote class="info">
  <div class="tip-quote">
    
    <div class="tip-text">The SDK gives precedence to the <code>integrations</code> object defined at the event level over the globally-defined <code>integrations</code> object.</div>
  </div>
</blockquote>

</html>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="client-side-event-filtering">Client-side event filtering</h2><p>To implement client-side event filtering for <a href="https://www.rudderstack.com/docs/destinations/rudderstack-connection-modes/#device-mode" >web device mode</a> destinations, you can configure the <a href="https://www.rudderstack.com/docs/sources/event-streams/sdks/event-filtering/#event-filtering-options" >filtering options</a> in the RudderStack dashboard. This allows you to control which <code>track</code> events are sent to specific destinations without modifying your SDK implementation.</p>
<p><strong>No additional SDK configuration is required</strong>. The JavaScript SDK automatically respects and applies the filtering rules you have set up in the dashboard.</p>
<br />
