Installing Google Tag Manager for WHMCS
The Google Tag Manager installation for WHMCS takes a bit more work, but is relatively straight forward.
INSTALLING GTM FOR WHMCS
If you use cPanel, as many hosts do, you don’t even need to use a file transfer app. You can use your browser.
- Open cPanel
- Click on option “File Manager” under Files section
- Select Web Root and click Go
- Double Click on Folder’s icon to browse through folders.
- Navigate to manage/templates/default/header.tpl. This may be a different folder depending on the template you are using for WHMCS.
- Click on file and select Edit option in above menu
.
DEPLOY THE CODE PART 1
Paste this code as high in the <head> of the page as possible. Replace GTM-XXXXXX with your own unique Google Tag Manager code. Although it’s mentioned that this is no longer required in newer versions of WHMCS I’ve found that it is still required for some Javascript code.
<!– 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>
{literal}
<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>
{/literal}
<!– End Google Tag Manager –>
DEPLOY THE CODE PART 2
Paste this code as high in the <head> of the page as possible. Replace GTM-XXXXXX with your own unique Google Tag Manager code.
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
Test Install
- Visit your order page for WHMCS. Usually https://www.yourdomain.com/manage/cart.php.
- Verify that you see the Google Tag Manager installed using Ghostery.
- You can download a browser plugin for Ghostery at https://www.ghostery.com/.
- You should see the GTM in the Ghostery panel like the following:
