# Post viewed
Learn how to track when a user views a blog post.
This event tracks when a user views a blog post.
> **Automatically tracked**
>
> The SDK automatically tracks this event when [`structured data`](https://developers.google.com/search/docs/appearance/structured-data/article) is present.
## Implementation
Here is an example of how to track this event:
**JavaScript**
```javascript
import croct from '@croct/plug';
croct.track('postViewed', {
post: {
postId: 'croct-launches-new-sdk',
title: 'Croct launches new SDK',
publishTime: 1499839200000
}
});
```
**HTML**
```html
My awesome application
```
**React — JavaScript**
```jsx
import {useCroct} from '@croct/plug-react';
export function Example() {
const croct = useCroct();
const track = () => croct.track('postViewed', {
post: {
postId: 'croct-launches-new-sdk',
title: 'Croct launches new SDK',
publishTime: 1499839200000
}
});
return ();
}
```
**React — TypeScript**
```typescript
import {useCroct} from '@croct/plug-react';
import type {ReactElement} from 'react';
export function Example(): ReactElement {
const croct = useCroct();
const track = () => croct.track('postViewed', {
post: {
postId: 'croct-launches-new-sdk',
title: 'Croct launches new SDK',
publishTime: 1499839200000
}
});
return ();
}
```
**Next — JavaScript**
```jsx
import {useCroct} from '@croct/plug-next';
export function Example() {
const croct = useCroct();
const track = () => croct.track('postViewed', {
post: {
postId: 'croct-launches-new-sdk',
title: 'Croct launches new SDK',
publishTime: 1499839200000
}
});
return ();
}
```
**Next — TypeScript**
```tsx
import {useCroct} from '@croct/plug-next';
import type {ReactElement} from 'react';
export function Example(): ReactElement {
const croct = useCroct();
const track = () => croct.track('postViewed', {
post: {
postId: 'croct-launches-new-sdk',
title: 'Croct launches new SDK',
publishTime: 1499839200000
}
});
return ();
}
```
**Vue — JavaScript**
```vue
```
**Vue — TypeScript**
```vue
```
**Nuxt — JavaScript**
```vue
```
**Nuxt — TypeScript**
```vue
```
## Input properties
These are the supported properties:
- `post`: `object`
The information about the blog post.
- `postId`: `string`
The unique identifier of the blog post. For example, "croct-launches-new-sdk".
It is usually the "slug" of the post, or some other identifier that does not change.
The value must be between 1 and 100 characters long.
- `title`: `string`
The title of the post. For example, "Croct launches new SDK".
The value must be between 1 and 100 characters long.
- `publishTime`: `number`
The time of the post publication, in milliseconds since Unix epoch.
The value must be non-negative.
- `url`: `string` (optional)
The URL of the post page.
- `tags`: `Array` (optional)
The set of tags associated with the post. For example, "startup", "product", "dev-tools".
The value must be an array of up to 10 strings between 1 and 50 characters long.
- `categories`: `Array` (optional)
The categories the post belongs to. For example, "news", "updates", "releases".
The value must be an array of up to 10 strings between 1 and 50 characters long.
- `authors`: `Array` (optional)
The authors of the post. For example, "John Doe", "Jane Smith".
The value must be an array of up to 10 strings between 1 and 50 characters long.
- `updateTime`: `number` (optional)
The time of the post's last update, in milliseconds since Unix epoch.
The value must be non-negative.
## Processed properties
This event has no processed properties.
## Payload examples \[#user-signed-up-input-examples]
Below are some payload examples for this event:
**Basic payload**
```json
{
"post": {
"postId": "croct-launches-new-sdk",
"title": "Croct launches new SDK",
"publishTime": 1499839200000
}
}
```
**Full payload**
```json
{
"post": {
"postId": "croct-launches-new-sdk",
"title": "Croct launches new SDK",
"publishTime": 1499839200000,
"url": "https://croct.com/blog/croct-launches-new-sdk",
"tags": ["startup", "product", "dev-tools"],
"categories": ["news", "updates", "releases"],
"authors": ["John Doe", "Jane Smith"],
"updateTime": 1499839200000
}
}
```
**Processed payload**
```json
{
"type": "postViewed",
"post": {
"postId": "croct-launches-new-sdk",
"title": "Croct launches new SDK",
"publishTime": 1499839200000,
"url": "https://croct.com/blog/croct-launches-new-sdk",
"tags": ["startup", "product", "dev-tools"],
"categories": ["news", "updates", "releases"],
"authors": ["John Doe", "Jane Smith"],
"updateTime": 1499839200000
}
}
```
## Explore
- [Analytics](/reference/analytics): Learn how to analyze your dashboards.
- [Event-based audiences](/reference/cql/expressions/events/event-types/post-viewed): Learn how to create audiences based on this event.