Instructions on how to add a script to Google Tag Manager (GTM) for the Thank You Page in your store
Open your Google Tag Manager account.
- Log in to GTM using your credentials.
Select the desired container.
- After logging in, you will see a list of your sites/containers. Click on the container where you want to add the script.
Create a new tag.
- Click on “New Tag” or “New Tag” (depending on the interface language).
- Give the tag a name, for example, “Plerdy E-commerce Tracking”.
Tag configuration.
- In the”Tag Configuration”, select “Custom HTML”.
Paste the script you provided into the code box:
<script type="text/javascript" defer>
var orderID = document.getElementById("order_id").innerText;
var totalMoney = document.getElementById("total_money").innerText.replace('$', '');
var quantity = document.getElementById("quantity").innerText;
var plerdysendData = {
'type': 'commerce',
'data': {
'order_id': orderID,
'money': totalMoney,
'quantity': quantity
}
}
</script>
Pay attention to the IDs of the elements ( order_id, total_money, quantity ). They must match the ID or class of the elements on your page.
If you have the option to use classes instead of IDs and other currency symbols, here’s how you can modify the code:
- Selecting items by class:To select items by class, use document.querySelector(‘.classname’).This function returns the first element that matches the specified selector. If you have multiple elements with the same class and you want to take a specific one, you need to use document.querySelectorAll(‘.classname’)[index].
- Handling different currency symbols: I added a regular expression to remove all non-numeric characters (including currency signs) from the string.
Here is the modified code:
<script type="text/javascript" defer>
var orderID = document.querySelector(".order_id_class").innerText;
var totalMoney = document.querySelector(".total_money_class").innerText.replace(/[^0-9.]/g, '');
var quantity = document.querySelector(".quantity_class").innerText;
var plerdysendData = {
'type': 'commerce',
'data': {
'order_id': orderID,
'money': totalMoney,
'quantity': quantity
}
}
</script>
Replace the order_id_class, total_money_class and quantity_class with the corresponding element classes on your page.
This approach will remove both the $ and UAH signs, as well as other characters, leaving only numbers and dots (for decimal numbers). Nevertheless, be careful that your page does not contain any other characters that may interfere with the correct amount determination.
Setting the trigger.
- In the Triggering section, click Choose a trigger or Select a trigger (depending on the interface language).
Create a new trigger that will be activated on the Thank you page after the purchase is completed.
- Select “Page View”.
- Select “Some Page Views”.
Set the conditions under which the trigger will be activated (for example, the page URL contains “thank-you” or another identifier of the Thank You Page in your store).
Save the changes.
- Click “Save” (depending on the interface language).
Publish the changes.
- Once you’ve added the tag and set the trigger, click the Submit button to publish the changes to your container.
Testing.
- Use the preview mode in GTM to check that the script works correctly on your website before your users see it.
Now the script will run on the Thank You page every time a user completes a purchase in your store.
Implementing JavaScript with Variables on the Thank You Page
Utilizing Variables for Dynamic Data Retrieval
- Modify the script to utilize GTM variables for dynamic data retrieval. This approach allows the script to adapt to different transactions dynamically.
Creating Variables in GTM
- In GTM, go to the “Variables” section and create new variables for ‘order_id’, ‘total_money’, and ‘quantity’.
- These variables should be set up to capture the respective data from your e-commerce platform or data layer.
Updating the Script with GTM Variables
- Replace the direct DOM manipulations in the script with GTM variables.
- For example, instead of using `document.getElementById(“order_id”).innerText`, use the GTM variable {{order_id}}.
Paste the updated script:
<script type="text/javascript" defer>
var orderID = {{order_id}};
var totalMoney = {{total_money}};
var quantity = {{quantity}};
var plerdysendData = {
'type': 'commerce',
'data': {
'order_id': orderID,
'money': totalMoney,
'quantity': quantity
}
}
</script>
Setting the Trigger for the Thank You Page
- In the “Triggering” section, set up a trigger that activates the script specifically on the Thank You page.
- Configure the trigger to respond to conditions like URL path containing ‘thank-you’ or a similar identifier of your store’s Thank You page.
Testing the Script
- Before publishing, use GTM’s preview mode to test the script on the Thank You page, ensuring it captures and sends the correct data.
This method ensures that your script dynamically adjusts to each transaction, making your e-commerce tracking more efficient and reliable.
