promo-sync, by Tincre.dev
Event tracking for Ad platforms supported by Promo ads. Use in conjunction with the promo-button, your Google Tag Manager and/or Google Analytics, Facebook Pixel, Meta Conversions API, and Tincre Promo.
🤯 for your ads on the web, with Google, Meta, and Tincre.
Use your favorite package manager to rock installation of promo-sync.
yarn add @tincre/promo-sync# -D if you want this as a dev dep
npm install @tincre/promo-sync# --save-dev if you want it as a dev dep
To use a Google Tag (Analytics) event simply import it into your framework of choice and fire the function.
🌶️ Typically this is in a
useEffecthook within the function body if you're a React user.
import { promoEventPageView } from '@tincre/promo-sync';
export default function PageOrComponent() {
promoEventPageView();
return <></>;
}As we at Tincre are proud Next.js users, below is a snippet you can use for performant Next.js sites.
In your pages/_app.{js,jsx,ts,tsx} file:
import Script from 'next/script';
import { promoGtag, promoPixel } from '@tincre/promo-sync';
export default function MyApp({ component, pageProps }) {
return (
<>
<Script id="google-tag-manager" strategy={'afterInteractive'}>
{promoGtag}
</Script>
<Script id="promo-meta-pixel" strategy={'afterInteractive'}>
{promoPixel}
</Script>
<Component {...pageProps} />
</>
);
}Or if you don't use React/Next.js:
import { promoGtag } from '@tincre/promo-sync';
<script
type="module"
src="https://unpkg.com/browse/@tincre/promo-sync@latest/dist/promo-sync.esm.js"
>
import {loadPromoGtag} from '@tincre/promo-sync'; loadPromoGtag();
</script>;As usual you can grab our minified build and link to that as a universal script, loaded prior to the code snippet directly above (and without the import statement).
Follow the installation method below to install the Tincre Sync Gtag, if you need a custom installation. You do not need this step if you've installed via the #automagic-setup method above.
In addition, this works alongside or without a current Google Tag Manager or Analytics installation. This handles Meta ad conversions, as well.
Our tag is GTM-57QS65R.
Into the <head> of each page:
<!-- 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://sync.tincre.dev/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-57QS65R');
</script>
<!-- End Google Tag Manager -->And then in the <body>:
<!-- Google Tag Manager (noscript) -->
<noscript
><iframe
src="https://sync.tincre.dev/ns.html?id=GTM-57QS65R"
height="0"
width="0"
style="display:none;visibility:hidden"
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->That's it!
Just call the gtag function again, i.e.
gtag('config', 'GTM-57QS65R', {
transport_url: 'https://sync.tincre.dev',
first_party_collection: true,
});See the Google Tag Manager documentation for additional details.
You should deduplicate ids if you are installing alongside a current implementation that you'd like your Promo events to merge with prior setups, rather than add to.
Pass your event below a transaction_id value and it'll match up throughout your data from Promo and Google Tag Manager.
Fortunately, we already provide a means of handling this seamlessly. Simply use the following function to generate an id and instantiate it via the gtag code above.
import { generateEventId } from '@tincre/promo-sync';
const myPromoEventId = generateEventId();🌶️ You shouldn't need to do anything if you're just installing the "stock" Tincre Sync setup. This is specifically for those who need further customization and DIY installation. Tincre typically handles this for enterprise and pro clients on request.
To use an event simply import it and call the function, e.g.
import { promoEventPageView } from '@tincre/promo-sync'
import { useEffect } from 'react';
export default function Index({...}) {
useEffect(() => { // run once on load
promoEventPageView()
}, [])
return <></>
}import { useEffect } from 'react';
import { promoEventPageView } from '@tincre/promo-sync';
export default function PageOrComponent() {
useEffect(() => {
promoEventPageView();
}, []);
return <></>;
}- Documentation: tincre.dev/docs
- Guides and how-tos: tincre.dev/docs/guides
- Reference docs: tincre.dev/docs/reference
- Community: community.tincre.dev
This code is free to use for your commercial or personal projects. It is open-source licensed under the Mozilla Public License 2.0.
You will see various headers throughout the codebase and can reference the license directly via LICENSE herein.
We use npm for releases. In particular, we use
npm --publish to get the job done.
Currently, only @thinkjrs has the ability to release. The following section is written for memory.
Prior to using npm --publish a release tag needs to be created for
the library using our standard tagging practices.
Ensure that tests ✅ pass during this process prior to releasing via npm.
To do a proper release, ensure you're in the base repo directory and run
npm publish . --access public --dry-run.
To complete a full release to the latest npm dist-tag, ensure you're in
the base repo directory and run npm publish . --access public.
🎉 That's it! 🎉