This article will show you how to take Google Tag Manager and get it working with your PinnacleCart store. If you haven't already, you will need to initially set up Google Tag Manager, which you can find a walkthrough for at How to Setup Google Tag Manager. Once set up, you can proceed with the steps in this article.
Complexity Level: Advanced
Estimated Time for Completion: 2 hours
In this article, you will learn:
How to Add the GTM HTML Snippet to Your Store
How to Add Conversion Code to Your Store
Adding Code For Assigning PinnacleCart Variables to GTM Variables
Creating Page View Events and Conversion Events in GTM
Creating Add to Cart Event in GTM
How to Add the GTM HTML Snippet to Your Store.
With the GTM HTML Snippet copied, go ahead and log in to the admin area of your cart.
Step 1
Go to Settings>Advanced Settings>File Manager.
Step 2
Navigate through the following path in your File Manager: content/engine/design/templates/wrappers/.
Then, click the link to edit default.html.
Go ahead and highlight all the text in this file and paste it into a plain text program like Notepad++, Microsoft Notepad, or TextWrangler for Mac. Save it as default.html.
In the new file, we need to enter the GTM snippet right after the opening body tag. The line you're looking for is:
<body id="page-{$current_page|htmlspecialchars}" class="page page-{$current_page|htmlspecialchars}">Before pasting the code, you will need literal tags. Enter a new line after the line above. Type out: {literal}{/literal}.
The GTM code would be pasted directly in between those literal tags, like:
{literal}<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->{/literal}Save the file again.
Step 3
Return to your File Manager, and this time navigate to: content/skins/_custom/skin/templates/wrappers.
Click Upload File 
and upload the default.html file you saved.
Step 4
You need to load the file into your cache directory. To do this, just go to Design > Cart Designer. You can exit from the Cart Designer after it loads.
How to Add Conversion Code to Your Store
Now you will need to add some code to your completed page to track conversions.
Step 1
Go back to your File Manager.
Navigate to content/cache/skins/YOURSKIN/templates/pages/checkout and open up completed.html. 
Copy all of the text, return to your plain text editor, and paste it in. Save the file as completed.html.
Note: Replace YOURSKIN in the path above with your actual skin name.
Highlight and copy the following code:
<script>
var items = {$items|json_encode}
dataLayer = [{literal}{{/literal}
'event': 'company.transaction',
'transactionId': '{$order_num}',
'transactionAffiliation': 'Your Company Name',
'transactionTotal': '{$order_total|string_format:"%.2f"}',
'transactionTax': '{$tax|string_format:"%.2f"}',
'transactionShipping': '{$shipping_amount|string_format:"%.2f"}',
'transactionProducts': [
{foreach from=$items item="item"}
{literal}{{/literal}
'sku': '{if $item.attribute_sku != ''}{$item.attribute_sku|escape:"javascript"}{elseif $item.sku !=''}{$item.sku|escape:"javascript"}{else}{$item.product_id|escape:"javascript"}{/if}',
'name': '{$item.product_name|escape:"javascript"}',
'category': '{$item.catalog_name|escape:"javascript"}',
'price': '{$item.price|string_format:"%.2f"}',
'quantity': '{$item.quantity}'
{literal}}{/literal},
{/foreach}
]
{literal}}{/literal}];
</script> Return to the completed.html file you created and create a new line after line 1, <div class="page-completed wrap {class file=$smarty.template editable=true}">. On line 2, paste in the code you copied above.
Replace 'company' in line 4 with your actual company name. Replace 'Your Company Name' with your actual company name on line 6 (after 'transactionAffiliation'). Save the file.
Step 2
Back in your file manager, navigate to content/skins/_custom/skin/templates/pages/checkout/, click Upload File, and upload your completed.html file.
To push to cache, click Design > Cart Designer. Exit Cart Designer right after.
Adding Code For Assigning PinnacleCart Variables to GTM Variables
The final piece of code you need to add will allow Google to translate its variables into PinnacleCart. It will also allow events from specific pages or button clicks to be tracked on Google's side.
Step 1
Go back to your File Manager.
Navigate to content/cache/skins/YOURSKIN/templates/layouts/zones and open up footer.html. Copy all of the text, return to your plain text editor, and paste it in. Save the file as footer.html.
Note: Replace YOURSKIN in the path above with your actual skin name.Highlight and copy the following code:
<script>
dataLayer.push({literal}{{/literal}
'current-page-type' : '{$current_page}',
{if $current_page == 'home'}
{/if}
{if $current_page == 'catalog'}
'store-cat-id' : '{$category.id}',
'store-cat-name' : '{$category.name}',
'store-cat-key' : '{$category.key}',
'store-cat-level' : '{$category.level}',
'store-cat-path' : '{$category.category_path}'
{/if}
{if $current_page == 'product'}
'store-prod-name' : '{$product.title}',
'store-prod-id' : '{$product.pid}',
'store-prod-prodid' : '{$product.product_id}',
'store-prod-price' : '{$product.price}',
'store-prod-cat' : '{$product.cat_name}',
'store-prod-image' : '{$GlobalHttpUrl}/{$product.image}',
'store-prod-manufacturer' : '{$prdouct.manufacturer_name}'
{/if}
{if $current_page == 'cart'}
{/if}
{if $current_page == 'one_page_checkout'}
{/if}
{if $current_page == 'completed'}
'store-completed-ordernum' : '{$order_num}',
'store-completed-ordervalue' : '{$order_value}',
'store-completed-ordertotal' : '{$order_total}'
{/if}
{literal}}{/literal});
</script> Return to the footer.html file you created and create a new line at the very bottom. Paste in the code you copied above and Save the file.
Step 2
Back in your file manager, navigate to content/skins/_custom/skin/templates/layouts/zones/, click Upload File, and upload your footer.html file.
To push to cache, click Design > Cart Designer. Exit Cart Designer right after.
Creating Variables in GTM
Now you will need to create the variables in Google Tag Manager to complete the connection.
Step 1
Return back to your GTM account. Click Variables on the left side.
Step 2
Under Built-In Variables, click Configure and make sure Page URL, Page Hostname, Page Path, and Referrer are selected. Under Utilities, select Event. And under Clicks, select Click Classes. Click Classes will allow you to add the Add to Cart click as an event.
Step 3
Under User-Defined Variables, click New.
For each of these variables, you will choose Data Layer Variable. The name of the variable and the Data Layer Variable Name will be exactly the same. Create Data Layer variables with the following names:
current-page-type
store-cat-id
store-cat-key
store-cat-level
store-cat-name
store-cat-path
store-completed-ordernum
store-completed-ordertotal
store-completed-ordervalue
store-prod-cat
store-prod-id
store-prod-image
store-prod-manufacturer
store-prod-name
store-prod-price
store-prod-prodid
Creating Page View Events and Conversion Events in GTM.
We can now add Events that occur on your store into GTM. This will be done in the form of triggers.
Visit your site.
- Click Triggers on the left. Click New.
- Name this Trigger Visitor.
- For Event, select Page View. Select Page View for the Trigger Type as well.
- Click Continue.
- For Fire On, select All Page Views.
- Click Create Trigger.
Checkout Conversion.
- Click Triggers on the left. Click New.
- Name this Trigger Conversion.
- For Event, under Page View select DOM Ready.
- Select Some DOM Ready Events.
- Choose Page URL, contains, and type completed.
- Click Save.
Creating Add to Cart Event in GTM
Add to Cart Events will help with any tags you use the track this event, such as the Facebook Pixel. This is also done in triggers. You will want to specify which page the Add to Cart button is being clicked, since both product and category pages can contain an Add to Cart button.
Product Page Add to Cart Button Event.
- Click Triggers on the left. Click New.
- Name this Trigger Add to Cart Product Page.
- For Event, select Click.
- Select All Elements for Target.
- Click Continue.
- For Fire On, select Some Clicks.
- Select Click Classes, contains, and type button-add-to-cart.
- Click the + button.
- Select current-page-type, equals, and type product.
- Click Create Trigger.
Catalog Page Add to Cart Button Event.
- Click Triggers on the left. Click New.
- Name this Trigger Add to Cart Catalog Page.
- For Event, select Click.
- Select All Elements for Target.
- Click Continue.
- For Fire On, select Some Clicks.
- Select Click Classes, contains, and type button-add-to-cart.
- Click the + button. Select current-page-type, equals, and type catalog.
- Click Create Trigger.
Next Up
The connection between Google Tag Manager and your PinnacleCart store is now complete. You are ready to start adding tags into GTM and they will automatically work within PinnacleCart. See the links below.
After you've added all of your tags, you can view if they're working by clicking the Publish arrow at the top right and selecting Preview. When you navigate to your site, you will have a preview window at the bottom showing which tags are firing on specific pages. When satisfied, you can push this live by clicking Publish in GTM.
Links to Related Articles
How to Add Google AdWords to Google Tag Manager
How to Add Google Analytics to Google Tag Manager
How to Add Facebook Pixel to Google Tag Manager
How to Add Perfect Audience to Google Tag Manager
If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.
