Skip to content

lucasvtiradentes/shopify-store-omni-pixel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

SHOPIFY STORE OMNI PIXEL

npm version
maintance contributions

Features β€’ Requirements β€’ Usage β€’ Development β€’ About β€’ Community

see table of content

🎺 Overview

This is a tool for saving user behavior information into cookies and send events to some ads and analytics platforms, like GA, Facebook and Tiktok.

This tool is an must-have for shopify stores who uses yampi as payment checkout solution, since it saves a lot of effort in proper setup analytics tracking in all ads platforms and yampi don't track user checkout progress correctly.

To unlock its full potential, consider using also lvt-analytics-setup.

🎯 Features

Β Β Β βœ”οΈ Track user information across all ecommerce funnel and store it at cookies;
Β Β Β βœ”οΈ Sends user events to regular analytics pixel platforms, like google analytics, facebook, tiktok, and others;
Β Β Β βœ”οΈ Saves user visits in a google spreadsheets sheet;
Β Β Β βœ”οΈ Increases store speed by handling all the pixels with an timeout delay;
Β Β Β βœ”οΈ Make the analytics tracking setting fast for developers;
Β Β Β βœ”οΈ Run the latest version of the code in your stores as soon as you update the code in your github;
Β Β Β βœ”οΈ Supported analytics platforms events: Google analytics 3, Google analytics 4, Microsoft clarity and lvt analytics.
Β Β Β βœ”οΈ Supported ads platforms events: Google ads, Facebook, Tiktok ads.

⚠️ Requirements

In order to use this project in your computer, you need to have the following items:

  • npm: To install the package. Npm is installed alongside nodejs;
  • nodejs: To actually run the package.

If you want to make changes to the source code, it is recommended to also install the following items:

  • git: To work with version controlling;
  • vscode: Useful for editing the code. You can choose a similar editor as you wish.

πŸ’‘ Usage

To be able to use this tool, first include the following snippet code (which sets page objects used in the omni pixel source code) before in the head section of theme.liquid file in you shopify store:

<script>
  LVT_collection = '';
  LVT_product = '';
  LVT_search = '';
  LVT_cart = '';
  LVT_article = '';

  var curPage = "{{template.name}}"
  // console.log(curPage)

  if (curPage === "collection"){
    LVT_collection = {{ collection.products | json }};
  } else if (curPage === "product"){
    LVT_product = {{ product | json }};
  } else if (curPage === "search"){
    LVT_search = {{ search.results | json }};
  } else if (curPage === "cart"){
    LVT_cart = {{ cart | json }};
  } else if (curPage === "article"){
    LVT_article = {{ article | json }};
  } else if (curPage === "index"){
  } else if (curPage === "blog"){
  } else if (curPage === "page"){
  }

  if (LVT_collection === ''){delete LVT_collection}
  if (LVT_product === ''){delete LVT_product}
  if (LVT_search === ''){delete LVT_search}
  if (LVT_cart === ''){delete LVT_cart}
  if (LVT_article === ''){delete LVT_article}
</script>

And after, make sure to edit the missing pieces in the following snippet code, and after include it after the above code. Its better to include the following snippet code in a google tag manager tag, since GTM is compatible with both shopify and yampi platforms, and whe need to track customer actions in Yampi too.

<script type="text/javascript">
  var github_username = 'lucasvtiradentes';
  var github_repository = 'shopify-store-omni-pixel';
  var file_location = 'dist/lvt_omni_pixel.min.js';
  var final_link = 'https://api.github.com/repos/' + github_username + '/' + github_repository + '/contents/' + file_location;

  fetch(final_link)
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      var decodedContent = atob(data.content);
      eval(decodedContent);

      runTrackerWhenReady({
        shopify_store: {
          store_name: 'storename',
          store_url: 'storename.com.br',
          checkout_url: 'seguro.storename.com.br',
          blog_url: '/blog_page_',
          tracking_url: '/tracking_page',
          contact_url: '/contact_page',
          skip_cart: true,
          ignored_collections: ['20 OFF', 'HOT SALES']
        },
        pixel_settings: {
          lvt: {
            fire_events: true,
            settings: {
              spreadsheet_id: '-',
              store_sheet_name: '-',
              api_url: '-'
            }
          },
          clarity: {
            fire_events: false,
            pixels: ['-']
          },
          tiktok: {
            fire_events: false,
            pixels: ['-']
          },
          facebook: {
            fire_events: false,
            pixels: ['-']
          },
          google_ua: {
            fire_events: false,
            pixels: ['-']
          },
          google_a4: {
            fire_events: false,
            pixels: ['-']
          },
          google_ads: {
            fire_events: false,
            pixels: [
              {
                pixel: '-',
                labels: {
                  purchase: ['-'],
                  add_payment_info: ['-'],
                  add_address_info: ['-'],
                  begin_checkout: ['-'],
                  add_to_cart: ['-'],
                  view_item: ['-'],
                  view_item_list: ['-'],
                  page_view: ['-']
                }
              }
            ]
          }
        }
      });
    });
</script>

alternatively, you can use the package directly from npm, with the following code:

<script src="https://unpkg.com/shopify-store-omni-pixel@1.0.0/lvt_omni_pixel.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/shopify-store-omni-pixel@1.0.0" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/shopify-store-omni-pixel" type="text/javascript"></script>

πŸ”§ Development

Development setup

To setup this project in your computer, download it in this link or run the following commands:

# Clone this repository
$ git clone https://github.com/lucasvtiradentes/shopify-store-omni-pixel

# Go into the repository
$ cd shopify-store-omni-pixel

After download it, go to the project folder and run these commands:

# Install dependencies
$ npm install

# Run the typescript code in development mode
$ npm run dev

If you want to contribute to the project, after you make the necessary changes, run these commands to check if everything is working fine:

# Compile the code into javascript
$ npm run build

# Run the compiled code in production mode
$ npm run start

If you want to publish it to an npm package, just do the following steps:

  1. Make the changes you want in the source code;
  2. Login into your npm account in the terminal, using npm login;
  3. Upgrade the version key for a greater one in the npm package;
  4. Update the name key in the npm package to the name of your new package;
  5. Run the command npm run pub.

Used technologies

This project uses the following thechnologies:

Scope Subject Technologies
Project Main
Setup Code linting
Commit linting
Other

Commit messages style

This project uses the best of two main conventions to commit messages validation:

So a typically valid commit message has this pattern:

πŸ”§ config: add lint-staged to the project (#2)

Also, in order to have this integration working correctly, I buld a script that we can specify only allowed types and it take care to update both commitizen and commitlint settings.

πŸ“š About

License

Boilermanager is distributed under the terms of the MIT License Version 2.0. A complete version of the license is available in the LICENSE file in this repository. Any contribution made to this project will be licensed under the MIT License Version 2.0.

πŸ‘ͺ Community

Contributing

if you want to positivily impact this project, consider:

  • ⭐ Star this repository: my goal is to impact the maximum number of developers around the world;
  • ✍️ Fix english mistakes I might have made in this project, may it be in the DOCS or even in the code (I'm a portuguese natural speaker);
  • ❀️ Say thanks: kind words have a huge impact in anyone's life;
  • πŸ’° Donate: if you want to support my work even more, consider make a small donation. I would be really happy!

Feedback

Any questions or suggestions? You are welcome to discuss it on:

LinkedIn Gmail Discord Github

Made with ❀️ by Lucas Vieira.

πŸ‘‰ See also all my projects

πŸ‘‰ See also all my articles