Example: Tag Page Visits

Most websites provide a variety of different content. Users visit your site for a couple specific topics but may not want to know about every article you publish.

If you run an ecommerce site with men's and women's fashion, I may not want notifications that dresses are 30% off or slacks are BOGOHO. Similarly if you run a news site with entertainment, finance, politics, and sports articles, if I don't visit entertainment and politics pages, I likely don't want updates about those topics.

When users subscribe to a page or click a notification, it shows interest in that topic. We provide guides on how to Auto-Segment Users By Subscription Page Topic and Auto-Segment Users Based on Notification Topic, but what about other topics your site provides that subscribers may have interest in?

By leveraging OneSignal's Data Tags and adding just a little bit of code, we can keep track of what page topics the user visits and how many times they visit. This way, you can send them updates and offers they care about.

Here’s how it works…

1. Understand user segments

If you are a publisher, think about the types of articles you provide and how they should be segmented.

For example, main topics may be sports, business, politics, and entertainment, but consider what subcategories you specialize in like your prolific authors, different sports teams or world, national and local politics.

🚧

Key Constraints

1. Recommended to start with 3-8 topics at first to stay manageable.
2. Recommended to stay under 20 topics.
3. Plan to keep topic identifiers short. For example, instead of "Entertainment" consider "ent". Instead of "Breaking_News" use "bn".

2. Add the code

Once the topics are decided, it is time to add the code to each page that contains that topic.

Here is an example of what you would add to your pages. The 2 variables:

• numVisitsTrigger is the number of times the user visits the page before the tag is added. You can set this to 0 to start tagging right away.
• topic is the category of the page. This could be part of the url path, a common page topic like "finance", "laptops", "gaming", "pro" vs "non-pro"

// Replace sports with the topic of the page of your choice
var pathArray = window.location.pathname.split('/');
var topic = pathArray[2]; //or use any string you want like: "sports"
// On 3rd visit to this topic tag user set
// Change to any number you want. 0 or 1 will tag user on 1st visit
var numVisitsTrigger = 3; 

function tagUserWithPageTopic(key, value) {
  OneSignal.push(function() {
    OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      console.log("isEnabled: ", isEnabled);
      if (isEnabled) {        
        OneSignal.sendTag(key, value, function(tagsSent) {
            // Callback called when tags have finished sending
            console.log('tags sent: ', tagsSent);
        });      
      }
    });
  });
}

if (typeof localStorage !== "undefined") {
  var topicVisits = parseInt(localStorage.getItem(topic), 10);
  if (!isNaN(topicVisits)) {
    topicVisits += 1;
  } else {
    topicVisits = 0;
  }    
  localStorage.setItem(topic, topicVisits)

  if (topicVisits >= numVisitsTrigger) {
    tagUserWithPageTopic(topic, topicVisits);
  }
}

// replace the "keys" with any tag keys you want to use
// keep the structure the same to make sure its a valid simple JSON object
var osTagsForPage = {
  "key1": 0,
  "key2": 0,
  "key3": 0
};

function osUpdateTags(osTags) {
  OneSignal.push(function() {
    OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      if (isEnabled) {
        OneSignal.sendTags(osTags).then(function(tagsSent) {
          console.log("tagsSent: ", tagsSent);
        });
      }
    });
  });
}

if (typeof localStorage !== "undefined") {
  var osTags = {};
  var localTags = getOSTags();
  console.log("localTags: ", localTags);
  var tagsUpdated = false

  for (key in osTagsForPage) {
    if (key in localTags) {
      console.log("key in localTags: ", key);
      if (!isNaN(localTags[key])) {
        localTags[key] = (localTags[key] + 1 || 1);
        osTags[key] = localTags[key];
        console.log("osTags from localTags ", osTags);
        tagsUpdated = true;
      } else {
        console.log("tag key's value not a number: ", localTags[key])
      }
    } else {
      console.log("key not in localTags: ", key);
      osTags[key] = 1;
      console.log("osTags ", osTags)
      tagsUpdated = true;
    }
  }
  localStorage.setItem("osTags", JSON.stringify(osTags));

  if (tagsUpdated) {
    osUpdateTags(osTags)
  }
}

function getOSTags() {
  return localStorage.getItem("osTags") ?
    JSON.parse(localStorage.getItem("osTags")) : [];
}

In this example there are 2 variables to consider.

1. numVisitsTrigger is the number of times a user visits a page on a certain topic before a tag is added. Here, the 3rd time a user visits a page with the decided topic, they will get tagged with that topic.

2. topic is the actual topic of the page and tag key that will be added to the user.

See our Web SDK docs for more on the sendTag method.

3. Target and send your messages

As soon as this data gets added to your users, you can now group them with Segments or Api Filters.

You are now ready to start sending relevant messages and engaging users based on what they want!