Implementing a Data Layer on Your Magento 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 Magento using a free extension for Magento 2.2 or higher. Note that these steps assume you've already setup a GTM account. You may require assistance from your Magento website developers to follow this guide.
In this section, you will install the GTM plugin to your Magento website. Follow these steps to install it:
- Check if Composer is already installed in your Magento 2 instance. If not, install Composer by following the instructions for your platform on Composer's website.
- After making sure Composer is installed in your Magento 2 instance, install the extension via Composer by running the following command: composer require yireo/magento2-googletagmanager2
- After installation finishes, activate the extension by running the following commands:
- bin/magento module:enable Yireo_GoogleTagManager2
- bin/magento cache:clean
- bin/magento setup:upgrade
4. After activating the extension, login to your Magento admin dashboard, or logout and login again if you're logged-in beforehand.
Figure A.1
5. From the sidebar in the admin dashboard, navigate to Stores, then Configuration.
Figure A.2
6. In Configuration, on the in-page sidebar, navigate to Sales, then Yireo GoogleTagManager. If the entry is not present, refresh invalid caches from the notification bar.
Figure A.3
Figure A.4
7. Enable the extension. Additional fields to configure the extension will become visible, one of which requires you to input your GTM ID.
Figure A.5
8. 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.6
9. 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.7
10. With your GTM ID in hand, go back to your website's Magento admin dashboard. Paste the ID into the Container Public ID field and save your changes.
Figure A.8
11. The data layer is now available on your website. Proceed to the next section of this guide to implement a test Involve Asia pixel. For more details regarding the extension, refer to the extension’s usage guide.
After following the steps, you'd have successfully installed a GTM plugin on your Magento 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 Magento 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 Magento website. Follow these steps to implement it:
- 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 Magento website with data layer and GTM as described in this guide.
- Download the ia-gtmdemo-magento.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.
- 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-magento.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 Magento website uses a shopping cart extension that changes the URL of the thank you page, or if onepage checkout is disabled, you must change the trigger to use the correct URL. Skip to step 23 if your website uses the default Magento 2 thank you page path i.e. /checkout/onepage/success/.
21. From the overview page go to Triggers.
Figure B.17
22. Click on ia-magento-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 Magento 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 Magento 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 Magento website. Follow these steps to test it:
1. Login to your Google Tag Manager account, and navigate to your website 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-magento and ia-demo-magento-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 Magento website, and completed the last section of this guide.
Involve Asia is not officially connected in any way with Magento, or any of its subsidiaries or affiliates. The name Magento as well as related names, marks, emblems and images are registered trademarks of Magento Inc..
Comments
0 comments
Article is closed for comments.