# Recipes

## Content Publisher Example

Add the ButtonJS tag to your website to enable SMS collection, user identity, and track visitors' onsite activity.

### In this Recipe

1. Add the Button Tag to your page  
2. Identify users with your customer ID  
3. Report page's content

### 1. Report onsite activity

JavaScript

```javascript
<script>
  window.ButtonWebConfig = {
    // Replace app-xxxxxxxxxxxxxxxx with your Mobile Web App ID from
    // the Button Dashboard: https://app.usebutton.com
    applicationId: 'app-xxxxxxxxxxxxxxxx',
    enableSmsCollection: true,
    enableAutomaticActivityReporting: true
  };

(function(u,s,e,b,t,n){u['__bttnio']=b;u[b]=u[b]||function(){(u[b].q=u[b].q||[]).push(arguments)};t=s.createElement(e);n=s.getElementsByTagName(e)[0];t.async=1;t.src='https://web.btncdn.com/v1/button.js';n.parentNode.insertBefore(t,n)})(window, document, 'script', 'bttnio');
</script>
```

```javascript
<script>
  // call after user successfully logs in
  bttnio('setCustomerId', 'alfred-pennyworth-123'); // case-sensitive string
  // call after user logs outs
  bttnio('setCustomerId', null);
</script>
```

```javascript
<script>
  // call after page load
  bttnio('reportPageView', {
    categories: ['Technology', 'Mobile Phones']
  });
</script>
```

```javascript
<script>
  // Click event
  elem.addEventListener('likeButton', function(e) {
    // Fire ButtonJS Custom Event
    bttnio(
      'reportEvent',
      'onsite',
      {
        action: 'liked', // 'liked' is your custom event name
        categories: [
          'Technology',
          'Mobile Phones',
          'Samsung',
          'Galaxy'
        ],
        extra: {
          postId: 26,
          pageType: 'search',
          pinnedPost: false
        },
      },
    );
  }, false);
</script>
```

## E-Commerce Site Example

Add the ButtonJS tag to your website to enable SMS collection, customer identity, order conversion tracking, and product level activity targeting.