Self Handled On-Site Messaging

Moengage.onsite.getSelfHandledOSM(function(fullCampaignData) {
  // This callback function is the entry point for handling campaign data.
  console.log("Received Self-Handled OSM Data:", fullCampaignData);
  
  // Proceed with custom UI rendering and event tracking.
});

[{
  "campaignId": "000000000000000000000001",
  "campaignName": "Holiday Sale Banner",
  "expiryTime": "2025-12-31T23:59:59.000Z",
  "updatedTime": "2025-10-06T10:30:00.000Z",
  "status": "ACTIVE",
  "jsonPayload": "{\"title\":\"Holiday Sale!\",\"message\":\"Get up to 50% off all items.\"}",
  "dismissInterval": 86400,
  "context": {
    "campaign_name": "Holiday Sale Banner",
    "cid": "000000000000000000000001_v2",
    "moe_locale_id": "eng-us",
    "moe_locale_name": "English (US)",
    "moe_variation_id": "variation_b_12345"
  },
  "urlFilters": null
}]

"urlFilters": {
    "included_filters": {
        "filters": [
            {
                "executed": true,
                "execution": {
                    "count": 1,
                    "type": "atleast"
                },
                "action_name": "MOE_PAGE_URL_EVENT",
                "attributes": {
                    "filter_operator": "or",
                    "filters": [
                        {
                            "name": "URL",
                            "data_type": "string",
                            "operator": "containsInTheFollowing",
                            "value": [
                                "loc"
                            ],
                            "value1": "",
                            "negate": false,
                            "case_sensitive": false,
                            "array_filter_type": "any_of"
                        },
                        {
                            "name": "URL",
                            "data_type": "string",
                            "operator": "containsInTheFollowing",
                            "value": [
                                "hos"
                            ],
                            "value1": "",
                            "negate": false,
                            "case_sensitive": false,
                            "array_filter_type": "any_of"
                        }
                    ]
                },
                "filter_type": "actions"
            }
        ],
        "filter_operator": "or"
    }
}

const trackingData = {
  campaignId: fullCampaignData.campaignId,
  campaignName: fullCampaignData.campaignName,
  context: fullCampaignData.context // Pass the context object exactly as received.
};

// Register the callback function to listen for campaigns.
Moengage.onsite.getSelfHandledOSM(function(fullCampaignData) {
  
  console.log("Full campaign data received:", fullCampaignData);
  var firstCampaignData = fullCampaignData[0];
  // Construct the specific object required for tracking events.
  const trackingData = {
    campaignId: firstCampaignData.campaignId,
    campaignName: firstCampaignData.campaignName,
    context: firstCampaignData.context
  };
  
  // --- Example Tracking Calls ---
  
  // Call this once your custom UI is rendered and visible.
  Moengage.onsite.selfHandledShown(trackingData);

  // In your button's click handler, call this.
  // myButton.addEventListener('click', () => {
  //   Moengage.onsite.selfHandledClicked(trackingData);
  // });
  
  // In your dismiss element's click handler, call this.
  // myDismissButton.addEventListener('click', () => {
  //   Moengage.onsite.selfHandledDismissed(trackingData);
  // });
});