Features • Requirements • Usage • Development • About • Community
see table of content
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.
✔️ 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.
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.
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>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-pixelAfter download it, go to the project folder and run these commands:
# Install dependencies
$ npm install
# Run the typescript code in development mode
$ npm run devIf 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 startIf you want to publish it to an npm package, just do the following steps:
- Make the changes you want in the source code;
- Login into your npm account in the terminal, using
npm login; - Upgrade the
versionkey for a greater one in the npm package; - Update the
namekey in the npm package to the name of your new package; - Run the command
npm run pub.
This project uses the following thechnologies:
| Scope | Subject | Technologies |
|---|---|---|
| Project | Main |
|
| Setup | Code linting |
|
| Commit linting |
|
|
| Other |
|
This project uses the best of two main conventions to commit messages validation:
- conventional commits: it's powerfull messages structure;
- gitmoji: it's beutiful and visual way to display commits.
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.
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.
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!
Any questions or suggestions? You are welcome to discuss it on:
