Jump to content

Google Tag Manager free solution for PS 1.7 (Google analytics, Google Remarketing, Conversions etc.)

884483048

By 884483048 ,
in Online sales and SEO

 Share

Recommended Posts

884483048 Newbie

884483048

Posted
Posted (edited)

1. Create all needed tags, conversions, products feeds etc. at https://ads.google.com https://analytics.google.com https://merchants.google.com

2. Remove all Google identificators (if any) from your website set in other PS modules or hardcoded.

3. Create a website container at https://tagmanager.google.com and put there all tags and labels you need (Google analytics, Google Remarketing, Conversions etc etc.) and a Conversion linker tag. Set triggers for conversions tags correctly. As for an example to track online purchase conversion you may use: trigger type - "page view"; fires on -> "URL path" -> "contains" -> "order-confirmation"  After all tags are set don't forget to publish the container or changes to container.

4. In PS web directory open file layout-both-columns.tpl at /themes/***your_theme_name***/templates/layouts and put there container code provided by Google. And don`t forget to insert {literal} {/literal} tags. At the example code below ***your_id*** are provided by Google but better to copy & paste whole code piece from container on https://tagmanager.google.com . To get your Google code click on container ID at the top of the page when your are inside the container at https://tagmanager.google.com.

After  <head> 

<!-- Google Tag Manager -->
{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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','***your_id***');</script>
{/literal}
<!-- End Google Tag Manager -->

After <body> or <body id="..... 

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=***your_id***"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

5. At PS admin interface set to recompile template, clean cache and wait for up to 3 days for Google to see your integration.

Edited by 884483048 (see edit history)
  • Thanks 2

Share this post

Link to post
Share on other sites
Panzerkampf Rookie

Panzerkampf

Posted
Posted

Thank you, I just wanted to create a topic with question how to do it. :)

I use classic-rocket templates on PS. 1.7.6.0 and my body section does not start with <body>
Should I second code paste after "  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">  " ?    (I know, noob's question  ;) ) 

  

<!doctype html>
<html lang="{$language.iso_code}">

  <head>
 
  <!-- Google Tag Manager -->
  
  {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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','XXXXXXXXXXX');</script>
{/literal}
<!-- End Google Tag Manager -->

  
    {block name='head'}
      {include file='_partials/head.tpl'}
    {/block}
  </head>

  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">

    {block name='hook_after_body_opening_tag'}
      {hook h='displayAfterBodyOpeningTag'}
    {/block}

    <main>
      {block name='product_activation'}
        {include file='catalog/_partials/product-activation.tpl'}
      {/block}

      <header id="header" class="l-header">
        {block name='header'}
          {include file='_partials/header.tpl'}
        {/block}
      </header>

      
      ...
      ...
      ...
          
      
  </body>

</html>

 

Share this post

Link to post
Share on other sites
884483048 Newbie

884483048

Posted
Posted
1 hour ago, Panzerkampf said:

Should I second code paste after "  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">  " ?    (I know, noob's question  ;) ) 

yes paste <body> code section there.

Share this post

Link to post
Share on other sites
  • 1 month later...
  • 4 months later...
kmorgen Newbie

kmorgen

Posted
Posted

Nice post!

I added the <head> code to the Custom Code field and the <body> code to the Tracking code fields which many themes have in the Theme Editor (or alternatively use custom content module and hook the <body> to Footer). This way no need to modify any core files, which might be overwritten during updates.

However my biggest challenge is to get any useful content when using the Google Tag Manager?!
Did you find a good tutorial to setup this to extract the Enhanced ecommerce data and User ID, Order ID's and value/currency etc. for Analytics, Conversions and remarketing?
Not sure if need to create DataLayers and many Variables - which then seem like a huge task compared to use the build in free Google Analytics module. Then challenge would probabaly still be the Google Conversions / Remarketing.

Share this post

Link to post
Share on other sites
  • 2 weeks later...
884483048 Newbie

884483048

Posted
Posted (edited)
On 5/16/2020 at 3:20 PM, Panzerkampf said:

Should I second code paste after "  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">  " ?    (I know, noob's question  ;) ) 

As I wrote above - After <body> or <body id=".....

On 10/28/2020 at 6:51 PM, kmorgen said:

Did you find a good tutorial to setup this to extract the Enhanced ecommerce data and User ID, Order ID's and value/currency etc. for Analytics, Conversions and remarketing?

Not sure if need to create DataLayers and many Variables - which then seem like a huge task compared to use the build in free Google Analytics module. Then challenge would probabaly still be the Google Conversions / Remarketing.

I think it's possible to do that but haven't worked on it. Also I would like to say that google analytics is pretty inconvenient so i don't use it. As for me it is enough to use shopping campaigns information in google ads interface.

Edited by 884483048 (see edit history)

Share this post

Link to post
Share on other sites
  • 1 month later...
stavebninykraus.cz Newbie

stavebninykraus.cz

Posted
Posted (edited)

 

BRAVO!!! 😄 Prestashop 1.7.6.8
I placed the script like this and it works. I just added the lireral tag to the body third script, which I don't know if it's unnecessary. Anyway, thank you all very much 🙂

  

<head>
  
  <!-- Google Tag Manager -->
{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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
{/literal}
<!-- End Google Tag Manager -->
  
    {block name='head'}
      {include file='_partials/head.tpl'}
    {/block}
  </head>
  
  <body id="{$page.page_name}" class="{$page.body_classes|classnames}{if isset($LEO_LAYOUT_MODE)} {$LEO_LAYOUT_MODE}{/if}{if isset($USE_FHEADER) && $USE_FHEADER} keep-header{/if}">

 <!-- Google Tag Manager (noscript) -->
 {literal}
 
  



     
       
         
        
       
<!-- Google Tag Manager (noscript) -->
 {literal}
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
{/literal}
<!-- End Google Tag Manager (noscript) -->

    {block name='hook_after_body_opening_tag'}
      {hook h='displayAfterBodyOpeningTag'}
    {/block}

    <main id="page">
      {block name='product_activation'}
        {include file='catalog/_partials/product-activation.tpl'}
      {/block}
      <header id="header">
        <div class="header-container">
          {block name='header'}
            {include file='_partials/header.tpl'}
          {/block}
        </div>
      </header>

 

Edited by stavebninykraus.cz (see edit history)

Share this post

Link to post
Share on other sites
  • 3 months later...
Sickboards Rookie

Sickboards

Posted
Posted

As trigger I would suggest using either:

"id_cart="

"key="

or 

"id_module="

As  "order-confirmation" does not trigger all success pages (for instance if you have multi language)

 

Other question how would you install the dynamic conversion tag?  

<!-- Event snippet for Example conversion page -->
<script>
  gtag('event', 'conversion', {'send_to': 'AW-123456789/AbC-D_efG-h12_34-567',
    'value': 123.05,
    'currency': 'USD'
  });
</script> 

In the order confirmation page header?

 

 

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More

  I accept