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
Link to comment
Share on other sites
PanzerkampfPL Explorer

PanzerkampfPL

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>

 

Link to comment
Share on other sites
884483048 Newbie

884483048

Posted
  • Author
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.

Link to comment
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.

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

884483048

Posted
  • Author
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)
Link to comment
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)
Link to comment
Share on other sites
  • 3 months later...
Sickboards Apprentice

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?

 

 

Link to comment
Share on other sites
  • 1 year later...
sadiceramiche Apprentice

sadiceramiche

Posted
Posted (edited) 
<!doctype html>
<html lang="{$language.iso_code}">

  <head>
    {block name='head'}
      {include file='_partials/head.tpl'}
    {/block}
	
	     <!-- Google Tag Manager -->
<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-XXXXXX');</script>
  <!-- End Google Tag Manager -->

  </head>

  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">
  
  <!-- 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) -->

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

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

I followed the instructions, I modified the file /public_html/themes/classic-rocket/templates/layouts/layout-both-columns.tpl of the theme for Prestashop Classic Rocket.

Does not receive data from Google Analytics. I ask: if my code was entered correctly?

 

Edited by sadiceramiche (see edit history)
Link to comment
Share on other sites
  • 3 weeks later...
Leolautzu Contributor

Leolautzu

Posted
Posted (edited)

Hi all, I am using prestashop and I need to insert a google tag only in one page of my theme. The page in question is the purchase summary page. 
From the back office I don't have the possibility to edit the page nor to insert the google html tag. The theme I use is Alysum. Prestashop 1.7.8.2. 
I have tried in the past to insert the tag in the entire header of the site but it does not calculate conversions well. 
Can anyone help me?
 

Edited by Leolautzu (see edit history)
Link to comment
Share on other sites
Nickz Grand Master

Nickz

Posted
Posted
4 hours ago, Leolautzu said:

I have tried in the past to insert the tag in the entire header of the site but it does not calculate conversions well. 

make a backup first than go over ftp to themes > Alysum /templates/_partials/head.tpl or header.tpl

 

Link to comment
Share on other sites
rmart Newbie

rmart

Posted
Posted (edited)

Hello,

I dont find anything about my problem but this topic seems to talk about my question.

I need to find the "Checkout Value" in the order confirmation page. But I don't know where to find the exact variable ?

Could you know where / how I can found a specific variable ? Do I have to use the .tpl and identify the variable in the code ? It didn't work with my first try ...

I need this variable to settle the Google tag variables

 

Thank you !

Edited by rmart (see edit history)
Link to comment
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...