# Pixel Tracking for RSS and Email Analytics

<div class="mb-6">
  <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-orange-50 dark:bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-200 dark:border-orange-500/20">
    <div class="p-0.5 rounded-full bg-orange-100 dark:bg-orange-500/20">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
        <path fill-rule="evenodd" d="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 01-1.299 2.25H2.804a1.5 1.5 0 01-1.3-2.25l5.197-9zM8 4a.75.75 0 01.75.75v3a.75.75 0 11-1.5 0v-3A.75.75 0 018 4zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
      </svg>
    </div>
    <span>BETA</span>
  </span>
  <p class="text-xs text-orange-600 dark:text-orange-400 mt-2">This feature is currently in beta testing and may be subject to changes.</p>
</div>

Pixel tracking allows you to track visitors from sources that don't support JavaScript, such as RSS feeds, email newsletters, and other content distribution platforms. This invisible tracking method provides insights into how your content is consumed across different channels.

## What is Pixel Tracking?

Pixel tracking uses a transparent, 1x1 pixel image embedded in your content. When someone views your content (in an RSS reader, email client, etc.), their client fetches this tiny image from our servers, allowing us to record that view anonymously.

> **Privacy Note:** Pixel tracking follows the same privacy-friendly principles as our main analytics. No personal data is stored, and visitor information is anonymized using rotating salts.

## Getting Your Pixel Tracking Code

1. Go to your site's Community tab in Tinylytics
2. Your unique pixel tracking URLs and code will be displayed
3. Choose between basic tracking or per-content tracking

## Implementation Methods

### Basic Pixel Tracking

For general tracking across all your RSS feeds or emails:

```html
<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif" alt="" style="width:1px;height:1px;border:0;" />
```

### Per-Content Tracking (Recommended)

Track individual posts or content pieces by adding a path parameter:

```html
<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/your-post-slug" alt="" style="width:1px;height:1px;border:0;" />
```

Replace `/your-post-slug` with a unique identifier for each piece of content.

## Platform-Specific Implementation

### RSS Feeds

#### Jekyll RSS Template

Add to your `feed.xml` template:

```xml
<item>
  <title>{{ post.title | xml_escape }}</title>
  <description>
    {{ post.content | xml_escape }}
    &lt;img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path={{ post.url | xml_escape }}" alt="" style="width:1px;height:1px;border:0;" /&gt;
  </description>
  <!-- other item elements -->
</item>
```

#### Hugo RSS Template  

Add to your RSS template (usually `layouts/_default/rss.xml`):

```xml
<item>
  <title>{{ .Title }}</title>
  <description>
    {{ .Content | html }}
    &lt;img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path={{ .RelPermalink | html }}" alt="" style="width:1px;height:1px;border:0;" /&gt;
  </description>
  <!-- other item elements -->
</item>
```

#### WordPress RSS

Add to your theme's `functions.php`:

```php
function add_tinylytics_pixel_to_feed($content) {
    if (is_feed()) {
        $post_slug = get_post_field('post_name');
        $pixel = '<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/' . $post_slug . '" alt="" style="width:1px;height:1px;border:0;" />';
        $content = $content . $pixel;
    }
    return $content;
}
add_filter('the_content_feed', 'add_tinylytics_pixel_to_feed');
```

#### Ghost RSS

Edit your RSS template in the Ghost admin:

```handlebars
{{#foreach posts}}
<item>
    <title>{{title}}</title>
    <description>
        {{content}}
        &lt;img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path={{url}}" alt="" style="width:1px;height:1px;border:0;" /&gt;
    </description>
    <!-- other item elements -->
</item>
{{/foreach}}
```

### Email Newsletters

#### HTML Email Template

```html
<table role="presentation" style="width:100%">
  <tr>
    <td>
      <!-- Your email content here -->
      <p>Your newsletter content...</p>
      
      <!-- Tracking pixel at the end -->
      <img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/newsletter-2024-01" alt="" style="width:1px;height:1px;border:0;" />
    </td>
  </tr>
</table>
```

#### Mailchimp

Add this to your email template's HTML:

```html
<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/mailchimp-*|DATE:Y-m-d|*" alt="" style="width:1px;height:1px;border:0;" />
```

#### ConvertKit

Add to your email sequence or broadcast:

```html
<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/convertkit-{{subscriber.id}}" alt="" style="width:1px;height:1px;border:0;" />
```

### Static Site Generators

#### 11ty (Eleventy)

Add to your post template:

```html
{% if permalink %}
<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path={{ permalink }}" alt="" style="width:1px;height:1px;border:0;" />
{% endif %}
```

#### Astro

Add to your post layout:

```astro
---
const { slug } = Astro.params;
---
<img src={`https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/${slug}`} alt="" style="width:1px;height:1px;border:0;" />
```

## Advanced Tracking Scenarios

### Newsletter Campaign Tracking

Track different newsletter campaigns by using descriptive paths:

```html
<!-- Monthly newsletter -->
<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/newsletter/monthly/2024-01" alt="" style="width:1px;height:1px;border:0;" />

<!-- Product announcement -->
<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/newsletter/product-launch/new-feature" alt="" style="width:1px;height:1px;border:0;" />
```

### Social Media Content

Track content shared on platforms that support HTML:

```html
<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/social/linkedin/post-123" alt="" style="width:1px;height:1px;border:0;" />
```

### PDF Documents

If you're distributing PDFs that support HTML content:
```html
<img src="https://tinylytics.app/pixel/YOUR_SITE_CODE.gif?path=/pdf/whitepaper-2024" alt="" style="width:1px;height:1px;border:0;" />
```

## Understanding Your Pixel Tracking Data

### What Gets Tracked
- **Views**: Each time the pixel image is loaded
- **Sources**: RSS readers, email clients, and other platforms
- **Geographic data**: Country-level location (anonymized)
- **Timing**: When content was viewed
- **Content**: Which specific posts or campaigns were viewed

### RSS Reader Detection
The system automatically detects and categorizes different RSS readers:

- Feedly
- Inoreader  
- NewsBlur
- The Old Reader
- And many more

### Data in Your Dashboard
- View counts per content piece
- RSS subscriber estimates
- Email open rates (where applicable)
- Geographic distribution of pixel hits
- Timeline of content consumption

## Troubleshooting

### Pixel Not Loading
- Verify your site code is correct
- Check that the content platform allows external images
- Some email clients block images by default

### Low Tracking Numbers
- RSS readers often cache content, reducing pixel loads
- Email clients may block images until user action
- Some privacy-focused readers/clients block tracking pixels

### Testing Your Implementation
1. Add the pixel to a test RSS feed or email
2. View the content in different readers/clients
3. Check your Tinylytics dashboard for new hits
4. Verify the path parameter is being recorded correctly

## Best Practices

### Path Naming Conventions
Use consistent, descriptive paths:

- `/rss/post-title-slug`
- `/newsletter/2024/01/weekly-update`
- `/email/campaign-name`
- `/social/platform/post-id`

### Privacy Considerations

- Always include empty `alt=""` attributes
- Use minimal styling to keep pixels invisible
- Inform users about analytics tracking in your privacy policy
- Consider offering opt-out mechanisms where appropriate

### Performance Tips

- Place pixels at the end of content when possible
- Use the `.gif` extension for better compatibility
- Keep path parameters simple and URL-encoded

## Limitations

- **Email Clients**: Many block images by default
- **Privacy Tools**: Some browsers/extensions block tracking pixels
- **Cached Content**: RSS readers may cache and not reload pixels
- **Offline Reading**: Won't track content read offline

## Getting Help

If you're having trouble implementing pixel tracking:
1. Check your Tinylytics dashboard for any error messages
2. Test with a simple HTML file first
3. Verify your site code is active and correct
4. Contact support with specific implementation details

Remember: Pixel tracking complements, not replaces, regular JavaScript-based analytics. Use both methods for the most comprehensive view of your content's reach.