APIs & Integrations

ckingg
参加者

Custom Event Triggering with modules that run the same JS

This is sort of tought to explain. I've created a custom event that I'd like to trigger when a user completes a purchase on our site. 

This is the code that I'm using to track the purchase via HubSpot: 

 

ckingg_0-1620781989525.png

 

I've inserted this at the end of the code below to trigger the event when the purchase is complete. You can see the placement of the code at the very bottom of the snippet I've pasted.

 

We use Paddle as our payment processor. Two of our modules have the same Paddle code that is required to send Google Analytics data, etc. from user purchase behavior. The code is the following: 

 

Paddle.Setup({ 
  vendor: 4984326,
  completeDetails: true,
        eventCallback: function( f ) {
        //Payment succeeds - Checkout.PaymentComplete
          if ( 'Checkout.PaymentComplete' == f.event ) {
            dataLayer.push({
              'event': 'purchase',
              'ecommerce': {
                'currencyCode': f.eventData.checkout.prices.customer.currency, 
                'purchase': {
                  'actionField': {
                    'id': f.eventData.checkout.id,
                    'revenue': f.eventData.checkout.prices.customer.total, 
                    'tax': f.eventData.checkout.prices.customer.total_tax, 
                    'coupon': f.eventData.checkout.coupon.coupon_code
                  },
                  'products': [{
                    'name': f.eventData.product.name,
                    'id': f.eventData.product.id,
                    'quantity': f.eventData.product.quantity,
                    'price': f.eventData.checkout.prices.customer.total, 
                  }] 
                }
              }
            });
            //Track product 1 purchases in HubSpot
             _hsq.push(["trackEvent", {
                id: '000012067935',
            }]);
            //End track HubSpot purchase
           
          }
        } 
});

 

 

The problem

This Paddle JS is used on two modules that are implemented on individual pages and together on our main store page, when they are on the same page and when I add the event tracking code to both modules, only one of the events are triggered. One module is for one product, the other module is for the other product. 

I'm trying to figure out how I can have both of these event tracking pieces of code within the Paddle code and have them work independently. 

Any ideas? 

0 いいね!
2件の返信
WendyGoh
HubSpot Employee
HubSpot Employee

Custom Event Triggering with modules that run the same JS

Hey @ckingg , 

 

I'd be happy to help provide some insights!

 

I was wondering if you can try shifting the following codes

 _hsq.push(["trackEvent", {
                id: '000012067935',
            }]);

  

to be within the 2 modules? I'm guessing that the two moduels are purchase and products? 

 

If so, can you add the event tracking code twice - one on each module? 

0 いいね!
ckingg
参加者

Custom Event Triggering with modules that run the same JS

Hey @WendyGoh, thanks for the reply. 

 

These two modules are basically "stores" for two different prodocuts. You click a button that opens a modal that lets you select what operating system you'd like to purchase the software for. You can see it in action here: https://store.airsquirrels.com/


One module is for AirParrot and the other is for Reflector. 

 

I'm trying to give Reflector and AirParrot a tracking code. So when someone successfully purhases AirParrot, it's tracked. Same for Refletor. 

I made an event for the Reflector and AirParrot modules and put the event handler in each module like I showed in the code above. 

 

The issue is that whatever module is placed second in the page editor, its event handler gets ignored. I think the browser is ignoring the second module because it's running the script in the first moduel that does essentially the same thing, but the even hendler code is different and I need it read both event handlers. 

0 いいね!