WooCommerce Integration

HandL UTM Grabber / Tracker WooCommerce Integration step by step

Collect UTMs in WooCommerce OrderPage

No configuration required :)

HandL UTM Grabber V3 makes UTM collection very easy in WooCommerce. There is no settings/adjustments required. Once you receive order, all the UTM variables and other custom parameters will be available in HandL UTM Grabber meta box and custom fields (see the images below).

woocommerce-custom-fields-utms4.png

Or same data can be accessible in Custom Fields: woocommerce-custom-fields-utms2.png

woocommerce-custom-fields-utms1.png

WooCommerce to Webhook/Postback/IPN

Here we explain how you can send your WooCommerce order data to external servers (as postbacks or IPN)

1. Select WooCommerce Postback From UTM menu and select custom

1-select-woocommerce-postback-from-UTM-menu-and-select-custom.png

2. Insert your postback URL

2-insert-your-post-back-url.png

3. Select when to trigger the webhook

You can trigger the webhook on the following events

payment_complete
order_status_pending
order_status_failed
order_status_on-hold
order_status_processing
order_status_completed
order_status_refunded
order_status_cancelled

3-select-when-to-trigger-webhook.png

4. Build the payload you want to send

4-build-payload.png

You can send/track/collect any WooCommerce order parameters as folows:

wc|data__status //order status
wc|data__currency //order currency
wc|data__discount_total //order total discount
wc|data__shipping_total //order total shipping
wc|data__total //order total
wc|data__total_tax //order total tax
wc|data__customer_id //order custom id
wc|data__order_key //order key
wc|data__billing__first_name //order customer first name
wc|data__billing__last_name //order customer last name
wc|data__billing__address_1 //order customer address
wc|data__billing__city //order customer city
wc|data__billing__state //order customer state
wc|data__billing__postcode //order customer postalcode
wc|data__billing__email //order customer email address
wc|data__billing__phone //order customer phone number
wc|data__payment_method //order method of payment (e.g. card, cash etc)

You can send/track/collect any WooCommerce order meta data parameters as foolows:

wc|meta__gclid
wc|meta__utm_campaign
wc|meta__utm_source
wc|meta__utm_medium
wc|meta__utm_terms
wc|meta__utm_content
wc|meta__handl_original_ref
wc|meta__handl_landing_page
wc|meta__handl_ref
wc|meta__organic_source
wc|meta__first_gclid
wc|meta__first_utm_campaign
wc|meta__first_utm_source
wc|meta__first_utm_medium
wc|meta__first_utm_terms
wc|meta__first_utm_content

You can send/track/collect any WooCommerce product data parameters as foolows:

wc|product__name
wc|product__product_id
wc|product__variation_id
wc|product__quantity
wc|product__total
wc|product__total_tax

You can get item from order too

wc|item__order_id //order_id

Send UTMs from WooCommerce to Google Analytics

Enable Ecommerce Tracking in Google Analytics

You should enable this in your Google Analytics account. Information how to do it can be found here

Configure Google Analytics Webhook in HandL UTM Grabber

We have a preloaded configuration that will allow you to send UTMs or event data to Google Analytics as soon as a status of order change in WooCommerce (payment_complete, order_status_pending, order_status_failed, order_status_on-hold, order_status_processing, order_status_completed, order_status_refunded, order_status_cancelled)

configure-woocommerce-google-analytics-webhook.png

Select WHEN to send data to Google Analytics

We recommend sending the data to Google Analytics as soon as payment complete. That's why we auto-populate that hook out of the box. You can configure the other fields the same way.

select-when-to-fire-the-event.png

Setup the data you want to send it to Google Analytics

You can use HandL URL builder to configure your fields easier. Click the icon next to the input field shown in the image below.

handl-url-builder-icon.png

To remove a paramater from the payload, click the red remove icon. To add a new parameter click "+ Add New Parameter" button at the bottom. To save the progrees, click "Save" like shown in the image below.

handl-url-builder-remove-add-save.png

Replace tid to your tracking ID

First replace tid to your tracking ID (UA-XXXXX-X)

replace-tid-to-your-trackingid.png

Configure your data

You can send almost any data that generated in WooCommerce to Google Analytics. There are few rules to follow. We configured the few fields out of the box for you. However you can add your own field in addition to this.

Pay attention to the value key pairs that is specific to Google Analytics. You can find more information here

If you need to cast/format a variable into string, integer or float simply add (int), (str) or (float) before your variable. This is especially required for Event Value field as shown below.

v=1&
t=event&
tid=UA-XXXXX-X&
cid=wc|data__customer_id&
ti=wc|data__order_key&
tr=wc|data__total&
tt=wc|data__total_tax&
ts=wc|data__shipping_total&
tcc=COUPON&
pa=purchase&
pr1id=wc|product__id&
pr1nm=wc|product__name&
pr1qt=1&
pr1pr=wc|data__total&
ni=1&
cu=USD&
cn=wc|meta__utm_campaign&
cs=wc|meta__utm_source&
cm=wc|meta__utm_medium&
ck=wc|meta__utm_keyword&
cc=wc|meta__utm_content&
ec=HandLEventCat&
ea=HandLEventAction&
el=HandLEventLabel&
ev=(int)wc|data__total

In addition to that;

You can send/track/collect any WooCommerce order data parameters as follows:

wc|data__status //order status
wc|data__currency //order currency
wc|data__discount_total //order total discount
wc|data__shipping_total //order total shipping
wc|data__total //order total
wc|data__total_tax //order total tax
wc|data__customer_id //order custom id
wc|data__order_key //order id
wc|data__billing__first_name //order customer first name
wc|data__billing__last_name //order customer last name
wc|data__billing__address_1 //order customer address
wc|data__billing__city //order customer city
wc|data__billing__state //order customer state
wc|data__billing__postcode //order customer postalcode
wc|data__billing__email //order customer email address
wc|data__billing__phone //order customer phone number
wc|data__payment_method //order method of payment (e.g. card, cash etc)

You can send/track/collect any WooCommerce order meta data parameters as follows:

wc|meta__gclid
wc|meta__utm_campaign
wc|meta__utm_source
wc|meta__utm_medium
wc|meta__utm_terms
wc|meta__utm_content
wc|meta__handl_original_ref
wc|meta__handl_landing_page
wc|meta__handl_ref
wc|meta__organic_source
wc|meta__first_gclid
wc|meta__first_utm_campaign
wc|meta__first_utm_source
wc|meta__first_utm_medium
wc|meta__first_utm_terms
wc|meta__first_utm_content

You can send/track/collect any WooCommerce product data parameters as follows:

wc|product__name
wc|product__product_id
wc|product__variation_id
wc|product__quantity
wc|product__total
wc|product__total_tax

The data will be populated in your Google Analytics

Once an order placed and an event satisfied (payment completed), HandL UTM Grabber post the order data (configured above) to Google Analytics. You will be able to access the data in Google Analytics like this.

You can measure the performance of the campaign (based on revenue)

google-analytics-campaign-view.png

You can measure the performance of the campaign based on Source/Medium

google-analytics-source-medium.png

Transaction information is available under user explorer for each user

google-analytics-report.png

UTM data is also available under sales performance

google-analytics-sales-performance.png

If you have sent event parameters (such as Event Category, Event Action, Event Label, Event Value) shown above, you will see them populated in Google Analytics

google-analytics-event-category-table-valeu.png

WooCommerce to Facebook Offline Conversion

With the latest privacy rules in place, Facebook Offline conversion has been very crucial to track the data accurately (especially for the leads coming from IOS devices).

In this tutorial, we'll show you how you can send your order data to Facebook, so your data required to adjust ads performance always up to date based on the recent conversion so your re-targeting works as smooth as it can get.

Let's get started!

1. Create a zapier webhook in Zapier

There are a lot of tutorials regarding to this. Please see the official tutorial here Create Zapier Webhook and keep your webhook URL handy. We'll use it in the next step.

2. Create your action right after your webhook

Select "Send Offline Event in Facebook Offline Conversions" as your next action. Image shown below.

3. Select WooCommerce Postback From UTM menu and select custom

1-select-woocommerce-postback-from-UTM-menu-and-select-custom.png

4. Insert your postback URL

This is the webhook URL you created in Step 1. Please paste it here.

5. Select when to trigger the webhook

You can trigger the webhook on the following events

payment_complete
order_status_pending
order_status_failed
order_status_on-hold
order_status_processing
order_status_completed
order_status_refunded
order_status_cancelled

3-select-when-to-trigger-webhook.png

6. Build the payload you want to send

4-build-payload.png

For the minimal data, you can copy/paste the payload below: amount=wc|data__total&cur=wc|data__currency&status=payment_complete&fname=wc|data__billing__first_name&lname=wc|data__billing__last_name&email=wc|data__billing__email&phone=wc|data__billing__phone&city=wc|data__billing__city&state=wc|data__billing__state&country=wc|data__billing__country&postcode=wc|data__billing__postcode&order_id=wc|data__order_key&product_id=wc|product__product_id&event_time=wc|data__date_created

Save the form.

You are almost ready. Now, to make the next setup easier. Either wait for one order come through and trigger the webhook, or run one as test.

Please continue after you are sure an order is gone through Zapier.

7. Pull the latest order data into Zapier

Go to Trigger (Catch Hook) and Test Trigger. Click the "Request" dropdown and click "Load More"

Make sure the payload looks exactly like you expect

8. Map webhook fields to Facebook Offline Conversion

Select "Send Offline Event in Facebook Offline Conversions" and click "Set up Action"

Map the fields as shown below... Make sure to fill as much as you can based on the data you collect.

9. Test & Review

Click test and review and your test data will be sent to Facebook sucessfully.

You are all set. If you have any trouble implementing the step, let us know. We'd be happy to help!

Capture UTMs/Gclid in registration form

You can add any UTM fields and handl_ fields Native WP Shortcodes to your registration form.

Here we explain how to add gclid, but this can be extended to adding any utm or other fields.

function handl_woocommerce_add_fileds_to_register() {?>
	<input type="hidden" class="input-text" name="gclid" id="reg_gclid" value="<?php esc_attr_e( $_COOKIE['gclid'] ); ?>" />
	<?php
}
add_action( 'woocommerce_register_form_start', 'handl_woocommerce_add_fileds_to_register' );

You can add this code to your template file or functions.php

WooCommerce to Facebook Conversion API (FB CAPI)

Go to UTM > WooCommerce Postback and select Facebook Ads

You don't need any other change here...

Click Facebook CAPI menu in UTM and enter Facebook pixel id and access token

How to generate Access Token: Go to your pixel, click Settings, scroll down to the Conversion API and click Generate Access Token.

Once you set it up everything, keep monitoring your events and watch your event match increases to high 8-9s.

Access all the UTM data in Order Page

You can see all the UTMs associated with your sales in the Order list page. It will be like this