Tagging Pixel/DataLayer toevoegen aan Shopify
Op dit moment zijn we in het proces om een Shopify App te publiceren. In de tussentijd kun je deze handleiding gebruiken om de juiste DataLayer van Shopify te implementeren.
Om AdPage Tagging goed te laten werken is het van belang dat er een DataLayer is geinstalleerd waarvan we zeker weten dat ook de juiste cookies worden opgeslagen. Op deze mainer heb je optimalate attributie en conversiemeting.
Volg onderstaande stappen om de DataLayer juist in te stellen:
Shopify Data Layer
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Assets -> Add a new asset
Script Name: datalayer Script Extension: js
Add the following content to the script:
https://gist.github.com/jeroenfrenken/291d8d715b72be9dfb00c5e6770359ae
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Snippets -> Add a new snippet File name: trytagging-head
Add the following content to the script: https://gist.github.com/jeroenfrenken/aeeaffcf64fc0083ce25c37629802977
Change the following items of the script. [GTM_HEAD_CODE] this should be the head code that can be found in your trytagging dashboard.
Replace GTM-XXXXXXX with your web GTM id
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Snippets -> Add a new snippet File name: trytagging-body
Add the following content to the script: https://gist.github.com/jeroenfrenken/50f32a391ebc75982d641760f639b424
Change the following items of the script. [GTM_BODY_CODE] this should be the body code that can be found in your trytagging dashboard.
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Snippets -> Add a new snippet File name: trytagging-checkout-end
Add the following content to the script: https://gist.github.com/jeroenfrenken/4188d37681f8109a31490d82f191d518
Change the following items of the script. [GTM_BODY_CODE] this should be the body code that can be found in your trytagging dashboard.
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Layout -> theme.liquid (File) Add the following code below the opening of the <head> tag:
Unset
{% render 'trytagging-head' %}
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Layout -> theme.liquid (File) Add the following code below the opening of the <body> tag:
Unset
{% render 'trytagging-body' %}
Settings (corner bottom left) -> Checkout -> Order Status Page -> Additional Scripts Add the following code: https://gist.github.com/jeroenfrenken/1af2cf5972f057fe18c1dee5c8bfa69a
Replace [GTM_HEAD_CODE] with the head code from the trytagging dashboard.
Replace [GTM_BODY_CODE] with the body code from the trytagging dashboard. Replace GTM-XXXXXXX with your web GTM id
Om AdPage Tagging goed te laten werken is het van belang dat er een DataLayer is geinstalleerd waarvan we zeker weten dat ook de juiste cookies worden opgeslagen. Op deze mainer heb je optimalate attributie en conversiemeting.
Volg onderstaande stappen om de DataLayer juist in te stellen:
Shopify Data Layer
1) Install datalayer script
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Assets -> Add a new asset
Script Name: datalayer Script Extension: js
Add the following content to the script:
https://gist.github.com/jeroenfrenken/291d8d715b72be9dfb00c5e6770359ae
2) Add head script
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Snippets -> Add a new snippet File name: trytagging-head
Add the following content to the script: https://gist.github.com/jeroenfrenken/aeeaffcf64fc0083ce25c37629802977
Change the following items of the script. [GTM_HEAD_CODE] this should be the head code that can be found in your trytagging dashboard.
Replace GTM-XXXXXXX with your web GTM id
3) Add body script
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Snippets -> Add a new snippet File name: trytagging-body
Add the following content to the script: https://gist.github.com/jeroenfrenken/50f32a391ebc75982d641760f639b424
Change the following items of the script. [GTM_BODY_CODE] this should be the body code that can be found in your trytagging dashboard.
4) Checkout end
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Snippets -> Add a new snippet File name: trytagging-checkout-end
Add the following content to the script: https://gist.github.com/jeroenfrenken/4188d37681f8109a31490d82f191d518
Change the following items of the script. [GTM_BODY_CODE] this should be the body code that can be found in your trytagging dashboard.
5) Add head reference
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Layout -> theme.liquid (File) Add the following code below the opening of the <head> tag:
Unset
{% render 'trytagging-head' %}
6) Add body reference
Online Store -> Themes -> Actions ( can be shown as 3 dots) -> Edit Code -> Layout -> theme.liquid (File) Add the following code below the opening of the <body> tag:
Unset
{% render 'trytagging-body' %}
7) Add Purchase confirmation code
Settings (corner bottom left) -> Checkout -> Order Status Page -> Additional Scripts Add the following code: https://gist.github.com/jeroenfrenken/1af2cf5972f057fe18c1dee5c8bfa69a
Replace [GTM_HEAD_CODE] with the head code from the trytagging dashboard.
Replace [GTM_BODY_CODE] with the body code from the trytagging dashboard. Replace GTM-XXXXXXX with your web GTM id
Bijgewerkt op: 03/10/2023
Dankuwel!