Pageview Tracking

permutive.addon('web', {
  page: {
    type: 'article'
  }
});

permutive.addon('web', {
  page: {
    type: 'article',
    article: {
      title: 'Article Title',
      categories: ['news', 'technology'],
      authors: ['Jane Smith'],
      publishedAt: '2024-01-15T10:00:00Z'
    }
  }
});

permutive.addon('web', {
  page: {
    type: 'article',
    article: {
      // Identification
      id: 'article-123',
      title: 'Breaking News: Tech Advances',

      // Categorization
      categories: ['technology', 'business'],
      tags: ['AI', 'startups', 'innovation'],
      section: 'Technology',

      // Attribution
      authors: ['Jane Smith', 'John Doe'],
      publishedAt: '2024-01-15T10:00:00Z',
      modifiedAt: '2024-01-15T14:30:00Z',

      // Content attributes
      wordCount: 1500,
      readTime: 7,
      premium: false,
      sponsored: false
    }
  }
});

permutive.addon('web', {
  page: {
    type: 'video',
    video: {
      id: 'video-456',
      title: 'Product Demo',
      duration: 180,
      categories: ['product', 'tutorial'],
      series: 'How-To Guides',
      season: 1,
      episode: 5
    }
  }
});

permutive.addon('web', {
  page: {
    type: 'homepage'
  }
});

permutive.addon('web', {
  page: {
    type: 'section',
    section: {
      name: 'Technology',
      path: '/technology',
      level: 1
    }
  }
});

// Event structure
{
  name: 'Pageview',
  properties: {
    type: 'article',
    article: {
      title: 'Article Title',
      categories: ['news']
    },
    client: {
      url: 'https://example.com/article',
      referrer: 'https://google.com',
      user_agent: '...'
    }
  }
}

// Event structure
{
  name: 'PageviewEngagement',
  properties: {
    engaged_time: 30,  // seconds
    completion: 0.5    // scroll depth (0-1)
  }
}

// Event structure
{
  name: 'PageviewComplete',
  properties: {
    total_engaged_time: 120,
    completion: 0.85
  }
}

// Event structure
{
  name: 'FormSubmission',
  properties: {
    form_id: 'newsletter-signup',
    form_name: 'Newsletter',
    // Form data (excluding sensitive fields)
  }
}

// Event structure
{
  name: 'LinkClick',
  properties: {
    href: 'https://external-site.com/page',
    text: 'Click here'
  }
}

permutive.addon('web', {
  page: { type: 'article' },
  eventInterval: 5000  // milliseconds (default: 5000)
});

permutive.addon('web', {
  page: { type: 'article' },
  addPageEngagementDetection: function(callback) {
    // Custom engagement detection
    // Call callback() when user is engaged
    document.addEventListener('mousemove', callback);
    document.addEventListener('scroll', callback);
    document.addEventListener('keypress', callback);

    // Return cleanup function
    return function() {
      document.removeEventListener('mousemove', callback);
      document.removeEventListener('scroll', callback);
      document.removeEventListener('keypress', callback);
    };
  }
});

permutive.addon('web', {
  page: { type: 'article' },
  getPageCompletion: function() {
    // Custom completion calculation
    var scrollTop = window.pageYOffset;
    var docHeight = document.documentElement.scrollHeight;
    var winHeight = window.innerHeight;
    return scrollTop / (docHeight - winHeight);
  }
});

permutive.addon('web', {
  context: {
    url: 'https://example.com/canonical-url',
    title: 'Custom Page Title',
    referrer: 'https://custom-referrer.com'
  },
  page: { type: 'article' }
});

// Initial page load
permutive.addon('web', {
  page: getPageProperties()
});

// On navigation
function navigateToNewPage() {
  permutive.addon('web', {
    page: getNewPageProperties()
  });
}

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function PermutiveTracker() {
  const location = useLocation();

  useEffect(() => {
    // Track pageview on initial load and route changes
    permutive.addon('web', {
      page: getPageProperties(location)
    });
  }, [location]);

  return null;
}

function getPageProperties(location) {
  return {
    type: 'article',
    article: {
      title: document.title,
      // ... other properties
    }
  };
}

// In router/index.js or main.js
import router from './router';

router.afterEach((to, from) => {
  // Track pageview on every navigation
  permutive.addon('web', {
    page: getPageProperties(to)
  });
});

function getPageProperties(route) {
  return {
    type: route.meta.pageType || 'page',
    // ... other properties
  };
}

// In app.component.ts
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({...})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        this.trackPageview(event.urlAfterRedirects);
      });
  }

  private trackPageview(url: string): void {
    const pageProps = this.getPageProperties(url);

    // Track pageview on every navigation
    (window as any).permutive.addon('web', {
      page: pageProps
    });
  }
}

var webAddon = permutive.addon('web', {
  page: { type: 'feed' },
  dirtyEvents: ['contentLoaded']  // Custom dirty events
});

// When new content loads
function onNewContentLoaded() {
  // Mark page as "dirty" to trigger new engagement tracking
  webAddon.markDirty('contentLoaded');
}

permutive.addon('web', {
  page: { type: 'article' },
  filterPermutiveEvent: {
    // Only track form submissions with certain IDs
    FormSubmission: function(event) {
      return event.target.id !== 'search-form';
    },
    // Only track external links
    LinkClick: function(event) {
      var href = event.target.href;
      return href && !href.includes(window.location.hostname);
    }
  }
});

?__permutive.loggingEnabled=true

[Permutive] Web addon initialized
[Permutive] Tracking: Pageview {type: "article", ...}
[Permutive] Event accepted: 1/1
[Permutive] Tracking: PageviewEngagement {engaged_time: 5}