@mparticle/web-braze-kit 3.0.1 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,29 +1,29 @@
1
1
  ![Braze Logo](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy/blob/master/braze-logo.png)
2
2
 
3
3
  ⚠️⚠️⚠️
4
- # Notice! Timeline for Breaking Changes for mParticle Web Braze Kit- 3/28/2022 - 6/8/2022
4
+ # Notice! Timeline for Breaking Changes for mParticle Web Braze Kit- 3/28/2022 - 6/14/2022
5
5
  This repository renames and replaces our [mParticle Appboy Web Kit](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy), which will be archived in the future.
6
6
 
7
- Braze has breaking changes between version 2.5.2 and 3.5.0 of their SDK. As a result, we too are updating our [mParticle Braze web kit](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy) to support Braze’s Web SDK version 3.5.0. The updated mParticle Braze Web kit will be available via CDN on June 8, 2022 and is currently available on NPM as [@mparticle/web-braze-kit](https://www.npmjs.com/package/@mparticle/web-braze-kit) v3.0.0.
7
+ Braze has breaking changes between version 2.5.2 and 3.5.0 of their SDK. As a result, we too are updating our [mParticle Braze web kit](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy) to support Braze’s Web SDK version 3.5.0. The updated mParticle Braze Web kit will be available via CDN on June 14, 2022 and is currently available on NPM as [@mparticle/web-braze-kit](https://www.npmjs.com/package/@mparticle/web-braze-kit) v3.0.1.
8
8
 
9
9
  **How do you know if your code is affected?**
10
10
 
11
- You may notice errors on your site if you load mParticle [via snippet](https://docs.mparticle.com/developers/sdk/web/getting-started/#add-the-sdk-snippet) (as most of our clients do), and you reference any deprecated Braze APIs starting 6/8/2022.
11
+ You may notice errors on your site if you load mParticle [via snippet](https://docs.mparticle.com/developers/sdk/web/getting-started/#add-the-sdk-snippet) (as most of our clients do), and you reference any deprecated Braze APIs starting 6/14/2022.
12
12
 
13
13
  We highly recommend that you review the changes between version 2 and 3 of the Braze Web SDK to understand these changes, which can be found [here](https://www.braze.com/docs/developer_guide/platform_integration_guides/web/changelog/#300). To summarize:
14
14
  * The `appboy.ab` namespace has been removed and everything lives under the `appboy` namespace now.
15
15
  * `InAppMessage.Button` has been renamed to `InAppMessageButton`
16
16
 
17
- If you reference any of the above deprecations, you will have to makes changes to your codebase before June 8, 2022 to be compatible with both version 2 and version 3 of the Braze SDK to ensure your code continues to work. We recommend a 3 step approach. Here are some code samples of what this code could look like today (step 1), preparing for the update (step 2) and after the change is live (step 3).
17
+ If you reference any of the above deprecations, you will have to makes changes to your codebase before June 14, 2022 to be compatible with both version 2 and version 3 of the Braze SDK to ensure your code continues to work. We recommend a 3 step approach. Here are some code samples of what this code could look like today (step 1), preparing for the update (step 2) and after the change is live (step 3).
18
18
 
19
- The below recommendations apply only to customers who load mParticle [via snippet](https://docs.mparticle.com/developers/sdk/web/getting-started/#add-the-sdk-snippet). Customers who [self host via NPM](https://docs.mparticle.com/developers/sdk/web/self-hosting/) can ignore step 1 and jump straight to step 3 after updating their mParticle Braze kit to v3.0.0.
19
+ The below recommendations apply only to customers who load mParticle [via snippet](https://docs.mparticle.com/developers/sdk/web/getting-started/#add-the-sdk-snippet). Customers who [self host via NPM](https://docs.mparticle.com/developers/sdk/web/self-hosting/) can ignore step 1 and jump straight to step 3 after updating their mParticle Braze kit to v3.0.1.
20
20
 
21
21
  Step 1: Legacy code sample. If your code references the `ab` namespace (like below) or `InAppMessage.Button`, you should change it following Step 2’s example:
22
22
  ```javascript
23
23
  let banner = new appboy.ab.Banner(‘test’);
24
24
  ```
25
25
 
26
- Step 2: Rollout code sample to be used before June 8, 2022:
26
+ Step 2: Rollout code sample to be used before June 14, 2022:
27
27
  ```javascript
28
28
  let banner;
29
29
  if (appboy.hasOwnProperty(‘ab’)) {
@@ -32,7 +32,7 @@ if (appboy.hasOwnProperty(‘ab’)) {
32
32
  banner = new appboy.Banner(‘test’);
33
33
  }
34
34
  ```
35
- Step 3: After June 8, 2022, you can simplify your code to the following once the mParticle Braze Web kit has been released to our CDN:
35
+ Step 3: After June 14, 2022, you can simplify your code to the following once the mParticle Braze Web kit has been released to our CDN:
36
36
  ```javascript
37
37
  let banner = new appboy.Banner(‘test’);
38
38
  ```
@@ -305,7 +305,7 @@ window.appboy = appboy_min;
305
305
 
306
306
  var name = 'Appboy',
307
307
  moduleId = 28,
308
- version = '3.0.1',
308
+ version = '3.0.4',
309
309
  MessageType = {
310
310
  PageView: 3,
311
311
  PageEvent: 4,
@@ -324,7 +324,7 @@ var clusterMapping = {
324
324
  EU02: 'sdk.fra-02.braze.eu',
325
325
  };
326
326
 
327
- var constructor = function() {
327
+ var constructor = function () {
328
328
  var self = this,
329
329
  forwarderSettings,
330
330
  options = {},
@@ -358,7 +358,7 @@ var constructor = function() {
358
358
  function logPurchaseEvent(event) {
359
359
  var reportEvent = false;
360
360
  if (event.ProductAction.ProductList) {
361
- event.ProductAction.ProductList.forEach(function(product) {
361
+ event.ProductAction.ProductList.forEach(function (product) {
362
362
  if (product.Attributes == null) {
363
363
  product.Attributes = {};
364
364
  }
@@ -375,9 +375,12 @@ var constructor = function() {
375
375
  );
376
376
  }
377
377
 
378
- var sanitizedProperties = getSanitizedCustomProperties(
379
- product.Attributes
380
- );
378
+ var productAttributes = mergeObjects(product.Attributes, {
379
+ 'Transaction Id': event.ProductAction.TransactionId,
380
+ });
381
+
382
+ var sanitizedProperties =
383
+ getSanitizedCustomProperties(productAttributes);
381
384
 
382
385
  if (sanitizedProperties == null) {
383
386
  return (
@@ -385,10 +388,20 @@ var constructor = function() {
385
388
  sanitizedProductName
386
389
  );
387
390
  }
391
+ var price = parseFloat(product.Price);
392
+
393
+ kitLogger(
394
+ 'appboy.logPurchase',
395
+ sanitizedProductName,
396
+ price,
397
+ event.CurrencyCode,
398
+ product.Quantity,
399
+ sanitizedProperties
400
+ );
388
401
 
389
402
  reportEvent = appboy.logPurchase(
390
403
  sanitizedProductName,
391
- parseFloat(product.Price),
404
+ price,
392
405
  event.CurrencyCode,
393
406
  product.Quantity,
394
407
  sanitizedProperties
@@ -414,6 +427,9 @@ var constructor = function() {
414
427
  }
415
428
  sanitizedEventName = getSanitizedValueForAppboy(eventName);
416
429
  sanitizedAttrs = getSanitizedCustomProperties(attrs);
430
+
431
+ kitLogger('appboy.logCustomEvent', sanitizedEventName, sanitizedAttrs);
432
+
417
433
  var reportEvent = appboy.logCustomEvent(
418
434
  sanitizedEventName,
419
435
  sanitizedAttrs
@@ -430,6 +446,13 @@ var constructor = function() {
430
446
  ", removeUserAttribute or setUserAttribute must set 'dob' to a date"
431
447
  );
432
448
  } else {
449
+ kitLogger(
450
+ 'appoy.getUser().setDateOfBirth',
451
+ value.getFullYear(),
452
+ value.getMonth() + 1,
453
+ value.getDate()
454
+ );
455
+
433
456
  appboy
434
457
  .getUser()
435
458
  .setDateOfBirth(
@@ -441,6 +464,9 @@ var constructor = function() {
441
464
  } else if (key === '$Age') {
442
465
  if (typeof value === 'number') {
443
466
  var year = new Date().getFullYear() - value;
467
+
468
+ kitLogger('appboy.getUser().setDateOfBirth', year, 1, 1);
469
+
444
470
  appboy.getUser().setDateOfBirth(year, 1, 1);
445
471
  } else {
446
472
  return '$Age must be a number';
@@ -458,6 +484,12 @@ var constructor = function() {
458
484
  }
459
485
  var params = [];
460
486
  params.push(value);
487
+
488
+ kitLogger(
489
+ 'appboy.getUser().' + DefaultAttributeMethods[key],
490
+ params
491
+ );
492
+
461
493
  var u = appboy.getUser();
462
494
  //This method uses the setLastName, setFirstName, setEmail, setCountry, setHomeCity, setPhoneNumber, setAvatarImageUrl, setDateOfBirth, setGender, setEmailNotificationSubscriptionType, and setPushNotificationSubscriptionType methods
463
495
  if (!u[DefaultAttributeMethods[key]].apply(u, params)) {
@@ -482,10 +514,17 @@ var constructor = function() {
482
514
  );
483
515
  }
484
516
 
517
+ kitLogger(
518
+ 'appboy.logCustomEvent',
519
+ sanitizedEventName,
520
+ sanitizedProperties
521
+ );
522
+
485
523
  var reportEvent = appboy.logCustomEvent(
486
524
  sanitizedEventName,
487
525
  sanitizedProperties
488
526
  );
527
+
489
528
  return reportEvent === true;
490
529
  }
491
530
 
@@ -501,9 +540,8 @@ var constructor = function() {
501
540
  ) {
502
541
  reportEvent = logPurchaseEvent(event);
503
542
  } else if (event.EventDataType == MessageType.Commerce) {
504
- var listOfPageEvents = mParticle.eCommerce.expandCommerceEvent(
505
- event
506
- );
543
+ var listOfPageEvents =
544
+ mParticle.eCommerce.expandCommerceEvent(event);
507
545
  if (listOfPageEvents != null) {
508
546
  for (var i = 0; i < listOfPageEvents.length; i++) {
509
547
  // finalLoopResult keeps track of if any logAppBoyEvent in this loop returns true or not
@@ -541,6 +579,13 @@ var constructor = function() {
541
579
  function removeUserAttribute(key) {
542
580
  if (!(key in DefaultAttributeMethods)) {
543
581
  var sanitizedKey = getSanitizedValueForAppboy(key);
582
+
583
+ kitLogger(
584
+ 'appboy.getUser().setCustomUserAttribute',
585
+ sanitizedKey,
586
+ null
587
+ );
588
+
544
589
  appboy.getUser().setCustomUserAttribute(sanitizedKey, null);
545
590
  } else {
546
591
  return setDefaultAttribute(key, null);
@@ -554,6 +599,13 @@ var constructor = function() {
554
599
  if (value != null && sanitizedValue == null) {
555
600
  return 'Value did not pass validation for ' + key;
556
601
  }
602
+
603
+ kitLogger(
604
+ 'appboy.getUser().setCustomUserAttribute',
605
+ sanitizedKey,
606
+ sanitizedValue
607
+ );
608
+
557
609
  appboy
558
610
  .getUser()
559
611
  .setCustomUserAttribute(sanitizedKey, sanitizedValue);
@@ -567,8 +619,12 @@ var constructor = function() {
567
619
  // Other versions use onUserIdentified, which is called after setUserIdentity from core SDK
568
620
  if (window.mParticle.getVersion().split('.')[0] === '1') {
569
621
  if (type == window.mParticle.IdentityType.CustomerId) {
622
+ kitLogger('appboy.changeUser', id);
623
+
570
624
  appboy.changeUser(id);
571
625
  } else if (type == window.mParticle.IdentityType.Email) {
626
+ kitLogger('appboy.getUser().setEmail', id);
627
+
572
628
  appboy.getUser().setEmail(id);
573
629
  } else {
574
630
  return (
@@ -594,26 +650,31 @@ var constructor = function() {
594
650
  ];
595
651
  }
596
652
 
653
+ kitLogger('appboy.changeUser', appboyUserIDType);
654
+
597
655
  appboy.changeUser(appboyUserIDType);
598
656
 
599
657
  if (userIdentities.email) {
658
+ kitLogger('appboy.getUser().setEmail', userIdentities.email);
659
+
600
660
  appboy.getUser().setEmail(userIdentities.email);
601
661
  }
602
662
  }
603
663
 
604
664
  function primeAppBoyWebPush() {
605
- // The following code block is Braze's best practice for implementing
606
- // their push primer. It should not be changed unless Braze updates it
665
+ // The following code block is based on Braze's best practice for implementing
666
+ // their push primer. We only modify it to include pushPrimer and register_inapp settings.
607
667
  // https://www.braze.com/docs/developer_guide/platform_integration_guides/web/push_notifications/integration/#soft-push-prompts
608
- appboy.subscribeToInAppMessage(function(inAppMessage) {
668
+ appboy.subscribeToInAppMessage(function (inAppMessage) {
609
669
  var shouldDisplay = true;
610
-
670
+ var pushPrimer = false;
611
671
  if (inAppMessage instanceof appboy.InAppMessage) {
612
672
  // Read the key-value pair for msg-id
613
673
  var msgId = inAppMessage.extras['msg-id'];
614
674
 
615
675
  // If this is our push primer message
616
676
  if (msgId == 'push-primer') {
677
+ pushPrimer = true;
617
678
  // We don't want to display the soft push prompt to users on browsers that don't support push, or if the user
618
679
  // has already granted/blocked permission
619
680
  if (
@@ -626,7 +687,7 @@ var constructor = function() {
626
687
  if (inAppMessage.buttons[0] != null) {
627
688
  // Prompt the user when the first button is clicked
628
689
  inAppMessage.buttons[0].subscribeToClickedEvent(
629
- function() {
690
+ function () {
630
691
  appboy.registerAppboyPushMessages();
631
692
  }
632
693
  );
@@ -634,8 +695,11 @@ var constructor = function() {
634
695
  }
635
696
  }
636
697
 
637
- // Display the message
638
- if (shouldDisplay) {
698
+ // Display the message if it's a push primer message and shouldDisplay is true
699
+ if (
700
+ (pushPrimer && shouldDisplay) ||
701
+ (!pushPrimer && forwarderSettings.register_inapp === 'True')
702
+ ) {
639
703
  appboy.display.showInAppMessage(inAppMessage);
640
704
  }
641
705
  });
@@ -644,11 +708,33 @@ var constructor = function() {
644
708
  function openSession(forwarderSettings) {
645
709
  appboy.openSession();
646
710
  if (forwarderSettings.softPushCustomEventName) {
711
+ kitLogger(
712
+ 'appboy.logCustomEvent',
713
+ forwarderSettings.softPushCustomEventName
714
+ );
715
+
647
716
  appboy.logCustomEvent(forwarderSettings.softPushCustomEventName);
648
717
  }
649
718
  }
650
719
 
651
- function initForwarder(settings, service, testMode, trackerId, userAttributes, userIdentities, appVersion, appName, customFlags) {
720
+ function initForwarder(
721
+ settings,
722
+ service,
723
+ testMode,
724
+ trackerId,
725
+ userAttributes,
726
+ userIdentities,
727
+ appVersion,
728
+ appName,
729
+ customFlags
730
+ ) {
731
+ // check to see if there is a logger for backwards compatibility, and if not, mock one to avoid errors
732
+ if (!self.logger) {
733
+ // create a logger
734
+ self.logger = {
735
+ verbose: function () {},
736
+ };
737
+ }
652
738
  // eslint-disable-line no-unused-vars
653
739
  mpCustomFlags = customFlags;
654
740
  try {
@@ -685,14 +771,14 @@ var constructor = function() {
685
771
  options.baseUrl = customUrl;
686
772
  }
687
773
  }
688
-
774
+
689
775
  if (mpCustomFlags && mpCustomFlags[moduleId.toString()]) {
690
776
  var brazeFlags = mpCustomFlags[moduleId.toString()];
691
777
  if (typeof brazeFlags.initOptions === 'function') {
692
778
  brazeFlags.initOptions(options);
693
779
  }
694
780
  }
695
-
781
+
696
782
  if (testMode !== true) {
697
783
  appboy.initialize(forwarderSettings.apiKey, options);
698
784
  finishAppboyInitialization(forwarderSettings);
@@ -801,6 +887,35 @@ var constructor = function() {
801
887
  this.onUserIdentified = onUserIdentified;
802
888
  this.removeUserAttribute = removeUserAttribute;
803
889
  this.decodeClusterSetting = decodeClusterSetting;
890
+
891
+ /* An example output of this logger if we pass in a purchase event for 1 iPhone
892
+ with a SKU of iphoneSku that cost $999 with a product attribute of
893
+ color: blue would be:
894
+ mParticle - Braze Web Kit log:
895
+ appboy.logPurchase:
896
+ iphone,
897
+ 999,
898
+ USD,
899
+ 1,
900
+ {\"color\":\"blue\",\"Sku":"iphoneSKU"},\n`;
901
+ */
902
+ function kitLogger(method) {
903
+ var msg = 'mParticle - Braze Web Kit log:';
904
+
905
+ var nonMethodArguments = Array.prototype.slice.call(arguments, 1);
906
+ msg += '\n' + method + ':\n';
907
+
908
+ nonMethodArguments.forEach(function (arg) {
909
+ if (isObject(arg) || Array.isArray(arg)) {
910
+ msg += JSON.stringify(arg);
911
+ } else {
912
+ msg += arg;
913
+ }
914
+ msg += ',\n';
915
+ });
916
+
917
+ self.logger.verbose(msg);
918
+ }
804
919
  };
805
920
 
806
921
  function getId() {
@@ -845,6 +960,18 @@ if (window && window.mParticle && window.mParticle.addForwarder) {
845
960
  });
846
961
  }
847
962
 
963
+ function mergeObjects() {
964
+ var resObj = {};
965
+ for (var i = 0; i < arguments.length; i += 1) {
966
+ var obj = arguments[i],
967
+ keys = Object.keys(obj);
968
+ for (var j = 0; j < keys.length; j += 1) {
969
+ resObj[keys[j]] = obj[keys[j]];
970
+ }
971
+ }
972
+ return resObj;
973
+ }
974
+
848
975
  function isObject(val) {
849
976
  return (
850
977
  val != null && typeof val === 'object' && Array.isArray(val) === false
@@ -853,7 +980,7 @@ function isObject(val) {
853
980
 
854
981
  var BrazeKitDev = {
855
982
  register: register,
856
- getVersion: function() {
983
+ getVersion: function () {
857
984
  return version;
858
985
  },
859
986
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mparticle/web-braze-kit",
3
- "version": "3.0.1",
3
+ "version": "3.0.4",
4
4
  "author": "mParticle Developers <developers@mparticle.com> (https://www.mparticle.com)",
5
5
  "description": "mParticle integration sdk for Braze",
6
6
  "main": "dist/BrazeKit.common.js",
@@ -31,7 +31,7 @@
31
31
  },
32
32
  "dependencies": {
33
33
  "@braze/web-sdk": "^3.5.0",
34
- "@mparticle/web-sdk": "^2.11.3"
34
+ "@mparticle/web-sdk": "^2.17.0"
35
35
  },
36
36
  "license": "Apache-2.0"
37
37
  }
package/CHANGELOG.md DELETED
@@ -1,42 +0,0 @@
1
- ## Releases
2
-
3
- --
4
-
5
- #### 3.0.1 - 2022-05-18
6
-
7
- - consume initOptions customFlags - this allows a customer to pass a callback to include additional options that mParticle doesn't support in the UI
8
-
9
- #### 3.0.0 - 2022-03-28
10
-
11
- ⚠️ **Breaking** - If you reference any of the below deprecations and implement mParticle via snippet, you will have to make changes to your codebase before June 8, 2022 to be compatible with both version 2 and version 3 of the Braze SDK to ensure your code continues to work.
12
- * Our partner, Braze, has made a few significant changes to their web SDK. As a result, we are also updating our mParticle Braze web kit to support Braze’s Web SDK version 3.5.0, which includes breaking changes to the Braze SDK behavior. The updated mParticle Braze Web kit will be available via CDN on June 8, 2022 and is currently available on NPM at @mparticle/web-braze-kit v3.0.0. Also note that we have updated the name of our npm package from @mparticle/web-appboy-kit to @mparticle/web-braze-kit.
13
- * We highly recommend that you review the changes between version 2 and 3 of the Braze Web SDK to understand these changes, which can be found here. To summarize:
14
- * The `appboy.ab` namespace has been removed and everything lives under the `appboy` namespace now.
15
- * `InAppMessage.Button` has been renamed to `InAppMessageButton`
16
- * Full details can be found in the README at our [AppBoy Repo](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy#readme).
17
-
18
- #### 2.0.7 - 2022-02-09
19
-
20
- - Feat - add new Braze clusters
21
-
22
- #### 2.0.6 - 2020-12-10
23
-
24
- - Feat - Add additional Braze clusters to URL mapping table
25
-
26
- #### 2.0.5 - 2020-06-04
27
-
28
- - Update Braze to 2.5.2
29
-
30
- #### 2.0.4 - 2020-02-12
31
-
32
- - Send SKU if forwardSkuAsProductName is set
33
-
34
- #### 2.0.2 - 2020-01-23
35
-
36
- - Feat - Set event name sent to Braze as user provided pageName
37
-
38
- #### 2.0.1 - 2019-12-03
39
-
40
- - Bugfix - Respect userId choice in mParticle UI dropdown
41
- - Add version number
42
- - Remove isObject dependency