Implementing a Data Layer on Your WooCommerce Website

 

A. Tracking affiliate sales with data layer

Implementing a data layer makes it easier to accurately track affiliate sales. The data layer presents a uniform, standardized way to capture product/impression/transaction etc details on your website that is independent from your website design. It also allows you to easily integrate your website with Google Tag Manager and Google Analytics. Google Tag Manager lets you easily create and manage affiliate tracking tags on your website from a central location, while Google Analytics provides powerful web analytic tools for analyzing affiliate traffic.

Below you’ll find steps to implement data layer for WooCommerce by using a free plugin for Wordpress 3.4.0 or higher. Note that these steps assume you've already setup a GTM account.

In this section, you will install the GTM plugin to your WooCommerce website. Follow these steps to install it:

1. Login to your website’s Wordpress admin dashboard.

Figure A.1

2. From the sidebar in the admin dashboard, navigate to Plugins, then Add New.

Figure A.2

3. Use the search bar to search for "Google Tag Manager for WordPress", then click on the install button in the search result.

Figure A.3

4. After installation finishes the install button will turn into a blue activate button. Click on the button to activate the plugin. After the plugin is activated, you should see a notification prompt for your GTM ID.

Figure A.4

5. Login to your Google Tag Manager account and create a new container for your website, or go to the existing container for your website if you've already created one.

Figure A.5

6. Copy the GTM ID of the container(e.g. GTM-xxxxxx) from the top-right of the page. Note that the GTM ID shown in the screenshot below is an example and you must use your own GTM ID.

Figure A.6

7. With your GTM ID on hand, go back to your website's Wordpress admin dashboard and click on the link in the notification to go to the plugin's settings page.

Figure A.7

8. Paste your GTM ID into the Google Tag Manager ID field and click on save changes.

Figure A.8

9. Now you need to integrate the plugin with WooCommerce. Click on the Integration tab and open the WooCommerce section. Enable the Track Enhanced E-commerce feature and click on save changes.

Figure A.9

10. The data layer is now available on your website. Proceed to the next section of this guide to implement a test Involve Asia tag. For more details regarding the plugin, refer to the plugin’s website.

After following the steps, you'd have successfully installed a GTM plugin on your WooCommerce website, and completed the first section of this guide.

B. Implementing the Involve Asia tag

Continue the integration process by implementing a test Involve Asia tag on your WooCommerce website. The test tag will send conversion info from your website to the Involve platform where you can view them on your IA dashboard.

In this section, you will implement a test Involve Asia tag to your WooCommerce website. Follow these steps to implement it:

1. For the purpose of this guide, you will import a premade GTM container file into your GTM. The container is designed to track conversion info from a WooCommerce website with data layer and GTM as described in this guide.

2. Download the ia-gtmdemo-woocommerce.json file and save it on your computer. When imported into your GTM, this file will add test Involve Asia tags into your GTM. Note that the above file is designed for this guide and may not work perfectly on your website.

3. To import the container file into your GTM, login to your Google Tag Manager account and navigate to your website's container.

Figure B.1

4. Click on Admin.

Figure B.2

5. Navigate to Import Container.

Figure B.3

6. Under Select File to Import, click on Choose Container File and select the ia-gtmdemo-woocommerce.json file you've downloaded earlier.

Figure B.4

7. Under Choose Workspace, click on Existing.

Figure B.5

8. Choose Default Workspace.

Figure B.6

9. Under Choose an Import Option, select the Merge option, then choose to rename conflicting tags, triggers, and variables.

Figure B.7

10. Click on Confirm to import the GTM container file to your GTM.

Figure B.8

11. You should be returned to the overview page showing the number of added changes.

Figure B.9

12. Afterward, you must change at least 2 placeholder values before the scripts will work. Go to Variables.

Figure B.10

13. Locate ia-offer-id. Click on it to change the value.

Figure B.11

14. Change the placeholder value to your offer ID. You must change it to match your offer ID for the scripts to work correctly. To get your offer ID, contact your account manager, or send an email to the integration team. When you're done, save your changes.

Figure B.12

15. Locate ia-container-id. Click on it to change the value.

Figure B.13

16. Change the placeholder value to your container ID. You must change it to match your container ID for the scripts to work correctly. To get your container ID, contact your account manager, or send an email to the integration team. When you're done, save your changes.

Figure B.14

17. If your website uses a custom tracking domain, you must also change the tracking domain to match your custom tracking domain. If your website doesn't use a custom tracking domain, skip to step 19.

18. Locate ia-tracking-domain. Click on it to change the value.

Figure B.15

19. If your website uses a custom tracking domain, change the default tracking domain to your custom tracking domain. If your website uses a custom tracking domain, you must change it to match your custom tracking domain for the scripts to work correctly. When you're done, save your changes.

Figure B.16

20. If your WooCommerce website has a shopping cart extension that changes the URL of the thank you page, you must change the trigger to use the correct URL. Skip to step 23 if your website uses the default WooCommerce thank you page path e.g. /checkout/order-received/.

21. From the overview page go to Triggers.

Figure B.17

22. Click on ia-woocommerce-checkout-success-page to change the trigger.

Figure B.18

23. Replace the page path value with the thank you page path of your website. When you're done, save your changes.

Figure B.19

24. The final step is to publish your GTM container by clicking Submit, then Publish.

Figure B.20

25. The newly-added Involve Asia tags will start tracking conversions on your WooCommerce website. Continue to the next section of this guide to test the tags.

After following the steps, you'd have successfully implemented a test Involve Asia tag on your WooCommerce website, and completed the second section of this guide.

C. Make sure data layer is present on needed pages

After you're done adding the data layer to your website, you should test to ensure that the data layer is present on all needed pages and filled with required values. You also want to check that the test Involve Asia tags are tracking and sending conversion data to the Involve platform.

In this section, you will test conversion tracking using the test Involve Asia tag on your WooCommerce website. Follow these steps to test it:

1. Login to your Google Tag Manager account and navigate to your website's container.

Figure C.1

2. Click on the preview button to enable GTM preview mode in your browser.

Figure C.2

3. A preview banner will be shown on the overview page.

Figure C.3

4. To test conversions by using your website from your browser, you must visit your website using a test link. Copy the following example test link and replace the placeholder directly after offer_id= with your own offer ID:

https://invol.co/aff_m?offer_id=XXXXXX&aff_id=2&source=testoffer&aff_sub=testoffer

e.g. if your offer ID is 154321, after replacing the offer ID your test link would look like this:

https://invol.co/aff_m?offer_id=154321&aff_id=2&source=testoffer&aff_sub=testoffer

Note that the offer ID used in the test link above is an example and you must use your own offer ID. To get your offer ID, contact your account manager, or send an email to the integration team.

5. Paste the link into the address bar of your browser and hit Enter. You will be redirected to your website. Note that the offer ID used in the screenshot below is a placeholder and you must use your own offer ID for the link to work properly.

Figure C.4

6. You should see the GTM debug panel at the bottom of the page. Click on the Data Layer tab to view data layer values on the current page.

Figure C.5

7. Go through your website’s purchase flow.

Figure C.6

8. At the thank you page, switch to the Data Layer tab.

Figure C.7

9. Check if all relevant details e.g. product name, product SKU, price etc are reflected in the data layer on the page. Note that the product information shown here is for illustration purposes only. Your GTM debug panel will show details that match the corresponding order from your website. As the test tags are designed for this guide, it may not capture all product information from your website.

Figure C.8

10. At the same page, check the Tags tab to make sure that the conversion tags added from the previous section of this guide are fired. You should see ia-demo-woocommerce and ia-demo-woocommerce-fallback-pixel under Tags Fired on This Page.

Figure C.9

11. When you’re done with the above steps, click on "Leave preview mode" in Google Tag Manager to remove the GTM panel.

Figure C.10

12. Afterward, check if the conversion data was properly captured in the Involve platform. Login to your Involve dashboard.

Figure C.11

13. Navigate to Reports, then Conversion Report.

Figure C.12

14. Using the date picker at the top of the page, select a date range that covers the conversions you want to view, then click Submit.

Figure C.13

15. The table at the bottom of the page will show the conversion data captured by the test Involve Asia tags from your website.

Figure C.14

Note that the conversion data shown here are for illustration purposes only. Your dashboard will show conversion data with details that match the corresponding orders from your website. As the test tags are designed for this guide, it may not capture all product information from your website.

After following the steps, you'd have successfully tested conversion tracking using the test Involve Asia tag on your WooCommerce website, and completed the last section of this guide.

Involve Asia is not officially connected in any way with WooCommerce, or any of its subsidiaries or affiliates. The name WooCommerce as well as related names, marks, emblems and images are registered trademarks of Automattic Inc..