# June Web Device Mode Integration

<p>RudderStack lets you send your event data to June destination via <a href="https://www.rudderstack.com/docs/destinations/rudderstack-connection-modes/#device-mode" >device mode</a> using the native web SDK.</p>
<p>Find the open-source code for this destination in the <a href="https://github.com/rudderlabs/rudder-sdk-js/tree/develop/packages/analytics-js-integrations/src/integrations/June" >GitHub repository</a>.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="identify">Identify</h2><p>You can use the <a href="https://www.rudderstack.com/docs/event-spec/standard-events/identify/" ><code>identify</code></a> call to create new users or update existing users&rsquo; details in June. RudderStack sends the <code>identify</code> call to June as an <a href="https://www.june.so/docs/tracking/web/browser" ><code>identify</code></a> event.</p>

<html lang="en">
<blockquote class="info">
  <div class="tip-quote">
    
    <div class="tip-text">Make sure that you make an <code>identify</code> call before making a <code>track</code>, <code>group</code>, or <code>page</code> call.</div>
  </div>
</blockquote>

</html>
<p>A sample <code>identify</code> call is shown below:</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.identify(&#34;1hKOmRA4el9Z&#34;, {
  name: &#34;Alex Keener&#34;,
  email: &#34;alex@example.com&#34;
})</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="property-mappings">Property mappings</h3><p>The following table lists the property mappings between RudderStack and June for the <code>identify</code> call:</p>
<table>
  <thead>
      <tr>
          <th>RudderStack property</th>
          <th>June property</th>
          <th>Data type</th>
          <th>Presence</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>userId</code>/<code>context.traits.userId</code>/<code>context.traits.id</code></td>
          <td><code>userId</code></td>
          <td>String</td>
          <td>Required</td>
      </tr>
      <tr>
          <td><code>context.traits</code></td>
          <td><code>traits</code></td>
          <td>Object</td>
          <td>Optional</td>
      </tr>
  </tbody>
</table>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="track">Track</h2><p>The <a href="https://www.rudderstack.com/docs/event-spec/standard-events/track/" ><code>track</code></a> call lets you capture user events along with the properties associated with them. RudderStack sends the <code>track</code> call to June as a <a href="https://www.june.so/docs/tracking/web/browser" ><code>track</code></a> event.</p>
<p>A sample <code>track</code> call is shown below:</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">// groupId using properties object
rudderanalytics.track(&#34;Product Reviewed&#34;, {
  review_id: &#34;12345&#34;,
  product_id: &#34;123&#34;,
  rating: 3.0,
  review_body: &#34;Average product, expected much more.&#34;,
  groupId: &#34;5H7ASAIEQO&#34;,
});

// groupId using context.externalId array
rudderanalytics.track(
  &#34;Product Reviewed&#34;, {
    review_id: &#34;12345&#34;,
    product_id: &#34;123&#34;,
    rating: 3.0,
    review_body: &#34;Average product, expected much more.&#34;,
  }, {
    externalId: [{
      type: &#34;juneGroupId&#34;,
      id: &#34;5H7ASAIEQO&#34;,
    }, ],
  }
);</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="property-mappings-1">Property mappings</h3><p>The following table lists the property mappings between RudderStack and June for the <code>track</code> call:</p>
<table>
  <thead>
      <tr>
          <th>RudderStack property</th>
          <th>June property</th>
          <th>Data type</th>
          <th>Presence</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>event</code></td>
          <td><code>event</code></td>
          <td>String</td>
          <td>Required</td>
      </tr>
      <tr>
          <td><code>properties</code></td>
          <td><code>properties</code></td>
          <td>Object</td>
          <td>Optional</td>
      </tr>
      <tr>
          <td><ul><li>If <code>context.externalId.id</code> (when <code>context.externalId.type</code> = <code>juneGroupId</code>) is present.</li><li>Otherwise, <code>properties.groupId</code>.</li></ul></td>
          <td><code>context.groupId</code></td>
          <td>String</td>
          <td>Optional</td>
      </tr>
  </tbody>
</table>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="page">Page</h2><p>The <a href="https://www.rudderstack.com/docs/event-spec/standard-events/page/" ><code>page</code></a> call lets you record your website&rsquo;s page views with any additional relevant information about the viewed page. RudderStack sends the <code>page</code> call to June as a <code>PageView</code> event.</p>
<p>A sample <code>page</code> call is shown below:</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.page(&#34;Home&#34;)</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="property-mappings-2">Property mappings</h3><p>The following table lists the property mappings between RudderStack and June for the <code>page</code> call:</p>
<table>
  <thead>
      <tr>
          <th>RudderStack property</th>
          <th>June property</th>
          <th>Data type</th>
          <th>Presence</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>name</code></td>
          <td><code>name</code></td>
          <td>String</td>
          <td>Optional</td>
      </tr>
      <tr>
          <td><code>properties</code></td>
          <td><code>properties</code></td>
          <td>Object</td>
          <td>Optional</td>
      </tr>
  </tbody>
</table>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="group">Group</h2><p>You can use the <a href="https://www.rudderstack.com/docs/event-spec/standard-events/group/" ><code>group</code></a> call to create a new company or update an existing company&rsquo;s details in June.</p>

<blockquote class="warning">
  <div class="tip-quote">
    
    <div class="tip-text">If you are using a <code>group</code> call to identify a company, it is recommended to pass the <code>groupId</code> in the <code>track</code> call. It allows you to specify which company performed that specific event. For more information, refer to the <a href="https://www.june.so/docs/tracking/web/browser">June documentation</a>.</div>
  </div>
</blockquote>
<p>A sample <code>group</code> call is shown below:</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.group(&#34;23Np893Z6&#34;, {
  name: &#34;ABC company&#34;,
  employees: 100,
  Industry: &#34;Video game publisher&#34;,
  Founded: 1979
});</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="property-mappings-3">Property mappings</h3><p>The following table lists the property mappings between RudderStack and June for the <code>group</code> call:</p>
<table>
  <thead>
      <tr>
          <th>RudderStack property</th>
          <th>June property</th>
          <th>Data type</th>
          <th>Presence</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>groupId</code>/<code>traits.groupId</code></td>
          <td><code>groupId</code></td>
          <td>String</td>
          <td>Required</td>
      </tr>
      <tr>
          <td><code>traits</code></td>
          <td><code>traits</code></td>
          <td>Object</td>
          <td>Optional</td>
      </tr>
  </tbody>
</table>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="faq">FAQ</h2><!-- end-chunk -->
<!-- begin-chunk -->
<h4 id="can-i-make-an-identify-or-track-call-using-anonymousid">Can I make an <code>identify</code> or <code>track</code> call using <code>anonymousId</code>?</h4><p>No, you can&rsquo;t. June does not stitch identities together or support merging anonymous users. Rather, it is best used to measure user activation and retention when the user is logged in.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h4 id="my-user-is-created-as-unknown-in-june-dashboard-what-might-be-the-reason">My user is created as <code>Unknown</code> in June dashboard. What might be the reason?</h4><p>June categorizes a user as <code>Unknown</code> if the <code>firstName</code>, <code>lastName</code>, <code>name</code>, <code>username</code>, or <code>email</code> is not present in the <code>traits</code> object of the <code>identify</code> call.</p>

