@uappi/public-sdk 1.19.0 → 1.20.0

package/components/PaymentHosted/PaymentHosted.vue

@@ -133,10 +133,10 @@ function handleIframeMessage(event: MessageEvent): void {
     case 'UAPPI_PAYMENT_SUCCESS':
       if (cartSnapshot.value) {
         purchaseAction(props.option.paymentType.code, cartSnapshot.value);
+        facebookPurchaseAction(data.id, cartSnapshot.value);
       } else {
         console.error('[PaymentHosted] Carrinho indisponível: evento de tracking de compra (purchase) não foi disparado.');
       }
-      facebookPurchaseAction(data.id);
       emit('payment-success', data);
       break;
 

package/modules/Api/index.ts

@@ -96,7 +96,7 @@ import {
   facebookAddPaymentInfo,
   facebookSearch,
   facebookPurchase,
-} from './endpoints/ThirdPartyComposable';
+} from '../Tracking/facebook/requests/ThirdPartyComposable';
 
 import { sendMfa, confirmMfa, loginMfa, deleteMFA, mfaSetup } from './endpoints/MFAComposable';
 

package/modules/Tracking/facebook/events/actions/addPaymentInfo.ts

@@ -1,14 +1,21 @@
 import api from '../../../../Api';
 import { totalValue } from '../../../utils/cart';
+import { pushFbq } from '../../../utils/pushFbq';
 
 import type { CartResponse } from '../../../../Api/types';
 
-export function addPaymentInfoAction(
-  cartPayload: CartResponse
-) {
+export function addPaymentInfoAction(cartPayload: CartResponse) {
+  const value = totalValue(cartPayload);
+
   api.thirdParty
-    .facebookAddPaymentInfo({
-      totalValue: totalValue(cartPayload),
-    })
+    .facebookAddPaymentInfo({ totalValue: value })
+    .then(eventId =>
+      pushFbq(
+        'track',
+        'AddPaymentInfo',
+        { value, currency: 'BRL' },
+        { eventID: eventId },
+      ),
+    )
     .catch(() => {});
 }

package/modules/Tracking/facebook/events/actions/addToCart.ts

@@ -1,22 +1,38 @@
 import api from '../../../../Api';
 import { getAddedCartItems } from '../../../utils/cart';
+import { pushFbq } from '../../../utils/pushFbq';
 
 import type { UpsertTrackingCartRequest } from '../../../types';
 import type { CartResponse } from '../../../../Api/types';
 
 export function addToCartAction(
   cartPayload: CartResponse,
-  upsertPayload?: UpsertTrackingCartRequest
+  upsertPayload?: UpsertTrackingCartRequest,
 ) {
   getAddedCartItems(cartPayload, upsertPayload).forEach(item => {
+    const quantity = item.oldQuantity
+      ? item.quantity - item.oldQuantity
+      : item.quantity;
+
     api.thirdParty
       .facebookAddToCart({
         sku: item.product.sku,
-        quantity: item.oldQuantity
-          ? item.quantity - item.oldQuantity
-          : item.quantity,
+        quantity,
         price: item.unitValue,
       })
+      .then(eventId =>
+        pushFbq(
+          'track',
+          'AddToCart',
+          {
+            content_ids: [item.product.sku],
+            content_type: 'product',
+            value: item.unitValue * quantity,
+            currency: 'BRL',
+          },
+          { eventID: eventId },
+        ),
+      )
       .catch(() => {});
   });
 }

package/modules/Tracking/facebook/events/actions/initiateCheckout.ts

@@ -1,7 +1,21 @@
 import api from '../../../../Api';
+import { totalValue } from '../../../utils/cart';
+import { pushFbq } from '../../../utils/pushFbq';
+
+import type { CartResponse } from '../../../../Api/types';
+
+export function initiateCheckoutAction(cartPayload: CartResponse) {
+  const value = totalValue(cartPayload);
 
-export function initiateCheckoutAction() {
   api.thirdParty
     .facebookInitiateCheckout()
+    .then(eventId =>
+      pushFbq(
+        'track',
+        'InitiateCheckout',
+        { value, currency: 'BRL' },
+        { eventID: eventId },
+      ),
+    )
     .catch(() => {});
 }

package/modules/Tracking/facebook/events/actions/purchase.ts

@@ -1,5 +1,21 @@
 import api from '../../../../Api';
+import { totalValue } from '../../../utils/cart';
+import { pushFbq } from '../../../utils/pushFbq';
 
-export function purchaseAction(orderGroupId: number) {
-  api.thirdParty.facebookPurchase({ orderGroupId }).catch(() => {});
+import type { CartResponse } from '../../../../Api/types';
+
+export function purchaseAction(orderGroupId: number, cartPayload: CartResponse) {
+  const value = totalValue(cartPayload);
+
+  api.thirdParty
+    .facebookPurchase({ orderGroupId })
+    .then(eventId =>
+      pushFbq(
+        'track',
+        'Purchase',
+        { value, currency: 'BRL' },
+        { eventID: eventId },
+      ),
+    )
+    .catch(() => {});
 }

package/modules/Tracking/facebook/events/actions/search.ts

@@ -1,10 +1,16 @@
 import api from '../../../../Api';
+import { pushFbq } from '../../../utils/pushFbq';
 
-export function searchAction(
-  searchTerm: string,
-  contentIds: Array<string>
-) {
+export function searchAction(searchTerm: string, contentIds: Array<string>) {
   api.thirdParty
-    .facebookSearch({searchTerm, contentIds })
+    .facebookSearch({ searchTerm, contentIds })
+    .then(eventId =>
+      pushFbq(
+        'track',
+        'Search',
+        { search_string: searchTerm, content_ids: contentIds },
+        { eventID: eventId },
+      ),
+    )
     .catch(() => {});
 }

package/modules/Tracking/facebook/events/views/pageView.ts

@@ -1,5 +1,9 @@
 import api from '../../../../Api';
+import { pushFbq } from '../../../utils/pushFbq';
 
 export function pageView() {
-  api.thirdParty.facebookPageView().catch(() => {});
+  api.thirdParty
+    .facebookPageView()
+    .then(eventId => pushFbq('track', 'PageView', {}, { eventID: eventId }))
+    .catch(() => {});
 }

package/modules/Tracking/facebook/events/views/viewContent.ts

@@ -1,9 +1,18 @@
 import api from '../../../../Api';
+import { pushFbq } from '../../../utils/pushFbq';
 
 import type { Product } from '../../../../Api/types';
 
 export function viewContent(product: Product) {
   api.thirdParty
     .facebookViewContent({ productId: product.id })
+    .then(eventId =>
+      pushFbq(
+        'track',
+        'ViewContent',
+        { content_ids: [`${product.id}`], content_type: 'product' },
+        { eventID: eventId },
+      ),
+    )
     .catch(() => {});
 }

package/modules/{Api/endpoints → Tracking/facebook/requests}/ThirdPartyComposable.ts

@@ -1,4 +1,4 @@
-import { usePublicApi } from '..';
+import { usePublicApi } from '../../../Api';
 
 import type {
   RedirectRequest,
@@ -8,7 +8,7 @@ import type {
   FacebookAddPaymentInfoRequest,
   FacebookSearchRequest,
   FacebookPurchaseRequest,
-} from '../types';
+} from '../../../Api/types';
 
 export function oauthRedirect(type: OauthType, payload: RedirectRequest) {
   return usePublicApi<string, RedirectRequest>({
@@ -19,14 +19,14 @@ export function oauthRedirect(type: OauthType, payload: RedirectRequest) {
 }
 
 export function facebookPageView() {
-  return usePublicApi<void>({
+  return usePublicApi<string>({
     endpoint: '/third-party/facebook/event/page-view',
     method: 'POST'
   });
 }
 
 export function facebookViewContent(payload: FacebookViewContentRequest) {
-  return usePublicApi<void, FacebookViewContentRequest>({
+  return usePublicApi<string, FacebookViewContentRequest>({
     endpoint: '/third-party/facebook/event/view-content',
     method: 'POST',
     payload,
@@ -34,7 +34,7 @@ export function facebookViewContent(payload: FacebookViewContentRequest) {
 }
 
 export function facebookAddToCart(payload: FacebookAddToCartRequest) {
-  return usePublicApi<void, FacebookAddToCartRequest>({
+  return usePublicApi<string, FacebookAddToCartRequest>({
     endpoint: '/third-party/facebook/event/add-to-cart',
     method: 'POST',
     payload,
@@ -42,14 +42,14 @@ export function facebookAddToCart(payload: FacebookAddToCartRequest) {
 }
 
 export function facebookInitiateCheckout() {
-  return usePublicApi<void>({
+  return usePublicApi<string>({
     endpoint: '/third-party/facebook/event/initiate-checkout',
     method: 'POST'
   });
 }
 
 export function facebookAddPaymentInfo(payload: FacebookAddPaymentInfoRequest) {
-  return usePublicApi<void, FacebookAddPaymentInfoRequest>({
+  return usePublicApi<string, FacebookAddPaymentInfoRequest>({
     endpoint: '/third-party/facebook/event/add-payment-info',
     method: 'POST',
     payload,
@@ -57,7 +57,7 @@ export function facebookAddPaymentInfo(payload: FacebookAddPaymentInfoRequest) {
 }
 
 export function facebookPurchase(payload: FacebookPurchaseRequest) {
-  return usePublicApi<void, FacebookPurchaseRequest>({
+  return usePublicApi<string, FacebookPurchaseRequest>({
     endpoint: '/third-party/facebook/event/purchase',
     method: 'POST',
     payload,
@@ -65,7 +65,7 @@ export function facebookPurchase(payload: FacebookPurchaseRequest) {
 }
 
 export function facebookSearch(payload: FacebookSearchRequest) {
-  return usePublicApi<void, FacebookSearchRequest>({
+  return usePublicApi<string, FacebookSearchRequest>({
     endpoint: '/third-party/facebook/event/search',
     method: 'POST',
     payload,

package/modules/Tracking/index.ts

@@ -63,7 +63,7 @@ function viewNotFound() {
 
 function beginCheckout(cartPayload: CartResponse) {
   beginCheckoutAction(cartPayload);
-  facebookInitiateCheckoutAction();
+  facebookInitiateCheckoutAction(cartPayload);
 }
 
 function addPaymentInfo(

package/modules/Tracking/publicApiTracking.ts

@@ -3,6 +3,7 @@ import usePublicApi from '../Api';
 declare global {
   interface Window {
     dataLayer: Array<Record<string, any>>;
+    fbq?: (...args: unknown[]) => void;
   }
 }
 

package/modules/Tracking/utils/pushFbq.ts

@@ -0,0 +1,5 @@
+export function pushFbq(...args: unknown[]) {
+  if (!window.fbq) return;
+
+  window.fbq(...args);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uappi/public-sdk",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Pacotes públicos para desenvolvimento do ecossistema Uappi",
   "main": "main.ts",
   "scripts": {