Using AB Tasty Pixel with Google Tag Manager on Shopify

You can add your AB Tasty Pixel on Shopify if you're using Google Tag Manager and the TrackPixel.app to manage tags on your Shopify website.

Follow these instructions to install the Google Tag Manager pixel on your Shopify store.

Installing AB Tasty Pixel Base Code

This guide will help you to set up your AB Tasty account and be able to launch your first campaigns.

Implementing the Generic Tag

To use AB Tasty on your website, you need to install the tag on your Shopify website.

To find the AB Tasty generic tag, click > Settings > Tags implementation > Generic tag.

The generic tag comes in two versions: synchronous and asynchronous.

To find the two versions of the tag, open the dashboard in your AB Tasty account, by clicking

> Settings > Tag implementation > Generic tag.

You will find the synchronous version, as well as the asynchronous version.

In synchronous mode, your website’s code scripts will load one after the other. A script can only be loaded if the previous one has finished loading. If a script is blocked, it will stop the script after it from loading.

On the other hand, in asynchronous mode, the different calls to the scripts will be made at the same time. All of the scripts will load at the same time. In this case, if a script hangs up, it will not stop the other scripts from loading.

The disadvantage of an asynchronous tag is that the screen may seem to flicker if the modifications are applied after the website loads.

In most cases, we recommend using the synchronous tag for AB Tasty. If the tag is placed in your website’s </head> tag, you will be sure that your modifications will be applied immediately, before the website loads. This will avoid the flickering effect and will offer an optimal user experience.

Standard Implementation

Copy the content of the synchronous tag and paste it between the </head> tags of your pages. Once the tag has been installed, you do not have to worry about it anymore since this tag is your account tag, not a testing tag.

We recommend that you place the code in the </head> section of your pages so changes are displayed more quickly. Otherwise, a flickering effect may occur: your visitors may see the original page for a fraction of a second before they see the modified page. By calling our tag as high as possible in the source code of your page, our script can apply the changes before the content is displayed.

Custom Implementation

You can also use any Tag Management System to inject our tag. In this case, make sure that the best practices (synchronous, in the </head>, not delayed) are applied, otherwise, you might experience flickering. Please note that some TMS, like Google Tag Manager, do not allow you to follow these guidelines. As stated in their documentation, it is not recommended to use GTM to inject an A/B Testing tag.

At any moment and for any reason, you can decide not to follow these guidelines. You can place the AB Tasty tag in the </body> tag set it as async, or manually defer it as soon as you accept the flickering effect it could create. Beyond that, you also need to acknowledge the resource-loading mechanism that lies behind your visitors’ browsers. This will enable you to understand when our tag will execute and evaluate your targeting criteria and business rules.

Focus On Google Tag Manager

There are two AB Tasty tags: the generic tag will allow you to apply the Javascript layer for your page modifications and the transaction tag will send transaction data to your reports (average basket, turnover per visitor, potential profit). These tags can be implemented using Google Tag Manager (GTM).

Generic Tag

Please note that by inserting the generic tag directly in GTM, you may experience a flickering effect: by default, tags inserted via GTM are in the pages' </body> tags, whereas AB Tasty recommends you inject your tag as high as possible in the page’s HTML code to limit flickering effects.

Access your AB Tasty account settings and find your AB Tasty tag.

Then, access GTM to create a custom tag:

To apply the AB Tasty tag on all of your website’s pages, follow the steps to create a rule:

Good to know!

If you use Google Tag Manager to apply the Google Analytics or Universal Analytics tag and link the data of your AB Tasty tests, you must check the Tracker Name option in the Advanced configuration section and leave the corresponding field blank.

To use Google Tag Manager :

if you only have one account: check the box without entering a name ;
if you have two or more accounts: check the box and enter a name for each account.

When you link Google Analytics or Universal Analytics and AB Tasty, you must set the Tracker Name option for the account to which you want to send data in Third-party Tools.
If you have only one Google Analytics account, you do not need to enter a tracker name.

This will force the tracker name to the value t0 for Universal Analytics and an empty character string for Google Analytics, whilst, with no special configuration, GTM automatically generates the tracker name and includes a different timestamp for each page load.

Our integration with Universal Analytics/Google Analytics calls on analytics.js library methods (for Universal Analytics) and ga.js (for Google Analytics), without passing the tracker name as a parameter, since we do not know ahead of time if you use GTM.

Without this parameter, the library methods mentioned will only work if the tracker name is t0 or ". Hence the need to modify this setting in your Universal Analytics/Google Analytics tag templates if you want AB Tasty to work with one of these web analytics tools.

More information can be found here: https://abtasty.zendesk.com/hc/en-us/articles/6397058337308-All-About-Tags