Method getUnviewedCardCount() return wrong type

[itstueben]

• [x] I have checked Braze's documentation and am still experiencing the issue.

Report

The SDK is looad through our google tag manager. All the functionally is fine.

Info	Value
SDK Version	3.3.0 and 3.2.0
Browser Affected	all
Affected Browser Version	any

Operating System Affected any Integration Method | Google Tag Manager Repro rate | All the time (100%)

What did you do?

I want to use the contentCards.getUnviewedCardCount() Method to indicate how many unread messages are currently have.

const contentCards = appboy.getCachedContentCards();
console.log('unviewd count', contentCards.getUnviewedCardCount());
--> true

What did you expect to happen?

I expected that the method return an number value instead of an boolean.

What happened instead?

It returns an boolean value on cachedContentCards. If i use the "appboy.subscribeToContentCardsUpdates" subscription the method will return a right value (number).

Steps to reproduce

Use your appboy

Code Snippet

const contentCards = appboy.getCachedContentCards();
console.log('unviewd count', contentCards.getUnviewedCardCount());
--> true

appboy.subscribeToContentCardsUpdates((cards) => {
  console.log('unviewd count', cards.getUnviewedCardCount());
});
--> 1

Are you doing any feature customizations that may relate to the issue? Can you share the code snippet?

Nope

Project that demonstrates the issue

Nope

I already requested that issue to your support site but i dont get any infos on updates or ticket number or any indicator. I also informed our braze contact person.

[wesleyorbin]

Hi @itstueben! I'm sorry you're having this issue. This sounds to me like the getCachedContentCards call is running before the SDK script has been loaded. Can you provide more details on your integration? Are you using our Google Tag Manager template or do you have a custom HTML tag?

[itstueben]

// taken from https://github.com/Appboy/appboy-web-sdk#alternative-google-tag-manager-installation

I think your right. If im using the npm package i get the right number on "getCachedContentCards". But what can i do to get the right value from "getCachedContentCards" with GTM?

function() {
  return function(){
    var initialized = !!window.appboy;
    if(initialized) {
      return;
    }

    var debug = {{getDebug}}("Braze:Tag");
    debug("initializing");

    // taken from https://github.com/Appboy/appboy-web-sdk#alternative-google-tag-manager-installation
    +function(a,p,P,b,y){a.appboy = {};a.appboyQueue = [];var s = ["DeviceProperties", "Card", "Card.prototype.dismissCard", "Card.prototype.removeAllSubscriptions", "Card.prototype.removeSubscription", "Card.prototype.subscribeToClickedEvent", "Card.prototype.subscribeToDismissedEvent", "Banner", "CaptionedImage", "ClassicCard", "ControlCard", "ContentCards", "ContentCards.prototype.getUnviewedCardCount", "Feed", "Feed.prototype.getUnreadCardCount", "ControlMessage", "InAppMessage", "InAppMessage.SlideFrom", "InAppMessage.ClickAction", "InAppMessage.DismissType", "InAppMessage.OpenTarget", "InAppMessage.ImageStyle", "InAppMessage.Orientation", "InAppMessage.TextAlignment", "InAppMessage.CropType", "InAppMessage.prototype.closeMessage", "InAppMessage.prototype.removeAllSubscriptions", "InAppMessage.prototype.removeSubscription", "InAppMessage.prototype.subscribeToClickedEvent", "InAppMessage.prototype.subscribeToDismissedEvent", "FullScreenMessage", "ModalMessage", "HtmlMessage", "SlideUpMessage", "User", "User.Genders", "User.NotificationSubscriptionTypes", "User.prototype.addAlias", "User.prototype.addToCustomAttributeArray", "User.prototype.getUserId", "User.prototype.incrementCustomUserAttribute", "User.prototype.removeFromCustomAttributeArray", "User.prototype.setAvatarImageUrl", "User.prototype.setCountry", "User.prototype.setCustomLocationAttribute", "User.prototype.setCustomUserAttribute", "User.prototype.setDateOfBirth", "User.prototype.setEmail", "User.prototype.setEmailNotificationSubscriptionType", "User.prototype.setFirstName", "User.prototype.setGender", "User.prototype.setHomeCity", "User.prototype.setLanguage", "User.prototype.setLastKnownLocation", "User.prototype.setLastName", "User.prototype.setPhoneNumber", "User.prototype.setPushNotificationSubscriptionType", "InAppMessageButton", "InAppMessageButton.prototype.removeAllSubscriptions", "InAppMessageButton.prototype.removeSubscription", "InAppMessageButton.prototype.subscribeToClickedEvent", "display", "display.automaticallyShowNewInAppMessages", "display.destroyFeed", "display.hideContentCards", "display.showContentCards", "display.showFeed", "display.showInAppMessage", "display.toggleContentCards", "display.toggleFeed", "changeUser", "destroy", "getDeviceId", "initialize", "isPushBlocked", "isPushGranted", "isPushPermissionGranted", "isPushSupported", "logCardClick", "logCardDismissal", "logCardImpressions", "logContentCardsDisplayed", "logCustomEvent", "logFeedDisplayed", "logInAppMessageButtonClick", "logInAppMessageClick", "logInAppMessageHtmlClick", "logInAppMessageImpression", "logPurchase", "openSession", "registerAppboyPushMessages", "removeAllSubscriptions", "removeSubscription", "requestContentCardsRefresh", "requestFeedRefresh", "requestImmediateDataFlush", "resumeWebTracking", "setLogger", "stopWebTracking", "subscribeToContentCardsUpdates", "subscribeToFeedUpdates", "subscribeToInAppMessage", "subscribeToNewInAppMessages", "toggleAppboyLogging", "trackLocation", "unregisterAppboyPushMessages", "wipeData"];for (var i = 0; i < s.length; i++) {  var m = s[i];  var k = a.appboy;  var l = m.split(".");  for (var j = 0; j < l.length - 1; j++) {    k = k[l[j]];  }  k[l[j]] = new Function("return function " + m.replace(/\./g, "_") + "(){window.appboyQueue.push(arguments); return true}")();}window.appboy.getCachedContentCards = function() { return new window.appboy.ContentCards(); };window.appboy.getCachedFeed = function() { return new window.appboy.Feed(); };window.appboy.getUser = function() { return new window.appboy.User(); };(y=p.createElement(P)).type='text/javascript';
      y.src='https://js.appboycdn.com/web-sdk/3.3/appboy.min.js';
      y.async=1;(b=p.getElementsByTagName(P)[0]).parentNode.insertBefore(y,b)
    }(window,document,'script');

    var brazeSdk = window.appboy;

    var logger = {{getDebug}}("Braze:SDK");
    brazeSdk.setLogger(logger);

    brazeSdk.initialize({{brazeApiKey}}, { 
      baseUrl: 'sdk.fra-01.braze.eu', 
      enableLogging: true 
    });
    brazeSdk.display.automaticallyShowNewInAppMessages();

    var ppId = context('account.profile.id');
    if(ppId) {
      debug("updating externalId to " + ppId);
      brazeSdk.changeUser(ppId);
    }

    brazeSdk.openSession();

  }
}

[wesleyorbin]

There are a few options. The easiest solution would be to add an onload function to the loading snippet below the y.src line like so:

y.onload = function() {
  const contentCards = appboy.getCachedContentCards();
  console.log('unviewed count', contentCards.getUnviewedCardCount());
}

We also have an initialization GTM tag template that will load the Braze SDK for you. You could then have your getUnviewedCardCount() tag fire after the initialization tag is completed.

[wesleyorbin]

I'm closing out this issue due to inactivity. Feel free to reopen or contact our support channels if you still have concerns. Thanks!