tiktok pixel developer mode

Published on: September 13 2022 by pipiads

tiktok pixel developer mode

00:00 What is Developer Mode?

01:17 Coding help

01:50 Tools / Prerequisites

03:00 How it works

05:28 Installing base code

06:12 Tracking events

07:03 Testing

07:35 Tracking Add To Cart

09:22 Testing on mobile app

10:39 Tracking Purchases

11:47 Advanced Matching

14:49 Summary

tiktok pixel developer mode

startTime durationTime text
00:00.9 00:05.9 there are two ways to install the tiktok
00:03.7 00:08.2 pixel on your shopify store
00:05.9 00:10.2 the first is the standard way
00:08.2 00:12.2 and it's fairly straightforward to set
00:10.2 00:13.5 up all you need to do is install the
00:12.2 00:14.9 tiktok app
00:13.5 00:18.7 and then it guides you through the
00:14.9 00:19.9 process the second way is the developer
00:18.7 00:22.5 mode
00:19.9 00:25.2 so this is a manual install you actually
00:22.5 00:27.5 have to copy and paste bits of code into
00:25.2 00:30.5 your shopify theme
00:27.5 00:32.3 it's a bit harder to do but that's what
00:30.5 00:35.0 this video is about
00:32.3 00:37.5 so uh you might want to use developer
00:35.0 00:39.0 mode because it lets you set up custom
00:37.5 00:41.0 events
00:39.0 00:42.2 so for example
00:41.0 00:45.0 you can
00:42.2 00:47.0 fire a page view event when a person has
00:45.0 00:48.4 scrolled a certain amount of time down
00:47.0 00:50.8 the page
00:48.4 00:53.3 uh i think also
00:50.8 00:58.2 yeah the attribution window is
00:53.3 00:58.2 longer so seven days post click
00:58.7 01:02.6 anyway i'm not a marketer i'm a
01:00.6 01:04.8 developer so i'm not going to go into
01:02.6 01:06.0 detail on the advantages of developer
01:04.8 01:08.5 mode but
01:06.0 01:11.5 i'm assuming you're either a developer a
01:08.5 01:14.6 marketer or a store owner and you know
01:11.5 01:16.3 that you want developer mode so
01:14.6 01:17.4 that's what this tutorial is going to be
01:16.3 01:19.9 about
01:17.4 01:23.3 if you are maybe a marketer or a store
01:19.9 01:26.5 owner and you're not confident with copy
01:23.3 01:28.9 and pasting code into your shopify theme
01:26.5 01:31.2 then i highly recommend you use a
01:28.9 01:34.6 service called storetasker they're
01:31.2 01:37.0 basically a company that specializes in
01:34.6 01:38.5 small tasks for shopify
01:37.0 01:39.9 and
01:38.5 01:41.1 they will they will do this for you
01:39.9 01:44.2 really quickly
01:41.1 01:46.3 um i'll have the link in the description
01:44.2 01:48.8 of this video i'll be very grateful if
01:46.3 01:51.4 you click that link because they'll pay
01:48.8 01:53.4 me a small commission for the referral
01:51.4 01:55.2 okay so firstly there are some
01:53.4 01:56.9 prerequisites the first thing you need
01:55.2 01:58.8 is a tik tok
01:56.9 02:01.8 business account or
01:58.8 02:03.6 access to tik tok ads manager
02:01.8 02:06.2 and here you're going to go into assets
02:03.6 02:08.6 and then event
02:06.2 02:11.0 to create your pixel
02:08.6 02:13.0 the second thing that you want is the
02:11.0 02:15.4 tik tok
02:13.0 02:16.8 pixel helper tool
02:15.4 02:19.4 which
02:16.8 02:21.4 is a little chrome extension
02:19.4 02:23.9 that looks like this
02:21.4 02:26.1 and it's just gonna say when it's found
02:23.9 02:27.8 a pixel on your site so
02:26.1 02:30.8 this is the website i'm working on and
02:27.8 02:32.7 you can see it's got a little number one
02:30.8 02:35.5 and it's showing me that this is the
02:32.7 02:36.6 event that's fired initiate checkout so
02:35.5 02:38.9 this is going to
02:36.6 02:40.4 allow us to test the pixel is actually
02:38.9 02:42.9 working
02:40.4 02:46.5 once we create the pixel
02:42.9 02:48.8 we're going to use the test events
02:46.5 02:51.5 here to actually see if this is working
02:48.8 02:52.4 we're going to go on to our mobile phone
02:51.5 02:54.3 and
02:52.4 02:55.8 we're going to scan this qr code on the
02:54.3 02:56.9 tik tok app
02:55.8 02:58.6 and then just
02:56.9 03:00.3 go to the website and perform actions
02:58.6 03:02.2 like adding to cart and see if that
03:00.3 03:03.7 actually shows up
03:02.2 03:05.5 so the first thing you want to do is
03:03.7 03:07.0 actually create the pixel
03:05.5 03:08.7 these pixels here will show up once
03:07.0 03:10.6 you've created them but
03:08.7 03:12.5 in the beginning you need to create uh
03:10.6 03:13.4 create a pixel you've got to give it a
03:12.5 03:14.9 name
03:13.4 03:16.2 like the name of your website or
03:14.9 03:20.3 something and you're going to choose
03:16.2 03:22.6 manually install pixel code
03:20.3 03:22.6 so
03:24.6 03:29.7 you're gonna choose developer mode
03:27.4 03:29.7 okay
03:29.9 03:35.8 and here we go
03:31.3 03:38.1 um it's given us the base code
03:35.8 03:40.6 and then we have this advanced matching
03:38.1 03:42.4 i'm going to explain how that works so
03:40.6 03:44.5 there are basically two parts or three
03:42.4 03:46.3 parts to installing the pixel
03:44.5 03:48.3 firstly the base code this is really
03:46.3 03:49.2 easy this just makes the whole thing
03:48.3 03:50.6 work
03:49.2 03:52.3 um
03:50.6 03:55.0 you copy the pixel code and we're gonna
03:52.3 03:56.7 add it to our theme.liquid it's gonna
03:55.0 03:58.2 work on every page
03:56.7 04:00.6 and um
03:58.2 04:04.6 yeah this part is pretty simple
04:00.6 04:07.0 the next part is adding um custom events
04:04.6 04:08.7 right so you can find the list of events
04:07.0 04:10.9 in the tik tok uh
04:08.7 04:13.3 documentation
04:10.9 04:16.6 but this is kind of what the events look
04:13.3 04:19.1 like we have like add to cart
04:16.6 04:21.5 which is an event that is triggered that
04:19.1 04:24.3 you want to trigger when a person clicks
04:21.5 04:26.0 the add to cart button
04:24.3 04:29.3 we have the complete payment which is
04:26.0 04:31.3 like when they finished the payment and
04:29.3 04:33.0 yeah we have all types of other events
04:31.3 04:34.6 like subscribe and
04:33.0 04:35.9 view content which is just when they
04:34.6 04:38.2 view a page
04:35.9 04:42.1 so yeah we have the base code
04:38.2 04:43.8 we have the event codes
04:42.1 04:45.6 and we also have something called
04:43.8 04:47.4 advanced matching
04:45.6 04:50.6 so this is a feature that you probably
04:47.4 04:54.1 want if you're using developer mode
04:50.6 04:55.6 uh we're gonna turn that on and
04:54.1 04:58.8 what it does is it matches your
04:55.6 05:01.1 customers email and phone number to
04:58.8 05:02.8 uh their tik tok account
05:01.1 05:04.4 um so that
05:02.8 05:05.8 i don't know so that you can get more
05:04.4 05:08.2 information
05:05.8 05:10.3 about what that customer is doing how
05:08.2 05:11.2 they're shopping how they're using tik
05:10.3 05:12.7 tok
05:11.2 05:13.8 and so on
05:12.7 05:16.1 um
05:13.8 05:17.7 and it's encrypted so it's not like
05:16.1 05:19.9 it's not like private information or
05:17.7 05:23.0 anything
05:19.9 05:25.0 so yeah uh for that there's just another
05:23.0 05:25.9 snippet of code that we're going to add
05:25.0 05:28.7 above
05:25.9 05:31.7 everywhere where we add our event codes
05:28.7 05:34.9 so let's install the base code first
05:31.7 05:37.5 i'm here on my shopify store
05:34.9 05:40.3 i'm going to go to actions
05:37.5 05:43.3 and then edit code
05:40.3 05:44.2 on my main theme
05:43.3 05:45.8 now
05:44.2 05:48.8 we're just going to install this code
05:45.8 05:49.8 inside theme.liquid which is our main
05:48.8 05:51.3 file
05:49.8 05:52.9 and
05:51.3 05:54.3 as you can see i've already added it
05:52.9 05:56.3 here
05:54.3 05:57.7 pretty simple i've got google tag
05:56.3 06:00.8 manager here
05:57.7 06:03.4 here's the head tag so this is where
06:00.8 06:04.8 uh the head of the website begins which
06:03.4 06:07.2 is where you include all kinds of
06:04.8 06:08.6 scripts there's nothing difficult about
06:07.2 06:11.3 this
06:08.6 06:13.4 we're going to copy pixel code
06:11.3 06:14.8 and then paste it into there for the
06:13.4 06:18.1 next part
06:14.8 06:20.7 let's actually set up a custom event
06:18.1 06:21.6 okay so the most simple event
06:20.7 06:24.2 is
06:21.6 06:25.8 the view content event this is just when
06:24.2 06:27.5 a page is viewed
06:25.8 06:29.1 okay so we're going to use that to test
06:27.5 06:30.5 if the pixel is actually
06:29.1 06:31.5 working
06:30.5 06:32.6 um
06:31.5 06:34.8 so
06:32.6 06:37.4 all we need to do
06:34.8 06:39.1 is back in our
06:37.4 06:41.5 theme.liquid file we're going to scroll
06:39.1 06:43.4 down to the bottom of that file now just
06:41.5 06:46.4 above the body tag you're probably going
06:43.4 06:47.6 to have some other scripts running here
06:46.4 06:49.3 and just
06:47.6 06:50.2 in amongst those scripts wherever you
06:49.3 06:51.6 think
06:50.2 06:53.8 it makes sense
06:51.6 06:56.6 we're going to add new script tags and
06:53.8 06:58.5 then this ttq track
06:56.6 07:00.1 view content
06:58.5 07:02.6 and
07:00.1 07:04.3 this is going to trigger that event
07:02.6 07:05.7 at this point
07:04.3 07:08.3 when you go
07:05.7 07:09.4 onto your website if you've installed
07:08.3 07:11.4 the
07:09.4 07:12.6 pixel helper
07:11.4 07:15.4 you should be able to see that your
07:12.6 07:17.0 pixel is there it's installed
07:15.4 07:19.4 ignore that i have two pixels now
07:17.0 07:22.1 because i still have the standard pixel
07:19.4 07:24.2 installed as well
07:22.1 07:26.6 but yeah this is the pixel that we're
07:24.2 07:28.5 working on now and you can see review
07:26.6 07:31.5 content
07:28.5 07:32.9 setup method is developer mode
07:31.5 07:35.4 and we can see that the pixel is
07:32.9 07:37.0 actually loading and working
07:35.4 07:38.2 now let's do something a bit more
07:37.0 07:40.2 interesting
07:38.2 07:42.1 say i want to track when an item is
07:40.2 07:43.7 added to the shopping cart
07:42.1 07:45.8 i need to trigger
07:43.7 07:49.0 this code
07:45.8 07:51.0 when the add to cart button is clicked
07:49.0 07:52.6 uh this is probably going to be the most
07:51.0 07:54.8 challenging part for you if you're not
07:52.6 07:57.3 good with code because you do need to
07:54.8 07:59.7 write a little bit of javascript
07:57.3 08:01.4 um or jquery
07:59.7 08:04.0 here's how i've done it
08:01.4 08:07.5 firstly i have this liquid code that
08:04.0 08:09.6 says if template equals product so
08:07.5 08:12.2 i'm not going to load this code on any
08:09.6 08:15.0 other template except for a product page
08:12.2 08:17.7 and then next what we have is
08:15.0 08:20.2 some jquery it's pretty simple
08:17.7 08:21.8 document on submit
08:20.2 08:25.0 when this
08:21.8 08:25.0 form is submitted
08:25.4 08:30.6 then we're going to
08:27.8 08:33.1 run that tik tok code if you're
08:30.6 08:35.0 setting this up yourself your the class
08:33.1 08:37.4 name for your
08:35.0 08:38.6 product form will probably be
08:37.4 08:41.7 different
08:38.6 08:43.7 and when i say product form
08:41.7 08:44.6 i'm actually talking about
08:43.7 08:46.6 uh
08:44.6 08:49.0 this entire
08:46.6 08:49.9 this entire buying panel
08:49.0 08:52.2 um
08:49.9 08:53.8 with a selector of a variant and then
08:52.2 08:55.4 add to cart button that's actually a
08:53.8 08:57.7 form right
08:55.4 08:59.5 and this submits the form
08:57.7 09:01.2 so
08:59.5 09:03.3 here in the code if you inspect the code
09:01.2 09:05.5 you can probably find your form
09:03.3 09:07.2 and you'll be able to grab the class of
09:05.5 09:12.0 the form from here
09:07.2 09:15.3 and create some similar code to this
09:12.0 09:17.3 and trigger the uh the pixel
09:15.3 09:19.5 so you have a couple of events already
09:17.3 09:21.3 set up we have the view content event
09:19.5 09:22.8 when people are looking at pages and we
09:21.3 09:24.1 have to add to current event at this
09:22.8 09:26.0 point
09:24.1 09:28.2 you might want to test on mobile if
09:26.0 09:31.4 actually everything is working
09:28.2 09:34.1 so to do that we're going to go into our
09:31.4 09:35.6 pixel that we just set up
09:34.1 09:38.0 in the tiktok ads manager and we're
09:35.6 09:40.0 going to go to test events
09:38.0 09:42.6 uh here you can actually test on your
09:40.0 09:44.8 mobile phone so you're going to open up
09:42.6 09:48.2 the tiktok app
09:44.8 09:50.4 um on your phone you're going to go to i
09:48.2 09:52.8 think the discover page or the home page
09:50.4 09:55.3 yeah go to the discover page
09:52.8 09:58.5 and in the top right you will actually
09:55.3 10:02.2 see this um this qr code scanner scan
09:58.5 10:03.0 the qr code and your website will come
10:02.2 10:05.1 up
10:03.0 10:07.9 oh sorry firstly you have to generate
10:05.1 10:09.9 the qr code so put in your website
10:07.9 10:12.8 generate the qr code
10:09.9 10:15.1 then scan the qr code with the app
10:12.8 10:18.2 and your website will come up and
10:15.1 10:21.1 just browse your website and you should
10:18.2 10:23.1 actually in real time see these
10:21.1 10:25.3 uh view content events popping up
10:23.1 10:27.7 whenever you go to a new page
10:25.3 10:30.7 and if you've already set up the add to
10:27.7 10:32.5 cart event as i just showed you uh you
10:30.7 10:34.3 will also see add to cart if you add the
10:32.5 10:36.0 product to cart
10:34.3 10:38.7 if you're seeing this then everything's
10:36.0 10:38.7 working well
10:39.1 10:43.2 the next place where you might want to
10:40.7 10:44.5 add the tik tok pixel or to add a
10:43.2 10:47.4 custom event
10:44.5 10:48.6 is on the order status page or the thank
10:47.4 10:52.2 you page
10:48.6 10:54.2 after a person has made a purchase
10:52.2 10:57.0 um and you would do this by going to
10:54.2 10:59.0 settings and then checkout
10:57.0 11:03.6 and we're going to add this code
10:59.0 11:05.1 in this uh additional scripts box here
11:03.6 11:07.5 you're gonna add a
11:05.1 11:09.0 um add two script tags here and then
11:07.5 11:11.3 between those tags
11:09.0 11:14.4 you're going to add the complete payment
11:11.3 11:17.2 event when a payment is completed okay
11:14.4 11:18.7 now if you're using shopify plus
11:17.2 11:21.6 you can also
11:18.7 11:22.5 do things like initiate checkout
11:21.6 11:25.5 um
11:22.5 11:28.2 or add payment info or like add events
11:25.5 11:29.8 to every step of the checkout but if you
11:28.2 11:31.5 don't have shopify plus you don't have
11:29.8 11:33.5 access to checkout.liquid so you won't
11:31.5 11:36.2 be able to do that you can just add
11:33.5 11:38.5 complete payment at the very end on the
11:36.2 11:39.8 thank you page
11:38.5 11:41.8 like so
11:39.8 11:44.7 it's not going to be so easy for you to
11:41.8 11:46.7 test unless you enable bogus payments
11:44.7 11:48.1 and actually go through with a test
11:46.7 11:49.8 order
11:48.1 11:52.0 the last part that i'm going to explain
11:49.8 11:53.2 is how to actually get advanced matching
11:52.0 11:54.6 to work
11:53.2 11:57.4 so this is where you match the
11:54.6 11:59.2 customer's email and phone number to
11:57.4 12:02.0 their tik tok account
11:59.2 12:03.4 we're gonna add some code above every
12:02.0 12:04.9 event
12:03.4 12:09.1 so
12:04.9 12:11.1 here i am again on the theme.liquid page
12:09.1 12:13.4 uh you can see our view content event
12:11.1 12:15.5 here that we set up earlier we can see
12:13.4 12:16.7 the add to cart event that we set up
12:15.5 12:17.8 earlier
12:16.7 12:20.4 and here
12:17.8 12:20.4 at the top
12:20.5 12:26.8 i've added this uh this event
12:24.0 12:28.6 which says ttq identify
12:26.8 12:31.1 and then it provides an email and a
12:28.6 12:32.0 phone number
12:31.1 12:33.5 um
12:32.0 12:36.6 the email
12:33.5 12:38.1 you can get a customer's email by
12:36.6 12:39.8 using these curly braces and
12:38.1 12:42.1 customer.email this is just regular
12:39.8 12:44.2 shopify liquid customer.email and
12:42.1 12:46.4 customer.phone
12:44.2 12:47.8 okay and that passes it to
12:46.4 12:49.2 tiktalk
12:47.8 12:51.7 uh
12:49.2 12:53.7 now here's the issue in shopify you only
12:51.7 12:55.4 have access to this if a customer is
12:53.7 12:57.4 logged in
12:55.4 12:59.2 if a customer is not logged in
12:57.4 13:02.0 then you don't you don't have this
12:59.2 13:03.4 information about them
13:02.0 13:05.8 um so
13:03.4 13:07.3 we're just going to wrap this code in if
13:05.8 13:09.4 customer
13:07.3 13:11.5 and end if
13:09.4 13:14.0 so that this doesn't even
13:11.5 13:16.6 try to do anything if if the customer
13:14.0 13:18.3 isn't logged in
13:16.6 13:21.2 and also
13:18.3 13:23.8 you might not find this that useful if
13:21.2 13:28.0 your store is is the kind of store where
13:23.8 13:28.0 people don't usually log in right
13:28.1 13:32.6 now if you want to test that this uh
13:30.2 13:34.4 advanced matching is working we're gonna
13:32.6 13:37.4 add some parameters
13:34.4 13:40.1 under this view content event
13:37.4 13:40.1 we're going to say
13:40.6 13:43.8 something like product
13:44.6 13:48.9 and then we're just going to say test
13:46.8 13:51.7 and the only reason we're doing this is
13:48.9 13:53.5 so that the parameter details show up in
13:51.7 13:54.7 the pixel helper tool
13:53.5 13:56.3 um
13:54.7 13:58.2 and then you want to log into your
13:56.3 13:59.9 account right
13:58.2 14:01.1 or create a customer account on your
13:59.9 14:02.7 store
14:01.1 14:04.2 log into it
14:02.7 14:05.7 and then when you
14:04.2 14:09.1 browse pages
14:05.7 14:11.3 have a look at the pixel helper
14:09.1 14:12.7 and you should be able to see
14:11.3 14:14.2 your content
14:12.7 14:16.3 uh you should be able to see whatever
14:14.2 14:18.6 event that you just did and now you can
14:16.3 14:20.7 see parameter details and there it is
14:18.6 14:23.2 our test parameter
14:20.7 14:24.3 but now we also see customer information
14:23.2 14:27.0 parameters
14:24.3 14:29.3 email okay so
14:27.0 14:30.5 it could say email could say email and
14:29.3 14:32.6 phone
14:30.5 14:34.6 but i haven't provided my phone in my
14:32.6 14:36.6 shopify customer account
14:34.6 14:39.0 so it's just saying email it can see my
14:36.6 14:39.0 email
14:39.3 14:42.7 that's that's it that's advanced
14:41.6 14:45.7 matching
14:42.7 14:48.1 in action and you should now be able to
14:45.7 14:49.8 get extra information in your tik tok
14:48.1 14:52.4 ads manager
14:49.8 14:56.1 so we now have three events set up we
14:52.4 14:59.0 also have advanced matching working
14:56.1 15:01.7 you can add other events if you want
14:59.0 15:02.9 but i hope this video has set you on the
15:01.7 15:06.1 right path
15:02.9 15:07.8 um if you plan on using store tasker
15:06.1 15:09.6 once again i will be very grateful if
15:07.8 15:12.9 you use my link which you will find in
15:09.6 15:15.2 the description of this video and if you
15:12.9 15:17.0 have any questions if you get stuck at
15:15.2 15:19.5 any parts
15:17.0 15:20.2 leave a comment and i will try to help
15:19.5 15:22.1 you
15:20.2 15:24.8 i might answer with a comment or i might
15:22.1 15:28.4 make another video that is more in
15:24.8 15:31.9 depth that's all for today thanks
15:28.4 15:31.9 see you next time

Scan code to add assistant

Receive free VIP experience members

Each account can be free of charge once